9 Replies Latest reply on May 27, 2009 12:38 PM by Julien Martin

    Problem with a jQuery plugin and a reRender

    Julien Martin Expert

      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.

        • 1. Re: Problem with a jQuery plugin and a reRender
          Nick Belaevski Master

          Hi J,

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

          • 2. Re: Problem with a jQuery plugin and a reRender
            Julien Martin Expert

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

            • 3. Re: Problem with a jQuery plugin and a reRender
              Ilya Shaikovsky Master

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

              • 4. Re: Problem with a jQuery plugin and a reRender
                Julien Martin Expert

                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.

                • 5. Re: Problem with a jQuery plugin and a reRender
                  Julien Martin Expert

                  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.

                  • 7. Re: Problem with a jQuery plugin and a reRender
                    Julien Martin Expert

                    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.

                    • 8. Re: Problem with a jQuery plugin and a reRender
                      Ilya Shaikovsky Master

                       


                      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.

                      • 9. Re: Problem with a jQuery plugin and a reRender
                        Julien Martin Expert

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