Richfaces a4j: loadScript clears jQuery plugins on ajax calls

Question

I download jQuery built into RichFaces with:

<a4j:loadScript src="resource://jquery.js"/> 

Next, I download the fancyBox jQuery plugin with:

 <script type="text/javascript" src="/App/fancybox/jquery.fancybox-1.3.4.pack.js"/> 

The plugin works fine when the page first loads, however, after making an ajax call using

 <a4j:jsFunction name="myMethod" data="#{myController.jsonDataToReturn}" action="#{myController.doSomething()}" oncomplete="populateData(data);"> <a4j:actionparam name="selectedTag" assignTo="#{myController.selectedTag}"/> </a4j:jsFunction> 

the plugin stops working. Tests show that the a4j:loadScript reloaded with every ajax call, thereby reloading the jQuery variable, which loses the plugin connected.

The current workaround is to load jQuery by placing the <rich:jQuery query="fn" /> somewhere on the page. It does nothing except to force jQuery to load, but since it does not use a4j, jQuery does not restart when ajax calls.

However, is there a clean solution for this? I am using RichFaces 3.3.3, which includes jQuery 1.3.2.

Update

FancyBox is loading:

 jQuery(document).ready( function(){ jQuery('.fancyboxLink').live('click',aclick); }); function aclick(){ jQuery.fancybox({ href: '#{facesContext.externalContext.requestContextPath}/webpage.xhtml', type:'iframe', width:710, height:510, padding:0, margin:0, hideOnOverlayClick:false, overlayColor:'#000' }); return false; } 

After the first ajax call, jQuery no longer contains fancybox.

Answer 1

First of all, you need to load a script for each ajax request, use a4j:loadScript for this.

 <a4j:loadScript src="/App/fancybox/jquery.fancybox-1.3.4.pack.js"/> 

Second: execute this fancybox script when the component is reloaded (ajax call that redistributes part of the tree element containing the element with fancybox). I would do this by writing a custom facelets component, for example.

fancyInput.xhtml:

 <ui:component xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j" xmlns:rich="http://richfaces.org/rich" xmlns:c="http://java.sun.com/jstl/core"> <a4j:loadScript src="resource:///App/fancybox/jquery.fancybox-1.3.4.pack.js"/> <!-- id is passed by component client as facelet param. --> <h:commandButton id="#{id}" otherParameters="....."/> <script type="text/javascript"> jQuery(function() { // Attaching fancybox to rendered component. jQuery($('#{rich:clientId(id)}')).live('click',aclick); }); </script> </ui:component> 

Your page:

 <ui:include src="fancyInput.xhtml"> <ui:param name="id" value="anId"/> <ui:param name="otherParams" value="..."/> </ui:include>