ajax – JSF 2更新表单之外和Facelet之外的组件
我在< ui:insert name =“content”/>中有一个表单.
当我使用p: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属性.见上面的例子. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |