Problem with a jQuery plugin and a reRender

[balteo]

Hello,

I am using Richfaces 3.3.0 together with jQuery and a jQuery tooltip plugin (I need this plugin specifically instead of the RF tooltip).

My problem is as follows: the jquery tooltip div is not reRendered by the a4j:poll whereas a "plain" div on the page is indeed reRendered.

I have checked the reRender attribute list and it seems ok.

Here is the facelet code with the a4j:outputpanel that fails to be reRendered:

 <div id="tt" style="display: none">
 <a4j:outputPanel id="sculptureSuggereeTT" ajaxRendered="true">
 <p>
 <rest:link id="detailTT" value="sculptureAction" styleClass="miniature-link">
 <f:param name="id" value="#{suggestionOeuvreView.sculptureSuggeree.sculptureID}" />
 <f:param name="titre" value="#{jbm:normaliserURL(suggestionOeuvreView.sculptureSuggeree.sculpturei18nMap[view.locale.language].titre)}" />
 <h:graphicImage value="#{initParam['com.jeanbaptistemartin.static.url']}/#{suggestionOeuvreView.sculptureSuggeree.photoDetail}" styleClass="miniature-image" />
 </rest:link>
 </p>
 <p>
 <rest:link id="texteTT" value="sculptureAction">
 <f:param name="id" value="#{suggestionOeuvreView.sculptureSuggeree.sculptureID}" />
 <f:param name="titre" value="#{jbm:normaliserURL(suggestionOeuvreView.sculptureSuggeree.sculpturei18nMap[view.locale.language].titre)}" />
 <h:outputText value="#{suggestionOeuvreView.sculptureSuggeree.sculpturei18nMap[view.locale.language].titre}, " />
 <h:outputText value="#{suggestionOeuvreView.sculptureSuggeree.sculpturei18nMap[view.locale.language].matiere}, " />
 <h:outputText value="#{suggestionOeuvreView.sculptureSuggeree.annee}">
 <f:convertDateTime pattern="yyyy" timeZone="Europe/Paris"/>
 </h:outputText>
 </rest:link>
 </p>
 </a4j:outputPanel>
 </div>

Note that it is the whole #tt div that is the tooltip that appears.

Here is the a4j:poll:

 <a4j:region>
 <a4j:outputPanel id="poll" ajaxRendered="true">
 <a4j:form>
 <a4j:poll actionListener="#{suggestionOeuvreView.suggererSculpture}" interval="6000"
 reRender="sculptureSuggeree,sculptureSuggereeTT,poll" ajaxSingle="true" limitToList="true" enabled="#{suggestionOeuvreView.enabled}"
 immediate="true" ignoreDupResponses="true" oncomplete="pulsateDiv()" />
 </a4j:form>
 </a4j:outputPanel>
 </a4j:region>

Any idea?

The plugin I use is the following:

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

Any idea or comment welcome,

J.

[nbelaevski]

Hi J,

Please add <a4j:log popup="false" /> and check if there are any errors there.

[balteo]

Thanks,
I tried adding an <a4j:log but to my surprise it does not log any errors...
Julien.

[ilya_shaikovsky]

if the log contains entries about attempting to update the sculptureSuggereeTT element?

[balteo]

The log does contain info about sculptureSuggereeTT. Here it is:

