JavaScript bug in JSF table

Question

I have this JSF table:

<?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[dataItem.id]}" />
                            </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:form>                 

                </div>  

                <div id="settingsdivb" style="width:350px; height:400px; position:absolute;  background-color:transparent; top:20px; left:800px">

                </div>  
            </div>   
        </div>

        <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');
            }       

            $(document).ready(function () {
            $("#tabs").tabs();
            });

            $(window).load(function() {
                    jsf.ajax.addOnEvent(function (data) {
                            if (data.status === "success") {
                                    $("#tabs").tabs();
                            }
                    });
            });
        </script>


    </h:body>
</html>

When I open the page into firefox I get error in Firebug on these lines:

$(document).ready(function () {
            $("#tabs").tabs();
            });

            $(window).load(function() {
                    jsf.ajax.addOnEvent(function (data) {
                            if (data.status === "success") {
                                    $("#tabs").tabs();
                            }
                    });
            });

It seems that there is a bug in this JavaScript code. How I can fix the code?

Best Wishes

EDIT

This is the exact error in Firebug

highlight is not defined

Here is the mistake in Firebug:

function onclick(event) {
     highlight(this);
}

Daniel · Accepted Answer · 2012-05-01 15:31:47Z

1

Its not related to tables...

I don't see any tabs in the code you posted... so remove this js code...

this js code purpose is to render tabs based on html code... and I don't see

<h:panelGroup id="tabs" layout="block"> in your page...

by the way , what is the exact error that you see in js ?

update

It says that there is not function named highlight in your js code... you should implement it or make sure that the js that its located inside it is included in your page

for example if you were using jquery the following might work... (depend on your passed variable)

function highlight(myThis){
    $(myThis).effect("highlight", {}, 3000);
}

edited May 1, 2012 at 15:31

answered Apr 30, 2012 at 20:20

Daniel

37.2k10 gold badges123 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Peter Penzov Over a year ago

I replaced the code this way: pastebin.com/Ez7jTmnZ But when I click on a row to select it it's not highlighted. Maybe something is missing?

Peter Penzov Over a year ago

Well, I have a bad news and good news - I placed the highlight JavaScript function into the header and it works now without errors. The bad is that when I move the cursor between the rows they are not highlighted - this code maybe is missing or it's not visible - pastebin.com/2QQ2Gv6k Where I must place this code in order to work?

Daniel Over a year ago

try placing it inside the $(document).ready(function () { block... you can add alert("aaa"); to see if this code block really runs...

Collectives™ on Stack Overflow

JavaScript bug in JSF table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related