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>