0

My question is similar like this one How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?, I have a main Page which has a panelMenu with menuitems, when I click in some menuitems, it refresh the middle part of my page called "centro" is like a template if I click in the "left content", only I want to refresh the "content".

I download a template but I wasn't in jsf so I create "layaout" inside that CSS template, but I have a form here that evaluates a case to redirect another page and show it in the middle of id "centro"

I have a problem in my middle page, which has other's forms. I read nest forms is not a valid concept but I need to redirect my page only in the middle, but when I run the project.

My button doesn't invoke my methods, but if I only run my middle page its works fine.

The nest forms are main which and the forms of my middle page, any help?

this is my main page

<h:form id="main" onsubmit="#{beanSec.setPer()}">
  <p:layout style="height: 500px;" id="layout">
    <p:layoutUnit position="west" resizable="false" size="188">
      <p:menu style="width: 175px; border:0px ;background: #660000 ;">

        <!-- puse width para el efecto cuando pasa el mouse no altere a los demas solo a este y paddin para alinearlo a mi gusto -->
        <p:menuitem value="Interesados" update="centro"
        ajax="false"
        style="font-size:17px; padding-left: 32px; width: 80%"
        action="#{navBean.setPaginaSecretaria('interesados')}" />
      </p:menu>
      <p:panelMenu style="width:180px;">
        <p:submenu label="Acad&#233;mico">
          <p:menuitem value="Matr&#237;cula"
          style="color: black; font-weight: bold" update="centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('matricula')}" />
          <p:menuitem value="Alumnos"
          style="color:black ; font-weight: bold;" update="centro"
          ajax="false" async="true"
          action="#{navBean.setPaginaSecretaria('alumno')}" />
          <p:menuitem value="Programaci&#243;n"
          style="color: black ; font-weight: bold" update="centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('programacion')}" />
          <p:menuitem value="Cursos"
          style="color:black ; font-weight: bold;" update="centro"
          ajax="false" url="ListarCursos.xhtml" />
          <!--action="{navBean.setPaginaSecretaria('cursos')}"-->
          <p:menuitem value="Docentes"
          style="color:black ; font-weight: bold;" update="centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('docente')}" />
          <p:menuitem value="Laboratorios"
          style="color:black ; font-weight: bold ;" update="centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('laboratorio')}" />
        </p:submenu>
      </p:panelMenu>
      <p:panelMenu style="width:180px;">
        <p:submenu label="Recaudaci&#243;n">
          <p:menuitem value="Cuentas Bancarias"
          style="color:black ; font-weight: bold" update="centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('cuentas')}" />
          <p:menuitem value="Pagos"
          style="color:black; font-weight: bold;" update="centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('pagos')}" />
        </p:submenu>
      </p:panelMenu>
      <p:panelMenu style="width:180px;">
        <p:submenu label="Acreditaciones">
          <p:menuitem value="Convenios"
          style="color:black ; font-weight: bold" update="centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('convenios')}" />
          <p:menuitem value="Certificaciones"
          style="color:black; font-weight: bold;" update="centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('certificaciones')}" />
        </p:submenu>
      </p:panelMenu>
      <p:panelMenu style="width:180px;">
        <p:submenu label="Eventos y noticias">
          <p:menuitem value="Eventos"
          style="color: black ; font-weight: bold" update="centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('eventos')}" />
          <p:menuitem value="Noticias"
          style="color: black ; font-weight: bold" update="centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('noticias')}" />
        </p:submenu>
      </p:panelMenu>
      <!-- puse width para el efecto cuando pasa el mouse no altere a los demas solo a este y paddin para alinearlo a mi gusto -->
      <p:menu style="width: 175px; border:0px ;background:#660000;">

        <p:menuitem value="Datos Personales" update="centro"
        style="font-size:17px; padding-left: 32px; width: 80%;"
        ajax="false"
        action="#{navBean.setPaginaSecretaria('datos')}" />
      </p:menu>
    </p:layoutUnit>
    <p:layoutUnit position="center" id="centro"
    style="padding-left: 20px">
      <c:if test="#{navBean.paginaSecretaria eq 'interesados'}">
        <ui:include src="ListarInteresados.xhtml" />
      </c:if>
      <c:if test="#{navBean.paginaSecretaria eq 'matricula'}">
        <ui:include src="Matricula.xhtml" />
      </c:if>
      <c:if test="#{navBean.paginaSecretaria eq 'alumno'}">
        <ui:include src="ListarAlumnos.xhtml" />
      </c:if>
      <c:if test="#{navBean.paginaSecretaria eq 'programacion'}">
        <ui:include src="ListarProgramacion.xhtml" />
      </c:if>
      <c:if test="#{navBean.paginaSecretaria eq 'cursos'}">
        <ui:include src="ListarCursos.xhtml" />
      </c:if>
      <c:if test="#{navBean.paginaSecretaria eq 'docente'}">
        <ui:include src="ListarDocentes.xhtml" />
      </c:if>
      <c:if test="#{navBean.paginaSecretaria eq 'laboratorio'}">
        <ui:include src="ListarLaboratorios.xhtml" />
      </c:if>
      <c:if test="#{navBean.paginaSecretaria eq 'cuentas'}">
        <ui:include src="CuentasBancarias.xhtml" />
      </c:if>
      <c:if test="#{navBean.paginaSecretaria eq 'pagos'}">
        <ui:include src="Pagos.xhtml" />
      </c:if>
      <c:if test="#{navBean.paginaSecretaria eq 'convenios'}">
        <ui:include src="ListarConvenios.xhtml" />
      </c:if>
      <c:if test="#{navBean.paginaSecretaria eq 'certificaciones'}">

        <ui:include src="ListarCertificaciones.xhtml" />
      </c:if>
      <c:if test="#{navBean.paginaSecretaria eq 'eventos'}">
        <ui:include src="ListarEventos.xhtml" />
      </c:if>
      <c:if test="#{navBean.paginaSecretaria eq 'noticias'}">
        <ui:include src="ListarNoticias.xhtml" />
      </c:if>
      <c:if test="#{navBean.paginaSecretaria eq 'datos'}">
        <ui:include src="DatosPersonalesSecretaria.xhtml" />
      </c:if>
    </p:layoutUnit>
  </p:layout>
