ajax JSF 2 在 Form 之外和 Facelet 之外更新组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12136256/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSF 2 Update Component Outside of Form and Outside of Facelet
提问by Bill Rosmus
I have a form in the <ui:insert name="content" /> When I save the data with a p:commandButton I can update the form and things within the <ui:insert name="content" />. But I am having trouble figuring out how to update components in the <ui:include src="/sections/menus/topMenu.xhtml"/>
我在 <ui:insert name="content" /> 中有一个表单当我用 ap:commandButton 保存数据时，我可以更新 <ui:insert name="content" /> 中的表单和内容。但我无法弄清楚如何更新 <ui:include src="/sections/menus/topMenu.xhtml"/> 中的组件
Inside the topmenu I have a subview for a panel with links that get rendered depending on whether a person is logged in or not. when they are logged in I show their username. If I update the user name in the content part of the template, I want to update the ui so that the name in the menu also updates without a page refresh. But that is a fallback I can use too. Refresh the page after update. But would rather not. I'll post more code if you want but trying to keep it to a minimum to start.
在顶部菜单中，我有一个面板的子视图，其中包含根据用户是否登录而呈现的链接。当他们登录时，我会显示他们的用户名。如果我更新模板内容部分中的用户名，我想更新 ui，以便菜单中的名称也更新而不刷新页面。但这是我也可以使用的后备。更新后刷新页面。但宁可不要。如果您愿意，我会发布更多代码，但会尽量将其保持在最低限度。
<h:body>
<div id="wrap">
<div title="Container">
<ui:include src="/sections/base/header.xhtml"/>
</div><!-- End of Banner -->
<div id="baseTemplateTopMenu" title="Menu">
<ui:include src="/sections/menus/topMenu.xhtml"/>
</div><!-- End of Menu -->
<div id="sbt_contentbody">
<div title="Left Column">
<ui:include src="/sections/base/leftsidebar.xhtml"/>
</div> <!-- End of Left Column -->
<div title="Content Column">
<ui:insert name="content" />
</div><!-- End of Centre Column -->
<div title="Right Column">
<ui:include src="/sections/base/rightsidebar.xhtml"/>
</div><!-- End of Right Column -->
</div>
<div id="footer" title="Footer" class ="container">
<ui:include src="/sections/base/footer.xhtml"/>
</div><!-- End of Footer -->
</div><!-- End of Container -->
</h:body>
Below is the p:commandButton that saves the user info
下面是保存用户信息的 p:commandButton
<p:commandButton id="id_SubmitUserInfoPrefs"
value="Update"
action="#{userPreferences.updateUserInfo()}" styleClass="bottom_margin_2em top_margin_2em">
<f:ajax execute="@form" render="@form :topMenuLoginView:topMenuLoginForm" />
<!-- tried adding 'update=":"topMenuLoginView:topMenuLoginForm"' as well. -->
Below is in the menu part of the template.
下面是模板的菜单部分。
<f:subview id="topMenuLoginView">
<h:form id="topMenuLoginForm" prependId="false">
<ul>
<h:panelGroup id="loginPanel" rendered="#{!user.loggedIn}">
<li><h:outputLink value="javascript:void(0)" onclick="topMenuLoginDialog.show()"
title="login" styleClass="loginpanelclass">Log In</h:outputLink></li>
<li><h:link value="Register" outcome="/registration/register.xhtml" /></li>
</h:panelGroup>
<h:panelGroup id="logoutPanel" rendered="#{user.loggedIn}">
<li><h:link value="#{user.nickname}" outcome="#{navigationprops.userprefs}" /> </li>
<li><p:commandLink action="#{webAuthenticationBean.logout}"
update=":topMenuLoginView:topMenuLoginForm">
Logout
</p:commandLink>
</li>
</h:panelGroup>
</ul>
</h:form>
</f:subview>
回答by siebz0r
The general idea of referring to an element by ID is as following:
通过 ID 引用元素的一般思想如下：
Lets say we've got an element <p:commandButton>.
假设我们有一个 element <p:commandButton>。
When the element is given no id JSF generates one:
当元素没有指定 id 时，JSF 会生成一个：
<button name="j_idt191" id="j_idt191" ....
If an element is nested in a container element like a form, JSF prefixes the ID with the ID of the form:
如果一个元素嵌套在一个容器元素中，比如表单，JSF 会在 ID 前面加上表单的 ID：
JSF:
JSF：
<h:form>
<p:commandButton/>
</h:form>
HTML:
HTML：
<form id="j_idt48">
<button name="j_idt48:j_idt191" id="j_idt48:j_idt191" ....
</form>
When there is an element in another container you need to reference from the root element. This can be done using a ":" in front of the ID. Here is an example:
当另一个容器中有一个元素时，您需要从根元素引用。这可以通过在 ID 前面使用“ :”来完成。下面是一个例子：
<p:commandButton id="button1" update=":form:button2" ...
<h:form id="form">
<p:commandButton id="button2" update=":button1" ...
</h:form>
If you're not sure what ID JSF has assigned to your element, use something like FireBug to inspect the element and discover it's ID.
如果您不确定 JSF 为您的元素分配了什么 ID，请使用 FireBug 之类的工具检查元素并发现它的 ID。
As far as your code, I don't think <f:subview>is generating a container element, thus you need to reference topMenuLoginFormusing update=":topMenuLoginForm".
就您的代码而言，我认为不会<f:subview>生成容器元素，因此您需要topMenuLoginForm使用update=":topMenuLoginForm".
That being said, if you want to update an element using AJAX, use the update attribute. See my example above.
话虽如此，如果您想使用 AJAX 更新元素，请使用 update 属性。看我上面的例子。
回答by Khalifa Abd El Aziz
to Update Component Outside of Form
在表单外更新组件
<p:gmap center="36.890257,30.707417" zoom="13" type="ROADMAP"
style="width:600px;height:400px"
model="#{mapBean.simpleModel}"
onPointClick="handlePointClick(event);"
widgetVar="cliMap" fitBounds="true"
id="map">
<p:ajax event="overlaySelect" listener="#{mapBean.onMarkerSelect}" />
</p:gmap>
<p:dialog widgetVar="dlg" showEffect="fade">
<h:form prependId="false" id="formnew">
<h:panelGrid columns="2">
<f:facet name="header">
<p:outputLabel value="New Point"/>
</f:facet>
<h:outputLabel for="title" value="Title:" />
<p:inputText id="title" value="#{mapBean.title}" />
<f:facet name="footer">
<p:commandButton value="Add" actionListener="#{mapBean.newPoint()}" update=":map" oncomplete="markerAddComplete()" />
<p:commandButton value="Cancel" onclick="return cancel()" />
</f:facet>
</h:panelGrid>
<h:inputHidden id="Nlat" value="#{mapBean.lat}" />
<h:inputHidden id="Nlng" value="#{mapBean.lng}" />
</h:form>
</p:dialog>
i used update=":map" to update the google map out of the form Using Primefaces
我使用 update=":map" 从使用 Primefaces 的形式更新谷歌地图
