Thành phần cập nhật JSF 2 Bên ngoài biểu mẫu và bên ngoài Facelet

Question

Tôi có biểu mẫu trong < ui: chèn tên = "nội dung"/> Khi tôi lưu dữ liệu bằng ap: commandButton Tôi có thể cập nhật biểu mẫu và mọi thứ trong < ui: chèn tên = "nội dung"/>. Nhưng tôi gặp khó khăn trong việc tìm hiểu cách cập nhật các thành phần trong số < ui: bao gồm src = "/ sections/menus/topMenu.xhtml"/>

Bên trong trình đơn đầu tiên Tôi có một subview cho một bảng điều khiển với các liên kết được hiển thị tùy thuộc vào việc một người có đăng nhập hay không. khi họ đăng nhập, tôi hiển thị tên người dùng của họ. Nếu tôi cập nhật tên người dùng trong phần nội dung của mẫu, tôi muốn cập nhật ui sao cho tên trong menu cũng cập nhật mà không cần làm mới trang. Nhưng đó là một dự phòng tôi cũng có thể sử dụng. Làm mới trang sau khi cập nhật. Nhưng không muốn. Tôi sẽ đăng thêm mã nếu bạn muốn nhưng cố gắng giữ nó ở mức tối thiểu để bắt đầu.

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

Dưới đây là p: CommandButton rằng tiết kiệm thông tin người dùng

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

Dưới đây là ở phần menu của mẫu.

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

Answer 1

Ý tưởng chung đề cập đến một phần tử bằng ID là như sau:

phép nói rằng chúng tôi đã có một yếu tố <p:commandButton>.

Khi nguyên tố này được đưa ra không có id JSF tạo ra một:

<button name="j_idt191" id="j_idt191" .... 

Nếu một phần tử được lồng trong một yếu tố container như một hình thức, JSF tiền tố ID với ID có dạng:

JSF:

<h:form> 
    <p:commandButton/> 
</h:form> 

HTML:

<form id="j_idt48"> 
    <button name="j_idt48:j_idt191" id="j_idt48:j_idt191" .... 
</form> 

Khi có một phần tử trong vùng chứa khác, bạn cần tham chiếu từ phần tử gốc. Điều này có thể được thực hiện bằng cách sử dụng ":" ở phía trước ID. Dưới đây là ví dụ:

<p:commandButton id="button1" update=":form:button2" ... 

<h:form id="form"> 
    <p:commandButton id="button2" update=":button1" ... 
</h:form> 

Nếu bạn không chắc chắn ID JSF nào đã gán cho phần tử của bạn, hãy sử dụng một cái gì đó như FireBug để kiểm tra phần tử và khám phá ID của nó.

Theo như mã của bạn, tôi không nghĩ rằng <f:subview> đang tạo yếu tố vùng chứa, do đó bạn cần tham chiếu topMenuLoginForm sử dụng update=":topMenuLoginForm".

---

Điều đó đang được nói, nếu bạn muốn cập nhật phần tử bằng AJAX, hãy sử dụng thuộc tính cập nhật. Xem ví dụ của tôi ở trên.

Answer 2

để cập nhật phần bên ngoài của Mẫu

<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 sử dụng cập nhật = ": bản đồ" để cập nhật các bản đồ google ra khỏi hình thức Sử dụng Primefaces