JQuery is not initialized for rich:datatable
I have regular rich:datatable and I'm using rich:jquery to provide sorting and highliting. It works like a charm when table is loaded initially. However after I add another row which includes rountrip to the server and adding another row to the table model all my jquery capabilities are gone. There are no JS errors and I suspect that when AJAX call is completed jQuery initialization code is simply not executed. As result any jquery events are not fired and the styling is gone
The code sample follows:
<rich:panel styleClass="panel">
<f:facet name="header">
<h:panelGroup>
<h:outputText value="Alias Management" />
</h:panelGroup>
</f:facet>
<a4j:region id="aliasRegion">
<rich:dataTable binding="#{deviceDetailsBean.aliasTable}" id="aliasTable"
value="#{deviceDetailsBean.aliasModel}" var="alias"
width="100%">
<rich:column id="c_aliasName" width="150px">
<f:facet name="header">
<h:outputText value="Alias" />
</f:facet>
<rich:inplaceInput value="#{alias.name}" defaultLabel="Click to edit" />
</rich:column>
<!-- More columns here (omitted)-->
<f:facet id="aliasFooter" name="footer">
<rich:columnGroup>
<rich:column id="c_aliasControls" colspan="5" valign="right">
<div style="width:100%;text-align:right">
<h:graphicImage id="addAliasBttn" value="/images/add.png"
style="cursor:pointer;margin-right:10px">
<rich:toolTip>
<span style="white-space:nowrap">
Click to add new alias
</span>
</rich:toolTip>
<a4j:support event="onclick" actionListener="#{deviceDetailsBean.addAlias}"
reRender="aliasTable" />
</h:graphicImage>
<h:graphicImage id="removeAliasBttn" value="/images/delete.gif" style="cursor:pointer">
<rich:toolTip>
<span style="white-space:nowrap">
Click to remove selected alias
</span>
</rich:toolTip>
<a4j:support event="onclick" actionListener="#{deviceMasterFormBean.removeAlias}" />
</h:graphicImage>
</div>
</rich:column>
</rich:columnGroup>
</f:facet>
</rich:dataTable>
<rich:jQuery selector="#aliasTable" name="sortAliasTbl"
query="tablesorter()" />
<rich:jQuery selector="#aliasTable" name="scrollAliasTbl"
query="get(); var t = new ScrollableTable(jQuery(selector)[0], 100)" />
<rich:jQuery selector="#aliasTable tr:odd" query="addClass('odd-row')" />
<rich:jQuery selector="#aliasTable tr:even" query="addClass('even-row')" />
<rich:jQuery selector="#aliasTable thead tr" query="addClass('tbl-sortable-header')" />
<rich:jQuery selector="#aliasTable tfoot tr" query="addClass('tbl-footer')" />
<rich:jQuery selector="#aliasTable tbody tr"
query="mouseover(function(){jQuery(this).addClass('active-row')})"/>
<rich:jQuery selector="#aliasTable tbody tr"
query="mouseout(function(){jQuery(this).removeClass('active-row')})"/>
<rich:jQuery selector="#aliasTable tbody tr"
query="toggle(function(){jQuery(this).addClass('selected-row')},function(){jQuery(this).removeClass('selected-row')})"/>
</a4j:region>
</rich:panel>
