1 Reply Latest reply: May 21, 2012 4:11 PM by 610203 RSS

    Rows are not highlighted when I switch between pages

    user10484841
      I have this JSF table with rows which are highlighted when they are clicked:
      <?xml version='1.0' encoding='UTF-8' ?>
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"    
            xmlns:h="http://java.sun.com/jsf/html"
            xmlns:f="http://java.sun.com/jsf/core"
            xmlns:ui="http://java.sun.com/jsf/facelets">
          <h:head>
              <ui:insert name="header">           
                  <ui:include src="header.xhtml"/>         
              </ui:insert>
          </h:head>
          <h:body>
      
              <h1><img src="resources/css/images/icon.png" alt="DX-57" /> History Center</h1>
              <!-- layer for black background of the buttons -->
              <div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative;  background-color:black">
                  <!-- Include page Navigation -->
                  <ui:insert name="Navigation">           
                      <ui:include src="Navigation.xhtml"/>         
                  </ui:insert>
      
              </div>  
      
              <div id="logodiv" style="position:relative; top:35px; left:0px;"> 
                  <h:graphicImage alt="Dashboard"  style="position:relative; top:-20px; left:9px;"  value="resources/images/logo_sessions.png" />
              </div>
              <div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute;  background-color:transparent; top:105px">
      
                  <div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute;  background-color:transparent; top:80px">
      
                      <div id="settingsHashMap" style="width:750px; height:400px; position:absolute;  background-color:r; top:20px; left:1px">
      
                          <h:form id="form">
      
                              <ui:debug />
      
                              <!-- The sortable data table -->
                              <h:dataTable id="dataTable" value="#{SessionsController.dataList}" binding="#{table}" var="item">
                                  <!-- Check box -->
                                  <h:column>
                                      <f:facet name="header">
                                          <h:outputText value="Select" />
                                      </f:facet>
                                      <h:selectBooleanCheckbox onclick="highlight(this)" value="#{SessionsController.selectedIds[item.aSessionID]}" />
                                  </h:column>
                                  <h:column>
                                      <f:facet name="header">
                                          <h:commandLink value="№" actionListener="#{SessionsController.sort}">
                                              <f:attribute name="№" value="№" />
                                          </h:commandLink>
                                      </f:facet>
                                      <h:outputText value="#{table.rowIndex + SessionsController.firstRow + 1}" />
                                  </h:column>
                                  <h:column>
                                      <f:facet name="header">
                                          <h:commandLink value="Account Session ID" actionListener="#{SessionsController.sort}">
                                              <f:attribute name="sortField" value="Account Session ID" />
                                          </h:commandLink>
                                      </f:facet>
                                      <h:outputText value="#{item.aSessionID}" />
                                  </h:column>
                                  <h:column>
                                      <f:facet name="header">
                                          <h:commandLink value="User ID" actionListener="#{SessionsController.sort}">
                                              <f:attribute name="sortField" value="User ID" />
                                          </h:commandLink>
                                      </f:facet>
                                      <h:outputText value="#{item.userID}" />
                                  </h:column>
                                  <h:column>
                                      <f:facet name="header">
                                          <h:commandLink value="Activity Start Time" actionListener="#{SessionsController.sort}">
                                              <f:attribute name="sortField" value="Activity Start Time" />
                                          </h:commandLink>
                                      </f:facet>
                                      <h:outputText value="#{item.activityStart}" />
                                  </h:column>
                                  <h:column>
                                      <f:facet name="header">
                                          <h:commandLink value="Activity End Time" actionListener="#{SessionsController.sort}">
                                              <f:attribute name="sortField" value="Activity End Time" />
                                          </h:commandLink>
                                      </f:facet>
                                      <h:outputText value="#{item.activityEnd}" />
                                  </h:column>
                                  <h:column>
                                      <f:facet name="header">
                                          <h:commandLink value="Activity" actionListener="#{SessionsController.sort}">
                                              <f:attribute name="sortField" value="Activity" />
                                          </h:commandLink>
                                      </f:facet>
                                      <h:outputText value="#{item.activity}" />
                                  </h:column>
                              </h:dataTable>
      
                              <!-- The paging buttons -->
                              <h:commandButton value="first" action="#{SessionsController.pageFirst}"
                                               disabled="#{SessionsController.firstRow == 0}" >
                                  <f:ajax render="@form" execute="@form"></f:ajax>
                              </h:commandButton>
      
      
                              <h:commandButton value="prev" action="#{SessionsController.pagePrevious}"
                                               disabled="#{SessionsController.firstRow == 0}" >
                                  <f:ajax render="@form" execute="@form"></f:ajax>
                              </h:commandButton>
      
                              <h:commandButton value="next" action="#{SessionsController.pageNext}"
                                               disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" >
                                  <f:ajax render="@form" execute="@form"></f:ajax>
                              </h:commandButton>    
      
                              <h:commandButton value="last" action="#{SessionsController.pageLast}"
                                               disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage >= SessionsController.totalRows}" >
                                  <f:ajax render="@form" execute="@form"></f:ajax>
                              </h:commandButton>
      
                              <h:outputText value="Page #{SessionsController.currentPage} / #{SessionsController.totalPages}" />
                              <br />
      
                              <!-- The paging links -->
                              <ui:repeat value="#{SessionsController.pages}" var="page">
                                  <h:commandLink value="#{page}" actionListener="#{SessionsController.page}"
                                                 rendered="#{page != SessionsController.currentPage}" >
                                      <f:ajax render="@form" execute="@form"></f:ajax>   
                                  </h:commandLink>
                                  <h:outputText value="#{page}" escape="false"
                                                rendered="#{page == SessionsController.currentPage}" />
                              </ui:repeat>
                              <br />
      
                              <!-- Set rows per page -->
                              <h:outputLabel for="rowsPerPage" value="Rows per page" />
                              <h:inputText id="rowsPerPage" value="#{SessionsController.rowsPerPage}" size="3" maxlength="3" />
                              <h:commandButton value="Set" action="#{SessionsController.pageFirst}" >
                                  <f:ajax render="@form" execute="@form"></f:ajax>
                              </h:commandButton>
                              <h:message for="rowsPerPage" errorStyle="color: red;" />
      
                              <h:commandButton value="Delete" action="#{SessionsController.deleteSelectedIDs}" >
                                  <f:ajax render="@form" execute="@form"></f:ajax>
                              </h:commandButton>
      
                              <script type="text/javascript">
                                  $("tr").not(':first').hover(
                                  function () {
                                      $(this).css("background","#707070");
                                  }, 
                                  function () {
                                      $(this).css("background","");
                                  }
                              );              
      
                                  function highlight(param) {  
                                      var row = jQuery(param).parent().parent().children();
                                      row.toggleClass('highlited');
                                  }        
                              </script>
      
      
                          </h:form>                  
      
                      </div>   
      
                      <div id="settingsdivb" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:800px">
      
                      </div>   
                  </div>  
              </div>
      
          </h:body>
      </html> 
      When I select a row the row is highlighted:

      <img src='http://s17.postimage.org/xm8cd64u3/image.jpg' border='0' alt="1" />
      But when I move to other page and I return back the selected rows are not highlighted. They are only checked:
      <img src='http://s7.postimage.org/m1ljy3edj/image.jpg' border='0' alt="2" />

      Maybe I need other argument in this tag:
      <h:selectBooleanCheckbox onclick="highlight(this)" value="#{SessionsController.selectedIds[item.aSessionID]}" />
      Or I have to modify the JavaScript? How I can fix the problem?

      PS. How I can modify the JavaScript to highlight every selected checkbox. Not just when It's called from the onclick event?
        • 1. Re: Rows are not highlighted when I switch between pages
          610203
          Hi,

          You could run a javascript code when the page is rendered and use jQuery to get the <input type="checkbox" checked="checked"> and put the correct class to the parent tr.

          To find the check box selected look at [http://api.jquery.com/checkbox-selector/]. Then you could put your code in your javascript block of your page, this code will be executed when the page is rendered (via ajax because you are using @form in your f:ajax tags or a full page render)

          Maybe this line of code inserted in your <script> part can help you:
          $("#dataTable input:[type=checkbox][checked=false]").parent().parent().addClass('highlited');
          But I not sure about how many parent() you need in the selector, you could check it using the firebug.

          Regards