【问题标题】:JavaScript bug in JSF tableJSF 表中的 JavaScript 错误
【发布时间】:2026-01-26 10:10:01
【问题描述】:

我有这个 JSF 表:

<?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>

当我在 firefox 中打开页面时,在 Firebug 中出现以下错误:

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

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

此 JavaScript 代码中似乎存在错误。如何修复代码?

最好的祝福

编辑

这是 Firebug 中的确切错误

highlight is not defined

这是 Firebug 中的错误:

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

【问题讨论】:

    标签: java javascript css jsf jsf-2


    【解决方案1】:

    它与表格无关...

    我在您发布的代码中没有看到任何选项卡...所以删除此 js 代码...

    这个js代码的目的是基于html代码来渲染标签...我没看到

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

    顺便问一下,你在 js 中看到的具体错误是什么?

    更新

    它说你的js代码中没有名为highlight的函数...你应该实现它或确保它所在的js包含在你的页面中

    例如,如果您使用的是 jquery,以下可能会起作用...(取决于您传递的变量)

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

    【讨论】:

    • 我用这种方式替换了代码:pastebin.com/Ez7jTmnZ 但是当我点击一行来选择它时,它没有突出显示。也许缺少什么?
    • 好吧,我有一个坏消息和一个好消息 - 我将突出显示的 JavaScript 函数放入标题中,它现在可以正常工作,没有错误。不好的是,当我在行之间移动光标时,它们没有突出显示 - 此代码可能丢失或不可见 - pastebin.com/2QQ2Gv6k 我必须将此代码放在哪里才能工作?
    • 尝试将它放在 $(document).ready(function () { 块中...您可以添加 alert("aaa"); 以查看此代码块是否真的运行...