Databases
StackOverflow2013
Postsdbo
PORows are not highlighted when I switch between pages
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORows are not highlighted when I switch between pages
    primarykey
    data
    text
    <p>I have this JSF table with rows which are highlighted when they are clicked:</p> <pre><code>&lt;?xml version='1.0' encoding='UTF-8' ?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt; &lt;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"&gt; &lt;h:head&gt; &lt;ui:insert name="header"&gt; &lt;ui:include src="header.xhtml"/&gt; &lt;/ui:insert&gt; &lt;/h:head&gt; &lt;h:body&gt; &lt;h1&gt;&lt;img src="resources/css/images/icon.png" alt="DX-57" /&gt; History Center&lt;/h1&gt; &lt;!-- layer for black background of the buttons --&gt; &lt;div id="toolbar" style="margin: 0 auto; width:1180px; height:30px; position:relative; background-color:black"&gt; &lt;!-- Include page Navigation --&gt; &lt;ui:insert name="Navigation"&gt; &lt;ui:include src="Navigation.xhtml"/&gt; &lt;/ui:insert&gt; &lt;/div&gt; &lt;div id="logodiv" style="position:relative; top:35px; left:0px;"&gt; &lt;h:graphicImage alt="Dashboard" style="position:relative; top:-20px; left:9px;" value="resources/images/logo_sessions.png" /&gt; &lt;/div&gt; &lt;div id="main" style="margin: 0 auto; width:1190px; height:700px; position:absolute; background-color:transparent; top:105px"&gt; &lt;div id="mainpage" style="margin: 0 auto; width:1190px; height:500px; position:absolute; background-color:transparent; top:80px"&gt; &lt;div id="settingsHashMap" style="width:750px; height:400px; position:absolute; background-color:r; top:20px; left:1px"&gt; &lt;h:form id="form"&gt; &lt;ui:debug /&gt; &lt;!-- The sortable data table --&gt; &lt;h:dataTable id="dataTable" value="#{SessionsController.dataList}" binding="#{table}" var="item"&gt; &lt;!-- Check box --&gt; &lt;h:column&gt; &lt;f:facet name="header"&gt; &lt;h:outputText value="Select" /&gt; &lt;/f:facet&gt; &lt;h:selectBooleanCheckbox onclick="highlight(this)" value="#{SessionsController.selectedIds[item.aSessionID]}" /&gt; &lt;/h:column&gt; &lt;h:column&gt; &lt;f:facet name="header"&gt; &lt;h:commandLink value="№" actionListener="#{SessionsController.sort}"&gt; &lt;f:attribute name="№" value="№" /&gt; &lt;/h:commandLink&gt; &lt;/f:facet&gt; &lt;h:outputText value="#{table.rowIndex + SessionsController.firstRow + 1}" /&gt; &lt;/h:column&gt; &lt;h:column&gt; &lt;f:facet name="header"&gt; &lt;h:commandLink value="Account Session ID" actionListener="#{SessionsController.sort}"&gt; &lt;f:attribute name="sortField" value="Account Session ID" /&gt; &lt;/h:commandLink&gt; &lt;/f:facet&gt; &lt;h:outputText value="#{item.aSessionID}" /&gt; &lt;/h:column&gt; &lt;h:column&gt; &lt;f:facet name="header"&gt; &lt;h:commandLink value="User ID" actionListener="#{SessionsController.sort}"&gt; &lt;f:attribute name="sortField" value="User ID" /&gt; &lt;/h:commandLink&gt; &lt;/f:facet&gt; &lt;h:outputText value="#{item.userID}" /&gt; &lt;/h:column&gt; &lt;h:column&gt; &lt;f:facet name="header"&gt; &lt;h:commandLink value="Activity Start Time" actionListener="#{SessionsController.sort}"&gt; &lt;f:attribute name="sortField" value="Activity Start Time" /&gt; &lt;/h:commandLink&gt; &lt;/f:facet&gt; &lt;h:outputText value="#{item.activityStart}" /&gt; &lt;/h:column&gt; &lt;h:column&gt; &lt;f:facet name="header"&gt; &lt;h:commandLink value="Activity End Time" actionListener="#{SessionsController.sort}"&gt; &lt;f:attribute name="sortField" value="Activity End Time" /&gt; &lt;/h:commandLink&gt; &lt;/f:facet&gt; &lt;h:outputText value="#{item.activityEnd}" /&gt; &lt;/h:column&gt; &lt;h:column&gt; &lt;f:facet name="header"&gt; &lt;h:commandLink value="Activity" actionListener="#{SessionsController.sort}"&gt; &lt;f:attribute name="sortField" value="Activity" /&gt; &lt;/h:commandLink&gt; &lt;/f:facet&gt; &lt;h:outputText value="#{item.activity}" /&gt; &lt;/h:column&gt; &lt;/h:dataTable&gt; &lt;!-- The paging buttons --&gt; &lt;h:commandButton value="first" action="#{SessionsController.pageFirst}" disabled="#{SessionsController.firstRow == 0}" &gt; &lt;f:ajax render="@form" execute="@form"&gt;&lt;/f:ajax&gt; &lt;/h:commandButton&gt; &lt;h:commandButton value="prev" action="#{SessionsController.pagePrevious}" disabled="#{SessionsController.firstRow == 0}" &gt; &lt;f:ajax render="@form" execute="@form"&gt;&lt;/f:ajax&gt; &lt;/h:commandButton&gt; &lt;h:commandButton value="next" action="#{SessionsController.pageNext}" disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage &gt;= SessionsController.totalRows}" &gt; &lt;f:ajax render="@form" execute="@form"&gt;&lt;/f:ajax&gt; &lt;/h:commandButton&gt; &lt;h:commandButton value="last" action="#{SessionsController.pageLast}" disabled="#{SessionsController.firstRow + SessionsController.rowsPerPage &gt;= SessionsController.totalRows}" &gt; &lt;f:ajax render="@form" execute="@form"&gt;&lt;/f:ajax&gt; &lt;/h:commandButton&gt; &lt;h:outputText value="Page #{SessionsController.currentPage} / #{SessionsController.totalPages}" /&gt; &lt;br /&gt; &lt;!-- The paging links --&gt; &lt;ui:repeat value="#{SessionsController.pages}" var="page"&gt; &lt;h:commandLink value="#{page}" actionListener="#{SessionsController.page}" rendered="#{page != SessionsController.currentPage}" &gt; &lt;f:ajax render="@form" execute="@form"&gt;&lt;/f:ajax&gt; &lt;/h:commandLink&gt; &lt;h:outputText value="#{page}" escape="false" rendered="#{page == SessionsController.currentPage}" /&gt; &lt;/ui:repeat&gt; &lt;br /&gt; &lt;!-- Set rows per page --&gt; &lt;h:outputLabel for="rowsPerPage" value="Rows per page" /&gt; &lt;h:inputText id="rowsPerPage" value="#{SessionsController.rowsPerPage}" size="3" maxlength="3" /&gt; &lt;h:commandButton value="Set" action="#{SessionsController.pageFirst}" &gt; &lt;f:ajax render="@form" execute="@form"&gt;&lt;/f:ajax&gt; &lt;/h:commandButton&gt; &lt;h:message for="rowsPerPage" errorStyle="color: red;" /&gt; &lt;h:commandButton value="Delete" action="#{SessionsController.deleteSelectedIDs}" &gt; &lt;f:ajax render="@form" execute="@form"&gt;&lt;/f:ajax&gt; &lt;/h:commandButton&gt; &lt;script type="text/javascript"&gt; $("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'); } &lt;/script&gt; &lt;/h:form&gt; &lt;/div&gt; &lt;div id="settingsdivb" style="width:350px; height:400px; position:absolute; background-color:transparent; top:20px; left:800px"&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/h:body&gt; &lt;/html&gt; </code></pre> <p>When I select a row the row is highlighted:</p> <p><img src="https://i.stack.imgur.com/XhOrg.png" alt="enter image description here"> </p> <p>But when I move to other page and I return back the selected rows are not highlighted. They are only checked:</p> <p><img src="https://i.stack.imgur.com/z5V5U.png" alt="enter image description here"> </p> <p>Maybe I need other argument in this tag:</p> <pre><code>&lt;h:selectBooleanCheckbox onclick="highlight(this)" value="#{SessionsController.selectedIds[item.aSessionID]}" /&gt; </code></pre> <p>Or I have to modify the JavaScript? How I can fix the problem?</p> <p>PS. How I can modify the JavaScript to highlight every selected checkbox. Not just when It's called from the <code>onclick</code> event? </p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USRhand
    1. USPeter Penzov
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. PORows are not highlighted when I switch between pages
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload