ICEsoft.org Forums: ICEfaces, ICEmobile, ICEpdf

We are trying to integrate ICEfaces in our application prototype.
We are experiencing (after numerous other problems) difficulties with existing dHTML (Javascript) effects using JQuery.

After some analysis we found out, that the javascript code from icefaces-d2d.js which is used by ICEfaces adds two functions to the javascript class Object: associateWith and asEnumerator.

This is performed using Object.prototype.<function_name> = <function_decl>

This is extremely rude.
JQuery uses associative arrays (maps) for effect handling.
In jquery.js:1385 we get an error, because the map contains two unexpected entries - the two functions asEnumerator and associateWith.

@ICEfaces: You should consider using some kind of namespace for your javascript functions. Otherwise clashes with other existing javascript libraries are at hand.

We are now trying to change the JSQuery to be able to handle this.

You can test this by embedding this snipped in the body of a JSF page:
<script type="text/javascript">
function runtest() {
var map = new Object();

for (var key in map) {
var value = map[key];
alert("key: [" + key + "]");
alert("value: [" + value + "]");
}
}
</script>
<a href="javascript:runtest()">run test</a>

It will show that there are two "entries" at an Object.
These are the two functions added by ICEfaces.

has anyone gotten jquery to work with icefaces?

i am *happily* using icefaces 1.5.3 with facelets, and would like
to use some jquery 1.1.3.1 effects.

the following code works fine if you remove the icefaces js file.

foo.html
Code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <script type="text/javascript" src="resources/js/jquery-1.1.3.1.pack.js"></script>
 <script type="text/javascript" src="/crashwebRewrite/xmlhttp/icefaces-d2d.js"></script>
 </head>
 <body>
 <script type="text/javascript">
 	function toggleFoo() {
 		$("select.foo").toggle();
 	}
 </script>
 <a href="javascript:runtest()">run test</a>
 <input type="button" value="toggle" onclick="toggleFoo();" />
 <br />
 <select class="foo">
 	<option>bar</option>
 	<option>bah</option>
 	<option>baz</option>
 </select>
 </body>
 </html>

ICEfaces uses prototype and scriptaculous in its javascript libraries. The functions you're referring to are prototype functions.

http://www.prototypejs.org/learn/extensions

Philip

philip,

thank you, for the explanation.

the link had some nice documentation, and i was
able to access the functions that i needed directly from
prototype, as you suggested.

Code:

 onclick="Element.toggle('${formId}:${name}Select');"

2 caveats were that i had to copy the prototype.js
into my webapp and import it into my page.
otherwise, i wasn't sure how to import it.

Code:

 <script src="resources/js/prototype.js" language="javascript" />

also, the $() didn't work as i would have expected. perhaps,
icefaces, or the facet compiler does something?

but i would think that the following would work?
Code:

 onclick="$('${formId}:${name}Select')).toggle();"

it seemed to evaluate correctly, but i got the following error.

$("feedbackQueryForm:conditionSelect").toggle is not a function

but calling Element.toggle works fine for me.

-scott