[英]JSF 2 Update Component Outside of Form and Outside of Facelet
我在<ui:insert name =“content”/>中有一個表單當我使用ap:commandButton保存數據時,我可以更新<ui:insert name =“content”/>中的表單和內容。 但我無法弄清楚如何更新<ui:include src =“/ sections / menus / topMenu.xhtml”/>中的組件
在topmenu中我有一個面板的子視圖,其中的鏈接根據一個人是否登錄而呈現。 當他們登錄時,我會顯示他們的用戶名。 如果我更新模板內容部分中的用戶名,我想更新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>
下面是保存用戶信息的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. -->
下面是模板的菜單部分。
<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>
通過ID引用元素的一般想法如下:
讓我們說我們有一個元素<p:commandButton>
。
當給出元素時,沒有id JSF生成一個:
<button name="j_idt191" id="j_idt191" ....
如果元素嵌套在像表單這樣的容器元素中,JSF會在ID前面加上表單的ID:
JSF:
<h:form>
<p:commandButton/>
</h:form>
HTML:
<form id="j_idt48">
<button name="j_idt48:j_idt191" id="j_idt48:j_idt191" ....
</form>
當另一個容器中有一個元素時,您需要從根元素引用。 這可以使用ID前面的“ : ”來完成。 這是一個例子:
<p:commandButton id="button1" update=":form:button2" ...
<h:form id="form">
<p:commandButton id="button2" update=":button1" ...
</h:form>
如果您不確定ID JSF為您的元素分配了什么,請使用類似FireBug的內容來檢查元素並發現它的ID。
至於你的代碼,我不認為<f:subview>
正在生成一個容器元素,因此你需要使用update=":topMenuLoginForm"
來引用topMenuLoginForm
。
話雖這么說,如果你想使用AJAX更新元素,請使用update屬性。 見上面的例子。
更新表單之外的組件
<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>
我使用update =“:map”從表格中更新谷歌地圖使用Primefaces
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.