h:dataTable loses selected row styleClass after submit - css

Question

In my dataTable when a row is clicked it gets marked with some color. But then this mark disappears because submit occurs. But i re-render only some other part of the page and not the table, so why does it occur? How can i fix this?
The code:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:p="http://primefaces.prime.com.tr/ui"
template="/templates/mainLayout.xhtml">
<ui:define name="header">
<h1>Persons List</h1>
</ui:define>
<ui:define name="content">
<h:form id="mainForm">
<h:outputStylesheet name="tableStyle.css" library="css" target="body"/>
<h:panelGroup id="personPanel">
<h:outputText value="#{msgs.fName}"/>
<h:inputText value="#{personController.person.firstName}" maxlength="20"/>
<h:outputText value="#{msgs.lName}"/>
<h:inputText value="#{personController.person.lastName}" maxlength="20"/>
<h:outputText value="#{msgs.phone}"/>
<h:inputText value="#{personController.person.phone}" maxlength="20"/>
</h:panelGroup>
<h:commandButton value="#{msgs.save}" >
<f:ajax execute="#form" render="personsTable personPanel" listener="#{personController.savePerson}"/>
</h:commandButton>
<h:dataTable id="personsTable" value="#{personController.persons}" var="bean"
styleClass="order-table" headerClass="order-table-header" rowClasses="order-table-odd-row,order-table-even-row" rules="none" >
<h:column>
<f:facet name="header">
<h:outputText value="First Name" />
</f:facet>
<h:commandLink value="#{bean.firstName}" >
<f:ajax execute="#this" render="personPanel" >
<f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
</f:ajax>
</h:commandLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Last Name" />
</f:facet>
<h:commandLink value="#{bean.lastName}" >
<f:ajax execute="#this" render="personPanel">
<f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
</f:ajax>
</h:commandLink>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Phone" />
</f:facet>
<h:commandLink value="#{bean.phone}" >
<!-- f:ajax execute="#this" render="personPanel">
<f:setPropertyActionListener target="#{personController.person}" value="#{bean}" />
</f:ajax-->
</h:commandLink>
</h:column>
</h:dataTable>
</h:form>
</ui:define>
<ui:define name="footer">
<script type="text/javascript">
$(document).ready(function(){
$(".order-table tr").mouseover(function(){
$(this).addClass("over");
});
$(".order-table tr").mouseout(function(){
$(this).removeClass("over");
});
$(".order-table tr").click(function(){
$(".order-table tr").removeClass("choose");
$(this).addClass("choose");
});
});
</script>
</ui:define>
</ui:composition>

Answer 1

You can use firefox and "firebug" plugin to inspect the element in real time to find out what's going on. It could be that something about your update is breaking the inheritance of the style...