javascript stops working on datatable page change

UI Components for JSF
Post Reply
tomik
Posts: 32
Joined: 21 Jan 2011, 06:50

27 Nov 2011, 01:26

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!

Code: Select all

<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>

tomik
Posts: 32
Joined: 21 Jan 2011, 06:50

28 Nov 2011, 05:36

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

Post Reply

Return to “PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 17 guests