multiple forms JSF + primefaces 3.5 - forms

Question

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émico">
<p:menuitem value="Matrí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ó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ó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ó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ó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ó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>

Answer 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émico">
<p:menuitem value="Matrí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ó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ó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.