2012-08-27 23 views
5

Tengo un formulario en el < ui: insertar nombre = "contenido"/> Cuando guardo los datos con ap: commandButton puedo actualizar el formulario y las cosas dentro del < ui: insertar nombre = "contenido"/>. Pero estoy teniendo problemas para averiguar cómo actualizar componentes en el < ui: include src = "/ secciones/menús/topMenu.xhtml"/>Componente de actualización JSF 2 fuera del formulario y fuera de Facelet

Dentro del Menú superior Tengo una vista secundaria para un panel con los enlaces que consiguen rindió dependiendo de si una persona está conectada o no. cuando están conectados, muestro su nombre de usuario. Si actualizo el nombre de usuario en la parte de contenido de la plantilla, quiero actualizar la interfaz de usuario para que el nombre en el menú también se actualice sin actualizar la página. Pero esa es una alternativa que puedo usar también. Actualiza la página después de la actualización. Pero preferiría no hacerlo. Publicaré más código si lo desea, pero trato de mantenerlo al mínimo para comenzar.

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

a continuación es el t: commandButton que guarda la información del usuario

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

A continuación se muestra en la parte del menú de la plantilla.

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

¿qué hay de 'render =" forma @: topMenuLoginForm "' y simplemente elimine '' f: subview id = "topMenuLoginView"> 'desde esa página? – Daniel

+0

Lo intentaré un poco más tarde. Necesito ponerme en movimiento y acabo de elegir actualizar la página al finalizar. Voy a refactorizar más tarde esta semana. – BillR

Respuesta

8

La idea general de hacer referencia a un elemento por ID es la siguiente:

digamos que tenemos un elemento <p:commandButton>.

Cuando el elemento no se da JSF Identificación genera uno:

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

Si un elemento se anida en un elemento contenedor como una forma, JSF prefijos el ID con el ID de la 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> 

Cuando hay un elemento en otro contenedor, debe hacer referencia desde el elemento raíz. Esto se puede hacer usando un ":" al frente de la ID. Aquí está un ejemplo:

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

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

Si no está seguro de qué ID JSF ha asignado a su elemento, usar algo como Firebug para inspeccionar el elemento y descubrir su ID.

En cuanto a su código, no creo que <f:subview> esté generando un elemento contenedor, por lo tanto debe hacer referencia topMenuLoginForm usando update=":topMenuLoginForm".


Dicho esto, si desea actualizar un elemento utilizando AJAX, use el atributo de actualización. Ver mi ejemplo anterior.

+0

Probé la ruta de actualización también. Estoy bastante seguro de que intenté solo topmenuloginform también. Ya accedo a la herramienta topmenuloginform de una forma diferente (la utilizada para registrar realmente a alguien), pero esa forma se encuentra en el mismo archivo topmenu que la información superior. Le daré otra oportunidad porque quizás esté en mi cabeza que lo intenté por alguna razón. Sin embargo, más tarde en la semana, tuve que darle vueltas para hacer algunas cosas. Se refactorizará más adelante en la semana. Solo estoy refrescando la página al finalizar para que funcione por ahora. – BillR

3

a la actualización de componentes fuera de la 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> 

i utilizado update = ": mapa" para actualizar el mapa de Google a cabo de la forma Uso Primefaces

Cuestiones relacionadas