JSF 2模板部分更新

我有以下JSF 2模板Page与primefaces菜单，我想要部分更新页面的中心位置，从左侧菜单点击链接，我不想更新整个页面。我已经在stackoverflow中抛出了帖子，他们建议我应该在central_body_div中有一个表单名称，但我不想在central_body_div中指定一个表单，因为动态加载的页面将具有具有自己名称的表单，我应该能够在页面中提交表单动态出现在central_body_divdiv。

首先，布局页面本身没有加载，导致下面的异常

无法找到标识符为"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>

用下面的代码修改代码，然后再试一次，

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，

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

警告!查看构建时间vs查看渲染时间问题!

这里常见的错误是执行导航，或者如您所说，用<ui:insert>/<ui:define>刷新中央holder，这是一个视图构建标记，而不是视图渲染UI组件。因此，在AJAX请求时，它不会被重新计算，因为您的组件树将从视图状态恢复，而不会重新构建。

所以，只是不要做那个错误，通过使AJAX导航，这是有缺陷的在许多方面(SEO，非书签，不友好的用户等)，并执行导航的组件设计，如<h:link>，或<p:menuItem>，生成普通得到a s。

根据你的评论，你没有完全区分导航链接和命令链接。前者仅用于执行导航并生成可书签的a元素，而后者用于(部分地)提交表单、执行业务作业和(部分地)更新视图或执行导航。

你需要做的就是简单地区分这些情况。对于导航使用<h:link>/<p:menuitem outcome="/your-view-id">，对于POST操作使用<p:commandButton>/<p:menuitem action(listener)="#{bean.action(listener)}"。

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

我已经把我从这篇文章的讨论和其他文章的参考中得到的解决方案。我们包含的页面可以有不同的表单名称。

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

迟到了…正在为客户端修复应用程序并面临此问题。不喜欢添加表单的想法。他们使用主面，不确定这是否是<p:commandButton ... update="@(:central_body_div)"/>独有的

相关内容

最新更新

热门标签：