</h:form>

this is my middle page

<h:form>
  <p:dataTable id="dt1" value="#{DAOCurso.listarTodosCursos()}"
  var="datos">
    <f:facet name="header">Listado de Cursos</f:facet>
    <p:column filterBy="#{datos.nombre}"
    filterMatchMode="contains">
      <f:facet name="header">
        <h:outputLabel value="Curso" />
      </f:facet>
      <h:outputText value="#{datos.nombre}" style="color: black">
      </h:outputText>
    </p:column>
    <p:column filterBy="#{datos.siglas}"
    filterMatchMode="contains">
      <f:facet name="header">
        <h:outputLabel value="Siglas" />
      </f:facet>
      <h:outputText value="#{datos.siglas}" style="color: black">
      </h:outputText>
    </p:column>
    <p:column filterBy="#{datos.certificacion.nombre}"
    filterMatchMode="contains">
      <f:facet name="header">
        <h:outputLabel value="Certificaci&#243;n" />
      </f:facet>
      <h:outputText value="#{datos.certificacion.nombre}"
      style="color: black"></h:outputText>
    </p:column>
    <p:column>
      <f:facet name="header">
        <h:outputLabel value="Modificar" />
      </f:facet>
      <p:commandLink value="Modificar" oncomplete="dlg2.show();"
      update=":main:modalDialog2" style="color: black"
      action="#{beanCurso.traerDatos()}">
        <f:setPropertyActionListener target="#{beanCurso.codigo}"
        value="#{datos.codigo}" />
      </p:commandLink>
    </p:column>
  </p:dataTable>
</h:form>
<p:dialog id="modalDialog2" header="Modificar Datos Personales"
widgetVar="dlg2" dynamic="true">
  <h:form id="form2">
    <table>
      <tr>
        <td>
          <h:outputLabel value="Nombre Curso" />
          <p:inputText id="nombre" value="#{beanCurso.nombre}" />
        </td>
      </tr>
      <tr>
        <td>
          <h:outputLabel value="Siglas" />
          <p:inputText value="#{beanCurso.siglas}" />
        </td>
      </tr>
      <tr>
        <td>
          <h:outputLabel value="Certificaci&#243;n" />
          <p:selectOneMenu id="cboCentro"
          value="#{beanCurso.certificacion.codigo}" required="true"
          requiredMessage="Debe seleccionar una certificacion">
            <f:selectItem itemLabel="Seleccione Certificacion"
            id="cert" />
            <f:selectItems value="#{DAOCert.listaCertificaciones()}"
            id="combocert" var="cert" itemValue="#{cert.codigo}"
            itemLabel="#{cert.nombre}" />
          </p:selectOneMenu>
        </td>
      </tr>
      <tr>
        <td>
          <p:selectBooleanCheckbox value="#{beanCurso.vigencia}" />
          <h:outputText value="Vigencia"
          style="font-weight:bold" />
        </td>
      </tr>
      <tr>
        <td>
          <p:commandButton value="Modificar"
          action="#{DAOCurso.modificarCurso()}" ajax="false" />
        </td>
      </tr>
    </table>
  </h:form>
