Board index JavaServer Faces General javascript stops working on datatable page change

javascript stops working on datatable page change

Components, Ajax Framework, Utilities and More.


Posts: 32
Hi,

I am using Primefaces 3.0.M4 and Spring WebFlow.

I have a primefaces datatable with records, and jquery script that shows a delete button/link as the user hovers over the different rows. Everything works great until, for example, a page of the datatable is changed (lazily loaded); then the jquery hover function stops working until the page is fully refreshed. (The same happens when any partial update is call on the page.)

Any ideas? Code sample below. Thanks!
<p:dataTable id="referenceList" var="reference" value="#{referencesAllBean.references}"
                    paginator="true" rows="5" paginatorTemplate="{CurrentPageReport} 
                    {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink}
                    {LastPageLink} {RowsPerPageDropdown}" rowsPerPageTemplate="5,10,15"
                    paginatorPosition="bottom" lazy="true" dynamic="true">
                    
                 <p:column>
                             <h:panelGrid  columns="2" cellpadding="5">                                 
                                     <h:panelGroup>                             
                    <div id="refContent">
                         Content of the datatable record with some ajax features including commenting by users.
               </div>
                </h:panelGroup>
                    <h:panelGroup>             
                    <div id="test" style="color: wheat; display: none">      
                       <p:commandLink action="removeReference" actionListener="#{referencesAllBean.removeReference}" update=":refs:refTagsList">
                          <f:attribute name="index" value="#{status.index}" />
                          <f:setPropertyActionListener value="#{reference}" target="#{referencesAllBean.selectedReference}" />
                        <p:graphicImage url="/images/delete_BW.png"
                           style="width: 13px; height: 13px;" />
                      </p:commandLink>
                             </div>
                 </h:panelGroup>
             </h:panelGrid>
                 </p:column>
              </p:dataTable> 
            </p:outputPanel>

<script type="text/javascript">
$("tr").hover(
  function () {
    $("#test", this).fadeIn();
  },
  function () {
     $("#test", this).fadeOut();
     }
);
</script>


Posts: 32
Looks like to make this to work, the javascript had to be included as part of the p:column content.


Return to General