Componente di aggiornamento JSF 2 al di fuori del modulo e all'esterno di Facelet

Question

Ho un modulo nel < ui: inserire nome = "contenuto"/> Quando salvi i dati con ap: comandoButton posso aggiornare il modulo e le cose all'interno del < ui: inserire nome = "contenuto"/>. Ma io sto avendo difficoltà a capire come aggiornare i componenti nel < ui: includere src = "/ sezioni/menu/topMenu.xhtml"/>

All'interno del topmenu ho una visualizzazione secondaria per un pannello con i link che vengono rese a seconda che una persona abbia effettuato l'accesso o meno. quando sono loggati, mostro il loro nome utente. Se aggiorno il nome utente nella parte del contenuto del modello, voglio aggiornare l'interfaccia utente in modo che anche il nome nel menu si aggiorni senza un aggiornamento della pagina. Ma questo è un ripiego che posso usare anche io. Aggiorna la pagina dopo l'aggiornamento. Ma preferirei di no. Pubblicherò altro codice se vuoi, ma cercherò di mantenerlo al minimo per iniziare.

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

riportano di seguito le p: commandButton che salva le informazioni dell'utente

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

Di seguito si riporta nella parte del menu del modello.

<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

L'idea generale di riferirsi a un elemento per ID è la seguente:

Diciamo che abbiamo un elemento <p:commandButton>.

Quando l'elemento viene data alcuna JSF id genera uno:

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

Se un elemento è annidato in un elemento contenitore come una forma, JSF prefissi l'ID con l'ID della forma:

JSF:

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

HTML:

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

Quando c'è un elemento in un altro contenitore è necessario fare riferimento dall'elemento principale. Questo può essere fatto usando ":" davanti all'ID. Ecco un esempio:

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

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

Se non siete sicuri di ciò ID JSF ha assegnato al vostro elemento, usare qualcosa come Firebug per ispezionare l'elemento e scoprire che è ID.

Per quanto riguarda il codice, non penso che <f:subview> stia generando un elemento contenitore, pertanto è necessario fare riferimento allo topMenuLoginForm utilizzando update=":topMenuLoginForm".

---

Detto questo, se si desidera aggiornare un elemento utilizzando AJAX, utilizzare l'attributo di aggiornamento. Vedi il mio esempio sopra.

Answer 2

di aggiornamento del componente di fuori della Forma

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

ho usato update = ": map" per aggiornare la mappa di google fuori forma Uso primefaces