Query preparation for form 'j_id97' requested
debug[17:45:39,306]: Append hidden control j_id97 with value [j_id97] and value attribute [j_id97]
debug[17:45:39,307]: Append hidden control autoScroll with value [] and value attribute []
debug[17:45:39,307]: Append hidden control javax.faces.ViewState with value [j_id1] and value attribute [j_id1]
debug[17:45:39,307]: parameter j_id97:j_id98 with value j_id97:j_id98
debug[17:45:39,307]: parameter ajaxSingle with value j_id97:j_id98
debug[17:45:39,307]: Look up queue with default name
debug[17:45:39,307]: Creating new transient queue 'j_id97:j_id98' with default settings
debug[17:45:39,308]: Adding queue 'j_id97:j_id98' to queues registry
debug[17:45:39,308]: Queue is empty now
debug[17:45:39,308]: New request added to queue 'j_id97:j_id98'. Queue similarityGroupingId changed to j_id97:j_id98
debug[17:45:39,308]: Queue will wait 0ms before submit
debug[17:45:39,308]: Queue 'j_id97:j_id98' will submit request NOW
debug[17:45:39,309]: NEW AJAX REQUEST !!! with form: j_id97
debug[17:45:39,309]: Start XmlHttpRequest
debug[17:45:39,309]: Reqest state : 1
debug[17:45:39,310]: QueryString: AJAXREQUEST=j_id96&j_id97=j_id97&autoScroll=&javax.faces.ViewState=j_id1&j_id97%3Aj_id98=j_id97%3Aj_id98&ajaxSingle=j_id97%3Aj_id98&AJAX%3AEVENTS_COUNT=1&
debug[17:45:39,313]: Reqest state : 1
debug[17:45:39,386]: Reqest state : 2
debug[17:45:39,388]: Reqest state : 3
debug[17:45:39,388]: Reqest state : 4
debug[17:45:39,388]: Reqest end with state 4
debug[17:45:39,388]: Response with content-type: text/xml;charset=UTF-8
debug[17:45:39,389]: Full response content: <?xml version="1.0"?> <html xmlns="http://www.w3.org/1999/xhtml"><head><title></title><link class="component" href="/jeanbaptistemartin/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_.jsf" rel="stylesheet" type="text/css" /><link class="component" href="/jeanbaptistemartin/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_.jsf" media="rich-extended-skinning" rel="stylesheet" type="text/css" /><script src="/jeanbaptistemartin/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.PrototypeScript.jsf" type="text/javascript"> </script><script src="/jeanbaptistemartin/a4j/g/3_3_0.GAscripts/scriptaculous/effects.js.jsf" type="text/javascript"> </script><script src="/jeanbaptistemartin/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/script/processEffect.js.jsf" type="text/javascript"> </script><script src="/jeanbaptistemartin/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.AjaxScript.jsf" type="text/javascript"> </script><script src="/jeanbaptistemartin/a4j/g/3_3_0.GAorg/ajax4jsf/javascript/scripts/form.js.jsf" type="text/javascript"> </script><script src="/jeanbaptistemartin/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/skinning.js.jsf" type="text/javascript"> </script><script src="/jeanbaptistemartin/js/jquery-1.2.6.js" type="text/javascript"> </script><script src="/jeanbaptistemartin/js/jquery.scrollTo.js" type="text/javascript"> </script><script src="/jeanbaptistemartin/js/jquery.serialScroll.js" type="text/javascript"> </script><script src="/jeanbaptistemartin/js/jquery.dimensions.js" type="text/javascript"> </script><script src="/jeanbaptistemartin/js/jquery.dimensions-1.2.js" type="text/javascript"> </script><script src="/jeanbaptistemartin/js/jquery.hoverIntent.js" type="text/javascript"> </script><script src="/jeanbaptistemartin/js/jquery.cluetip.js" type="text/javascript"> </script><script src="/jeanbaptistemartin/js/init.js" type="text/javascript"> </script><meta name="Ajax-Update-Ids" content="sculptureSuggereeTT,sculptureSuggeree,poll" /><meta id="Ajax-Response" name="Ajax-Response" content="true" /></head><body><span id="sculptureSuggereeTT"><p><a id="detailTT" href="/jeanbaptistemartin/lang/fr/sculpture/La+pose-3" class="miniature-link"><img src="http://static.jeanbaptistemartin.com/sculptures/carre_detail_lapose_200x200.jpg" class="miniature-image" /></a></p> <p><a id="texteTT" href="/jeanbaptistemartin/lang/fr/sculpture/La+pose-3">La pose, bronze, 2007</a></p></span><span id="sculptureSuggeree"><a id="goToSculpture" href="/jeanbaptistemartin/lang/fr/sculpture/La+pose-3">La pose, bronze</a><script type="text/javascript">//<![CDATA[ pulsateDiv = function () { return Richfaces.processEffect(Object.extend(Object.extend( Object.extend({type:'Pulsate'},{targetId:'goToSculpture',attachId:'goToSculpture'}), Object.extend ({},{duration:2.0,pulses:2})), arguments[0]||{})); }; //]]> </script></span><span id="poll"><form id="j_id97" name="j_id97" method="post" action="/jeanbaptistemartin/sculpture.jsf"><span style="display:none;" id="j_id97:j_id98"><script type="text/javascript">//<![CDATA[ A4J.AJAX.Poll('j_id96','j_id97',{'affected':['sculptureSuggereeTT','poll','sculptureSuggeree'] ,'pollId':'j_id97:j_id98','ignoreDupResponses':true,'implicitEventsQueue':'j_id97:j_id98','oncomplete':function(request,event,data){pulsateDiv()},'similarityGroupingId':'j_id97:j_id98','parameters':{'j_id97:j_id98':'j_id97:j_id98','ajaxSingle':'j_id97:j_id98'} ,'pollinterval':6000,'actionUrl':'/jeanbaptistemartin/sculpture.jsf'} ); //]]> </script></span><input type="hidden" name="j_id97" value="j_id97" /><input type="hidden" name="autoScroll" value="" /><input type="hidden" name="j_id97:j_idcl" value="" /><input type="hidden" name="j_id97:_link_hidden_" value="" /><script type="text/javascript">//<![CDATA[ function clear_j_id97() { _clearJSFFormParameters('j_id97','',['j_id97:j_idcl','j_id97:_link_hidden_']); } function clearFormHiddenParams_j_id97(){clear_j_id97();} function clearFormHiddenParams_j_id97(){clear_j_id97();} clear_j_id97(); //]]> </script><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id1" /></form></span><span id="ajax-view-state"><input type="hidden" name="javax.faces.ViewState" id="javax.faces.ViewState" value="j_id1" /></span><span id="org.ajax4jsf.oncomplete">pulsateDiv()</span></body></html>
debug[17:45:39,389]: Header Ajax-Expired not found, search in <meta>
debug[17:45:39,390]: search for elements by name 'meta' in element #document
debug[17:45:39,393]: Find <meta name='Ajax-Update-Ids' content='sculptureSuggereeTT,sculptureSuggeree,poll'>
debug[17:45:39,393]: Find <meta name='Ajax-Response' content='true'>
debug[17:45:39,394]: Header Ajax-Update-Ids not found, search in <meta>
debug[17:45:39,394]: search for elements by name 'meta' in element #document
debug[17:45:39,397]: Find <meta name='Ajax-Update-Ids' content='sculptureSuggereeTT,sculptureSuggeree,poll'>
debug[17:45:39,397]: search for elements by name 'script' in element #document
debug[17:45:39,402]: <script> in response with src=/jeanbaptistemartin/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.PrototypeScript.jsf
debug[17:45:39,402]: Such element exist in document
debug[17:45:39,402]: <script> in response with src=/jeanbaptistemartin/a4j/g/3_3_0.GAscripts/scriptaculous/effects.js.jsf
debug[17:45:39,402]: Such element exist in document
debug[17:45:39,403]: <script> in response with src=/jeanbaptistemartin/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/script/processEffect.js.jsf
debug[17:45:39,403]: Such element exist in document
debug[17:45:39,403]: <script> in response with src=/jeanbaptistemartin/a4j/g/3_3_0.GAorg.ajax4jsf.javascript.AjaxScript.jsf
debug[17:45:39,403]: Such element exist in document
debug[17:45:39,403]: <script> in response with src=/jeanbaptistemartin/a4j/g/3_3_0.GAorg/ajax4jsf/javascript/scripts/form.js.jsf
debug[17:45:39,404]: Such element exist in document
debug[17:45:39,404]: <script> in response with src=/jeanbaptistemartin/a4j/g/3_3_0.GAorg/richfaces/renderkit/html/scripts/skinning.js.jsf
debug[17:45:39,404]: Such element exist in document
debug[17:45:39,404]: <script> in response with src=/jeanbaptistemartin/js/jquery-1.2.6.js
debug[17:45:39,405]: Such element exist in document
debug[17:45:39,405]: <script> in response with src=/jeanbaptistemartin/js/jquery.scrollTo.js
debug[17:45:39,405]: Such element exist in document
debug[17:45:39,405]: <script> in response with src=/jeanbaptistemartin/js/jquery.serialScroll.js
debug[17:45:39,405]: Such element exist in document
debug[17:45:39,406]: <script> in response with src=/jeanbaptistemartin/js/jquery.dimensions.js
debug[17:45:39,406]: Such element exist in document
debug[17:45:39,406]: <script> in response with src=/jeanbaptistemartin/js/jquery.dimensions-1.2.js
debug[17:45:39,406]: Such element exist in document
debug[17:45:39,407]: <script> in response with src=/jeanbaptistemartin/js/jquery.hoverIntent.js
debug[17:45:39,407]: Such element exist in document
debug[17:45:39,407]: <script> in response with src=/jeanbaptistemartin/js/jquery.cluetip.js
debug[17:45:39,407]: Such element exist in document
debug[17:45:39,408]: <script> in response with src=/jeanbaptistemartin/js/init.js
debug[17:45:39,408]: Such element exist in document
debug[17:45:39,408]: search for elements by name 'link' in element #document
debug[17:45:39,413]: <link> in response with src=/jeanbaptistemartin/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/basic_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_.jsf
debug[17:45:39,413]: Such element exist in document
debug[17:45:39,413]: <link> in response with src=/jeanbaptistemartin/a4j/s/3_3_0.GAorg/richfaces/renderkit/html/css/extended_classes.xcss/DATB/eAELXT5DOhSIAQ!sA18_.jsf
debug[17:45:39,414]: Such element exist in document
debug[17:45:39,414]: call getElementById for id= org.ajax4jsf.queue_script
debug[17:45:39,414]: Update page part from call parameter for ID sculptureSuggereeTT
debug[17:45:39,414]: call getElementById for id= sculptureSuggereeTT
debug[17:45:39,417]: Replace content of node by replaceChild()
debug[17:45:39,417]: search for elements by name 'script' in element span
debug[17:45:39,423]: Scripts in updated part count : 0
debug[17:45:39,423]: Update part of page for Id: sculptureSuggereeTT successful
debug[17:45:39,423]: Update page part from call parameter for ID poll
debug[17:45:39,423]: call getElementById for id= poll
debug[17:45:39,427]: Replace content of node by replaceChild()
debug[17:45:39,430]: search for elements by name 'script' in element span
debug[17:45:39,435]: Scripts in updated part count : 2
debug[17:45:39,436]: Update part of page for Id: poll successful
debug[17:45:39,436]: Update page part from call parameter for ID sculptureSuggeree
debug[17:45:39,436]: call getElementById for id= sculptureSuggeree
debug[17:45:39,437]: Replace content of node by replaceChild()
debug[17:45:39,437]: search for elements by name 'script' in element span
debug[17:45:39,443]: Scripts in updated part count : 1
debug[17:45:39,443]: Update part of page for Id: sculptureSuggeree successful
debug[17:45:39,443]: call getElementById for id= ajax-view-state
debug[17:45:39,443]: Hidden JSF state fields: [object HTMLSpanElement]
debug[17:45:39,443]: Namespace for hidden view-state input fields is undefined
debug[17:45:39,443]: search for elements by name 'input' in element span
debug[17:45:39,446]: Replace value for inputs: 5 by new values: 1
debug[17:45:39,446]: Input in response: javax.faces.ViewState
debug[17:45:39,447]: Found same input on page with type: hidden
debug[17:45:39,447]: search for elements by name 'INPUT' in element span
debug[17:45:39,450]: Replace value for inputs: 5 by new values: 0
debug[17:45:39,450]: call getElementById for id= _A4J.AJAX.focus
debug[17:45:39,450]: No focus information in response
debug[17:45:39,529]: Evaluate script replaced area in document: // A4J.AJAX.Poll('j_id96','j_id97',{'affected':['sculptureSuggereeTT','poll','sculptureSuggeree'] ,'pollId':'j_id97:j_id98','ignoreDupResponses':true,'implicitEventsQueue':'j_id97:j_id98','oncomplete':function(request,event,data){pulsateDiv()},'similarityGroupingId':'j_id97:j_id98','parameters':{'j_id97:j_id98':'j_id97:j_id98','ajaxSingle':'j_id97:j_id98'} ,'pollinterval':6000,'actionUrl':'/jeanbaptistemartin/sculpture.jsf'} ); //
debug[17:45:39,532]: Script evaluation succeeded
debug[17:45:39,532]: Evaluate script replaced area in document: // function clear_j_id97() { _clearJSFFormParameters('j_id97','',['j_id97:j_idcl','j_id97:_link_hidden_']); } function clearFormHiddenParams_j_id97(){clear_j_id97();} function clearFormHiddenParams_j_id97(){clear_j_id97();} clear_j_id97(); //
debug[17:45:39,535]: Script evaluation succeeded
debug[17:45:39,535]: Evaluate script replaced area in document: // pulsateDiv = function () { return Richfaces.processEffect(Object.extend(Object.extend( Object.extend({type:'Pulsate'},{targetId:'goToSculpture',attachId:'goToSculpture'}), Object.extend ({},{duration:2.0,pulses:2})), arguments[0]||{})); }; //
debug[17:45:39,538]: Script evaluation succeeded
debug[17:45:39,538]: call getElementById for id= org.ajax4jsf.oncomplete
debug[17:45:39,538]: Call request oncomplete function after processing updates
debug[17:45:39,538]: After request: queue 'j_id97:j_id98'
debug[17:45:39,538]: There are 0 requests more in this queue
debug[17:45:39,538]: Queue is empty now
debug[17:45:39,609]: call getElementById for id= _ajax:data

Julien.

[balteo]

Thanks Ilya,
What does the following mean?

Scripts in updated part count : 0

Does that mean a failure to update?

Are there any incompatibilities between JQuery and Richfaces' re-renders?

J.

[ilya_shaikovsky]

look to these ones please
https://jira.jboss.org/jira/browse/RF-6417
https://jira.jboss.org/jira/browse/RF-3477

feel free to vote for them and add comments

[balteo]

Hello Ilya,
If I understand you, the only workaround is the livequery plugin?
Do you see another workaround?
Which version of RF is supposed to fix the problem?
Thanks in advance,
Julien.

[ilya_shaikovsky]

Which version of RF is supposed to fix the problem?

While RichFaces updating the DOM via Ajax it knows nothing about thirdparties used.. And knows nothing about which event client side listeners was bind to which elements and if them should be restored..

So how our reRendering could handle this in general? Try to handle the observers addition/removal with our onsubmit, onbeforedomupdate, oncomplete handlers.

[balteo]

thanks Ilya,
I'll do just that.
J.