Question

我有以下带有primefaces菜单的JSF 2模板页面，我想部分更新页面的中心位置，从左侧菜单点击链接，我不想更新整个页面。我已经通过帖子了在stackoverflow中，他们认为我应该在central_body_div中有一个表单名称，但是我不想在central_body_div中对表单进行sepcify，因为动态加载的页面将具有带有自己名称的表单，我应该能够提交页面中的表单在central_body_div div中动态显示。

首先，布局页面本身没有加载，给出了以下异常。

找不到标题为“central_body_div”的组件，引自“leftMenuFormId：menuItem1”。

专家可以为这个问题提供解决方案。会很感激你的回复。

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">

        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <h:outputStylesheet name="cssLayout.css" library="css" />
            <h:outputStylesheet name="default.css" library="css" />        
            <title> Lightweight Mediation - Secure Pages </title>
        </h:head>

        <h:body id="securebody">

            <div id="top">
                <ui:insert name="top">
                    <ui:include src="/secure/home/header.xhtml" />
                </ui:insert>
            </div>
            <div id="content_holder">
                <div id="left">
                    <ui:insert name="left">
                        <ui:include src="/secure/home/leftMenu.xhtml" />
                    </ui:insert>
                </div>
                <div id="central_body_div" class="left_content">
                    <ui:insert name="content">Content</ui:insert>
                </div>
            </div>
            <div id="bottom">
                <ui:insert name="bottom">
                    <ui:include src="/secure/home/footer.xhtml" />
                </ui:insert>
            </div>

        </h:body>
    </f:view>
</html>

我的leftMenu.xhtml内容低于

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition id="leftMenuCompositionId"> 
            <h:form id="leftMenuFormId">
                <p:menu id="lMenuId">
                    <p:menuitem id="menuItem1" value="page1" action="page1" update="central_body_div" partialSubmit="true"/>
                    <p:menuitem id="menuItem2" value="page2"  action="page2" update="central_body_div" partialSubmit="true" />
                </p:menu>
            </h:form>
        </ui:composition>
    </h:body>
</html>

Answer 1

使用以下内容更改您的代码，然后重试

leftMenu.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
 <html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.org/ui"
  xmlns:f="http://java.sun.com/jsf/core">

<h:head>
    <title>Facelet Title</title>
</h:head>
<h:body>
    <ui:composition id="leftMenuCompositionId"> 
        <h:form id="leftMenuFormId">
            <p:menu id="lMenuId">
                <p:menuitem id="menuItem1" value="page1" action="page1" update=":form1:central_body_div" partialSubmit="true"/>
                <p:menuitem id="menuItem2" value="page2"  action="page2" update=":form1:central_body_div" partialSubmit="true" />
            </p:menu>
        </h:form>
    </ui:composition>
</h:body>

和您的模板xhtml with，

<?xml version='1.0' encoding='UTF-8' ?> 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core">

<f:view contentType="text/html">

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <h:outputStylesheet name="cssLayout.css" library="css" />
        <h:outputStylesheet name="default.css" library="css" />        
        <title> Lightweight Mediation - Secure Pages </title>
    </h:head>

    <h:body id="securebody">

        <div id="top">

        </div>
        <div id="content_holder">
            <div id="left">
                <ui:insert name="left">
                    <ui:include src="leftMenu.xhtml" />                        
                </ui:insert>
            </div>
            <h:form id="form1" >
                <h:panelGroup id="central_body_div">
                    <script type="text/javascript">alert('Content Updated')</script>
                    <ui:insert name="content">Content</ui:insert>
                </h:panelGroup>
            </h:form>
        </div>
        <div id="bottom">

        </div>

    </h:body>
</f:view>

已经检查并正常工作。

Answer 2

警告！ 提前查看构建时间与视图渲染时间问题！

这里常见的错误是执行导航，或者正如您所说，使用<ui:insert> / <ui:define>刷新中央持有者，这是一个视图构建标记，而不是视图呈现UI组件。因此，只需就不会在AJAX 请求中重新计算，因为您的组件树将从视图状态恢复，并且不会重新构建。

所以，只是不要犯这样的错误，通过制作AJAX导航，它在很多方面有缺陷（搜索引擎优化，非书签性，非用户友好性等），并通过为此设计的组件执行导航，如{ {1}}或<h:link>生成普通的获取<p:menuItem>。

根据您的评论，您无法完全区分导航链接和命令链接。前者仅用于执行导航并生成可收藏的a元素，而后者用于（部分）提交表单，执行业务工作，以及（部分）更新视图或执行导航。

您需要做的只是区分这些情况。对于导航，使用a / <h:link>，对于 POST操作，请改用<p:menuitem outcome="/your-view-id"> / <p:commandButton>。

在这种情况下，模板结构与无关，只要您不希望在AJAX请求上刷新标记处理程序。

Answer 3

我已经从本文的讨论中找到了我从其他帖子中获得的解决方案。我们所包含的页面可以有不同的表单名称。

的template.xhtml

<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">

        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
            <h:outputStylesheet name="cssLayout.css" library="css" />
            <h:outputStylesheet name="default.css" library="css" />        
            <title> Lightweight Mediation - Secure Pages </title>
        </h:head>

        <h:body id="securebody">

            <div id="top">
                <ui:insert name="top">
                    <ui:include src="header.xhtml" />
                </ui:insert>
            </div>

            <div id="content_holder">        
                <div id="left">
                    <ui:insert name="left">
                        <ui:include src="leftMenu.xhtml" />                        
                    </ui:insert>
                </div>
                <div id="center" class="left_content">
                    <h:panelGroup id="central_body_div">
                        <ui:include src="#{templateBean.page}.xhtml" />
                    </h:panelGroup>
                </div>       
            </div>

            <div id="bottom">
                <ui:insert name="bottom">
                    <ui:include src="footer.xhtml" />
                </ui:insert>
            </div>

        </h:body>
    </f:view>
</html>

leftMenu.xhtml

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition id="leftMenuCompositionId">    

            <h:form id="leftMenuFormId">
                <f:ajax render=":central_body_div">
                    <h:commandLink value="page1" action="#{templateBean.setPage('page1')}" /><br></br>
                    <h:commandLink value="page2" action="#{templateBean.setPage('page2')}" />
                </f:ajax>
            </h:form>

        </ui:composition>
    </h:body>
</html>

第1页

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition>              
            <h1>Page One</h1>
        </ui:composition>
    </h:body>
</html>

第2页

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      >
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <ui:composition >  
            <h:form id="form1" >
                <h1>Page Two</h1>
            </h:form>
        </ui:composition>
    </h:body>
</html>



package ae.co.gui.beans;

import javax.inject.Named;
import javax.enterprise.context.SessionScoped;
import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.event.ActionEvent;

@Named(value = "templateBean")
@SessionScoped
public class TemplateBean implements Serializable {

    private String page;

    public TemplateBean() {
    }

    @PostConstruct
    public void init() {
        this.page = "page1"; // Ensure that default is been set.
    }

    public String getPage() {
        return page;
    }

    public void setPage(String page) {
        this.page = page;
    }

}

Answer 4

晚会......当前为客户修复申请并面对此问题。不喜欢添加表单的想法。他们使用primefaces，不确定这只是他们唯一的<p:commandButton ... update="@(:central_body_div)"/> 修复了我的问题。

JSF 2模板部分更新

4 个答案: