I have a component that is conditionally rendered :

<ma:croptool for="croparea" aspectRatio="4" bgColor="#000" bgOpacity=".6" redered="#{bean.renderIt}"/>

This component renders a javascript code that uses jQuery. The problem is that document gets loaded, fires "ready" event, but jQuery has not been registered on it yet ("rendered" condition not met). Then ajax request reRenders the control, but jQuery is waiting forever, because "ready" event has been fired long ago.

My workaround is to put following code on page :

<script type="text/javascript">
 var onReadyA = new A4J.AJAX.Listener(
 function(){
 jQuery.ready();
 });
 A4J.AJAX.AddListener(onReadyA);
</script>

This is however a poor hack. My component should no require this.

Here is my components initialization script :

if(!window.LOG){window.LOG={warn:function(){}};
}
if(!window.Richfaces)window.Richfaces={};
Richfaces.Croptool=Class.create();
Richfaces.Croptool.prototype={
 initialize:function(options){
 this.input=jQuery(document.getElementById(options.clientId));
 this.input.component=this;
 var croptool = this;
 this.customOnChange = options.onChange;
 function onChange(c) {
 croptool.input.val(c.x+";"+c.y+";"+c.w+";"+c.h);
 if(typeof(croptool.customOnChange) === "function") {
 croptool.customOnChange();
 } else if(typeof(croptool.customOnChange) === "string") {
 eval(croptool.customOnChange);
 }
 }
 options.onChange = onChange;
 //initialize Jcrop
 jQuery(function() {
 var api = jQuery.Jcrop(document.getElementById(options.forId),options);
 croptool.component = jQuery.extend(croptool,api);
 });
 this["rich:destructor"]="destroy";
 },
 destroy:function(){this.croptool.component=null;}};