</p:dialog>
<p />
<h:form>
  <p:commandButton value="Agregar" oncomplete="dlg.show();" />
  <p:dialog header="Datos Personales" widgetVar="dlg"
  resizable="false" id="dialogo" dynamic="true">
    <table>
      <tr>
        <td>
          <h:outputLabel value="Nombre Curso" />
          <p:inputText id="nombre" value="#{beanCurso.nombre}" />
        </td>
      </tr>
      <tr>
        <td>
          <h:outputLabel value="Siglas" />
          <p:inputText value="#{beanCurso.siglas}" />
        </td>
      </tr>
      <tr>
        <td>
          <h:outputLabel value="Certificaci&#243;n" />
          <p:selectOneMenu value="#{beanCurso.codCert}"
          required="true"
          requiredMessage="Debe seleccionar una certificacion">
            <f:selectItem itemLabel="Seleccione Certificacion"
            id="cert" itemValue="" />
            <f:selectItems value="#{DAOCert.listaCertificaciones()}"
            id="combocert" var="cert" itemValue="#{cert.codigo}"
            itemLabel="#{cert.nombre}" />
          </p:selectOneMenu>
        </td>
      </tr>
      <tr>
        <td>
          <h:commandButton value="Registrar Curso"
          action="#{DAOCurso.insertarCurso()}" />
        </td>
      </tr>
    </table>
  </p:dialog>
</h:form>
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
MitoCode
  • 319
  • 2
  • 10
  • 25
  • Just make sure that form in middle page is not inside main page form. I would recommend you to move the `` outside the `` in main page. – Luiggi Mendoza Mar 21 '13 at 17:42
  • can you write the code please? i put outside but doesnt work, y put the "centro" outside de form – MitoCode Mar 21 '13 at 19:54

1 Answers1

1

As Luiggi said, you should split your main form into multiple forms:

<p:layout style="height: 500px;" id="layout">
  <p:layoutUnit position="west" resizable="false" size="188">
    <h:form id="main" onsubmit="#{beanSec.setPer()}">
      <p:menu style="width: 175px; border:0px ;background: #660000 ;">

        <!-- puse width para el efecto cuando pasa el mouse no altere a los demas solo a este y paddin para alinearlo a mi gusto -->
        <p:menuitem value="Interesados" update=":centro"
        ajax="false"
        style="font-size:17px; padding-left: 32px; width: 80%"
        action="#{navBean.setPaginaSecretaria('interesados')}" />
      </p:menu>
      <p:panelMenu style="width:180px;">
        <p:submenu label="Acad&#233;mico">
          <p:menuitem value="Matr&#237;cula"
          style="color: black; font-weight: bold" update=":centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('matricula')}" />
          <p:menuitem value="Alumnos"
          style="color:black ; font-weight: bold;" update=":centro"
          ajax="false" async="true"
          action="#{navBean.setPaginaSecretaria('alumno')}" />
          <p:menuitem value="Programaci&#243;n"
          style="color: black ; font-weight: bold" update=":centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('programacion')}" />
          <p:menuitem value="Cursos"
          style="color:black ; font-weight: bold;" update=":centro"
          ajax="false" url="ListarCursos.xhtml" />
          <!--action="{navBean.setPaginaSecretaria('cursos')}"-->
          <p:menuitem value="Docentes"
          style="color:black ; font-weight: bold;" update=":centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('docente')}" />
          <p:menuitem value="Laboratorios"
          style="color:black ; font-weight: bold ;"
          update=":centro" ajax="false"
          action="#{navBean.setPaginaSecretaria('laboratorio')}" />
        </p:submenu>
      </p:panelMenu>
      <p:panelMenu style="width:180px;">
        <p:submenu label="Recaudaci&#243;n">
          <p:menuitem value="Cuentas Bancarias"
          style="color:black ; font-weight: bold" update=":centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('cuentas')}" />
          <p:menuitem value="Pagos"
          style="color:black; font-weight: bold;" update=":centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('pagos')}" />
        </p:submenu>
      </p:panelMenu>
      <p:panelMenu style="width:180px;">
        <p:submenu label="Acreditaciones">
          <p:menuitem value="Convenios"
          style="color:black ; font-weight: bold" update=":centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('convenios')}" />
          <p:menuitem value="Certificaciones"
          style="color:black; font-weight: bold;" update=":centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('certificaciones')}" />
        </p:submenu>
      </p:panelMenu>
      <p:panelMenu style="width:180px;">
        <p:submenu label="Eventos y noticias">
          <p:menuitem value="Eventos"
          style="color: black ; font-weight: bold" update=":centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('eventos')}" />
          <p:menuitem value="Noticias"
          style="color: black ; font-weight: bold" update=":centro"
          ajax="false"
          action="#{navBean.setPaginaSecretaria('noticias')}" />
        </p:submenu>
      </p:panelMenu>
      <!-- puse width para el efecto cuando pasa el mouse no altere a los demas solo a este y paddin para alinearlo a mi gusto -->
      <p:menu style="width: 175px; border:0px ;background:#660000;">

        <p:menuitem value="Datos Personales" update=":centro"
        style="font-size:17px; padding-left: 32px; width: 80%;"
        ajax="false"
        action="#{navBean.setPaginaSecretaria('datos')}" />
      </p:menu>
    </h:form>
  </p:layoutUnit>
  <!-- Since you have a form inside each included xhtml file, you don't need following code to be inside the main form-->
  <p:layoutUnit position="center" id="centro"
  style="padding-left: 20px">
    <c:if test="#{navBean.paginaSecretaria eq 'interesados'}">
      <ui:include src="ListarInteresados.xhtml" />
    </c:if>
    <c:if test="#{navBean.paginaSecretaria eq 'matricula'}">
      <ui:include src="Matricula.xhtml" />
    </c:if>
    <c:if test="#{navBean.paginaSecretaria eq 'alumno'}">
      <ui:include src="ListarAlumnos.xhtml" />
    </c:if>
    <c:if test="#{navBean.paginaSecretaria eq 'programacion'}">
      <ui:include src="ListarProgramacion.xhtml" />
    </c:if>
    <c:if test="#{navBean.paginaSecretaria eq 'cursos'}">
      <ui:include src="ListarCursos.xhtml" />
    </c:if>
    <c:if test="#{navBean.paginaSecretaria eq 'docente'}">
      <ui:include src="ListarDocentes.xhtml" />
    </c:if>
    <c:if test="#{navBean.paginaSecretaria eq 'laboratorio'}">
      <ui:include src="ListarLaboratorios.xhtml" />
    </c:if>
    <c:if test="#{navBean.paginaSecretaria eq 'cuentas'}">
      <ui:include src="CuentasBancarias.xhtml" />
    </c:if>
    <c:if test="#{navBean.paginaSecretaria eq 'pagos'}">
      <ui:include src="Pagos.xhtml" />
    </c:if>
    <c:if test="#{navBean.paginaSecretaria eq 'convenios'}">
      <ui:include src="ListarConvenios.xhtml" />
    </c:if>
    <c:if test="#{navBean.paginaSecretaria eq 'certificaciones'}">
      <ui:include src="ListarCertificaciones.xhtml" />
    </c:if>
    <c:if test="#{navBean.paginaSecretaria eq 'eventos'}">
      <ui:include src="ListarEventos.xhtml" />
    </c:if>
    <c:if test="#{navBean.paginaSecretaria eq 'noticias'}">
      <ui:include src="ListarNoticias.xhtml" />
    </c:if>
    <c:if test="#{navBean.paginaSecretaria eq 'datos'}">
      <ui:include src="DatosPersonalesSecretaria.xhtml" />
    </c:if>
  </p:layoutUnit>
