如何通过ajax使用jsf2模板进行部分页面渲染（中心内容）（来自菜单）

如何通过ajax使用jsf2模板进行部分页面渲染（中心内容）（来自菜单）

我能够通过JSF2 /
Ajax和richfaces4获得设计（我认为其他实现也是可以的），其中通过模板实现的左侧导航菜单项能够通过ajax渲染模板的中心内容，从而阻止整个页面刷新，并具有闪烁效果。

我的navigationmenu.xhtml代码看起来像这样

<ui:composition><h:form id="navigationFormId">        <rich:collapsiblePanel id="carrierCollapsibleId" header="links that update center content" switchType="client"> <h:commandlink  id="linkId1" action="/page1" value="Update Center Content with page1">     <a4j:ajax execute="@form" render=":centerContentDiv,:centerForm" />          </h:commandlink> <br /> <h:commandlink  id="linkId2" action="/page2" value="Update Center Content with page2">     <a4j:ajax execute="@form" render=":centerContentDiv,:centerForm" />          </h:commandlink></rich:collapsiblePanel>...</h:form>

我相信标记的

render=":centerContentDiv,:centerForm"

属性

a4j:ajax

可以更改为仅

render=":centerForm"

但尚未测试。我知道两者可以一起工作。另外，我尝试在ID之间使用空白的JSF2
ajax标记并得到了错误，所以我去了richfaces 4.x的a4j，如果不使用空格，可以使用逗号。

现在，为了使其正常工作，每个pageX.xhtml文件（例如page1.xhtml）都需要具有

<h:formid="centerForm">

，这是page1.xhtml的示例

<ui:composition template="/templates/uiTemplate.xhtml">        <ui:define name="center_content"><h:form id="centerForm">    <!-- put your components in here --> </h:form>        </ui:define>    </ui:composition>

一个限制是使用模板的每个视图必须定义一个

<h:form id=centerForm" ...>

否则，JSF2会抱怨它找不到渲染目标。

我的uiTemplate.xhtml文件具有用于页眉，页脚的代码，但是定义了导航和中心内容的相关部分如下

<div >        <div id="left"> <ui:include src="navigationMenu.xhtml" />        </div>        <div id="center_content"><!-- think this panelGroup wrapper can be --><!-- removed. need to test that though --> <h:panelGroup id="centerContentDiv" layout="block">     <ui:insert name="center_content" /> </h:panelGroup>        </div>    </div>