本文介绍了JSF页面中的选项卡不起作用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有一个无法解决的问题.当我打开"JSF"选项卡并尝试单击按钮时,该页面无法正常工作.

I have a problem which I cannot solve. When I open JSF tab and I try to click on the buttons the page is not working.

主页:

<?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"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <ui:insert name="header">
            <ui:include src="header.xhtml"/>
        </ui:insert>
        <style type="text/css">
            .settingsHashMap { font: 80% "Trebuchet MS", sans-serif;}
        </style>
    </h:head>
    <h:body>
        <h1><img src="resources/css/images/icon.png" alt="DX-57" /> Rack Management Center</h1>
        <!-- layer for black background of the buttons -->
        <div id="toolbar" style="margin: 0 auto; width:100%; 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="Datacenter Profile" style="position:relative" value="resources/images/logo_datacenter_profile.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="settingsHashMapz" class="settingsHashMap" style="width:1150px; height:400px; position:absolute; top:20px; left:1px">

                    <h:form prependId="false">
                        <h:panelGroup id="tabs" layout="block">
                            <ul>
                                <c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
                                    <li><a href="##{tab.tabid}" onclick="$('#button_#{tab.tabid}').click()">#{tab.tabid}</a></li>
                                    <h:commandButton id="button_#{tab.tabid}" value="TabClick" action="#{DatacenterProfileController.switchPages(tab.tabid)}" style="display:none">
                                        <f:ajax render="tabs"></f:ajax>
                                    </h:commandButton>
                                </c:forEach>
                            </ul>

                            <c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
                                <h:panelGroup id="#{tab.tabid}" layout="block" rendered="#{tab.tabid eq DatacenterProfileController.selectedTab}">
                                    <ui:include src="#{tab.tabfilename}"></ui:include>
                                </h:panelGroup>
                            </c:forEach>

                        </h:panelGroup>
                    </h:form>

                </div>

            </div>
        </div>
    </h:body>
</html>

标签页:

<?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"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>

    </h:head>
    <h:body>
        <ui:composition>
            <h:panelGroup>
                <h:form id="zones" >
                    <p:growl id="growl" showDetail="true" sticky="true" />
                    <!-- The sortable data table -->
                    <h:dataTable onmouseover="addOnclickToTabsDatatableRows();" id="dataTable" headerClass="columnHeader" value="#{DCProfileTabZonesController.dataList}" binding="#{zones}" var="item">
                        <!-- Check box -->
                        <h:column>
                            <f:facet name="header">
                                <h:selectBooleanCheckbox style="margin-left: 0px;" value="#{DCProfileTabZonesController.mainSelectAll}" class="checkall" >
                                    <f:ajax listener="#{DCProfileTabZonesController.selectAll}" render="@form" />
                                </h:selectBooleanCheckbox>
                            </f:facet>
                            <h:selectBooleanCheckbox  onclick="highlight(this)" value="#{DCProfileTabZonesController.selectedIds[item.datacenterid]}" >
                                <!-- if the user deselects one row deselect the main checkbox -->
                                <f:ajax listener="#{DCProfileTabZonesController.deselectMain}" render="@form" />
                            </h:selectBooleanCheckbox>
                            <!-- Click on table code -->
                            <h:outputLink id="lnkHidden" value="ZoneProfile.jsf" style="text-decoration:none; color:white; background-color:black">
                                <f:param name="id" value="#{item.datacenterid}" />
                            </h:outputLink>
                        </h:column>
                        ............

                    </h:dataTable>

                    <!-- The paging buttons -->
                    <h:commandButton styleClass="bimage" value="first" action="#{DCProfileTabZonesController.pageFirst}"
                                     disabled="#{DCProfileTabZonesController.firstRow == 0}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;

                    <h:commandButton styleClass="bimage" value="prev" action="#{DCProfileTabZonesController.pagePrevious}"
                                     disabled="#{DCProfileTabZonesController.firstRow == 0}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;

                    <h:commandButton styleClass="bimage" value="next" action="#{DCProfileTabZonesController.pageNext}"
                                     disabled="#{DCProfileTabZonesController.firstRow + DCProfileTabZonesController.rowsPerPage >= DCProfileTabZonesController.totalRows}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;

                    <h:commandButton styleClass="bimage" value="last" action="#{DCProfileTabZonesController.pageLast}"
                                     disabled="#{DCProfileTabZonesController.firstRow + DCProfileTabZonesController.rowsPerPage >= DCProfileTabZonesController.totalRows}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;

                    <h:outputText value="Page #{DCProfileTabZonesController.currentPage} / #{DCProfileTabZonesController.totalPages}" />
                    <br />

                    <!-- The paging links -->
                    <ui:repeat value="#{DCProfileTabZonesController.pages}" var="page">
                        <h:commandLink value="#{page}" actionListener="#{DCProfileTabZonesController.page}"
                                       rendered="#{page != DCProfileTabZonesController.currentPage}" style="text-decoration:none;color:white;">
                            <f:ajax render="@form" execute="@form"></f:ajax>
                        </h:commandLink>
                        <h:outputText value="#{page}" escape="false"
                                      rendered="#{page == DCProfileTabZonesController.currentPage}" style="text-decoration:none;color:gray;"/>
                    </ui:repeat>
                    <br />

                    <!-- Set rows per page -->
                    <h:outputLabel for="rowsPerPage" value="Rows per page" />
                    <h:inputText id="rowsPerPage" value="#{DCProfileTabZonesController.rowsPerPage}" size="3" maxlength="3" />
                    <h:commandButton styleClass="bimage" value="Set" action="#{DCProfileTabZonesController.pageFirst}" >
                        <f:ajax render="@form" execute="@form"></f:ajax>
                    </h:commandButton>&nbsp;
                    <h:message for="rowsPerPage" errorStyle="color: red;" />

                    <!-- hidden button -->
                    <h:commandButton id="deleterow" value="HiddenDelete" action="#{DCProfileTabZonesController.deleteSelectedIDs}" style="display:none">
                        <f:ajax render="@form"></f:ajax>
                    </h:commandButton>

                    <!-- the delete button -->
                    <h:button styleClass="bimage" value="Delete" onclick="deletedialog(this, 'Do you want to delete the selected rows?'); return false;" />&nbsp;

                    <!-- New Zone -->
                    <h:button id="newzone" styleClass="lbimage" value="New Zone" outcome="/NewZone.xhtml"/>

                    <script type="text/javascript" src="resources/js/tabs.js"></script>
                </h:form>
            </h:panelGroup>
        </ui:composition>
    </h:body>
</html>

当我删除ui:composition标记并将所有代码插入一页时,按钮将起作用.

When I remove the ui:composition tag and I insert all the code into one page the buttons are working.

推荐答案

正如您在评论之一中指出的那样,您不能使用嵌套表单.您需要重组布局.将您的外部形状放在<ul>:

As you pointed out in one of your comments, you cannot use nested forms. You need to restructure your layout. Place your outer form around your <ul>:

<h:panelGroup id="tabs" layout="block">
     <h:form prependId="false">
          <ul>
          ...
          </ul>
     </h:form>

     <c:forEach items="#{DatacenterProfileController.tabs}" var="tab">
          ...
     </c:forEach>
 </h:panelGroup>

其余的代码应该没问题.通过这种方式,您可以避免嵌套表格.

The rest of you code should be OK. By this way you avoid nested forms.

这篇关于JSF页面中的选项卡不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-15 21:37