</p:layout>

Last remark, you should avoid using JSTL with JSF, try to use rendered attribute instead.

Udo Held
  • 12,314
  • 11
  • 67
  • 93
Laabidi Raissi
  • 3,263
  • 1
  • 22
  • 28
  • 1
    You will need to change `update="centro"` to `update=":centro"` on every ajax call in the ``. – Luiggi Mendoza Mar 21 '13 at 20:05
  • yes, you are right. I didn't pay attention to the details inside. Answer updated – Laabidi Raissi Mar 21 '13 at 20:08
  • i copy your code but now i have problem with my middle page, the update component :main:modalDialog2, thanks – MitoCode Mar 21 '13 at 20:25
  • Cannot find component with identifier ":main:modalDialog2" --- that is from my middle page. thanks – MitoCode Mar 21 '13 at 20:30
  • If you had used some update=":main:modalDialog2" inside one of your nested xhtml files, then, of course you will encounter this problem, since modalDialog2 is no longer inside the main form. So add prependId="false" to the from starting your middle page, and replace :main:modalDialog2 with :modalDialog2. Or give that form an id (xx for ex, without adding prependId="false") and replace :main:modalDialog2 with :xx:modalDialog2 – Laabidi Raissi Mar 21 '13 at 20:32
  • thanks you fix my problem, only i change in my middle page :main:modalDialo2 to :modalDialog2 and works!!!! thanks both of you, you help me a lot! =D – MitoCode Mar 21 '13 at 20:36
  • Yeah, I gotta admit you were right @LuiggiMendoza, I can see now the definition of a "good answer". Sorry for the hot head – Rodrigo Sasaki Mar 21 '13 at 21:29
  • excuse me ?, would you explain to us what do you mean – Laabidi Raissi Mar 21 '13 at 21:35
  • @RodrigoSasaki don't worry, I ran in a similar situation than you when started answering on SO. – Luiggi Mendoza Mar 21 '13 at 21:39
  • @LaabidiRaissi, I mean that the answer that you posted is much better and more informative than the one I previously posted, which got deleted. It's not important. :) – Rodrigo Sasaki Mar 21 '13 at 21:44