jsf - Form behaviour when using ajax to include a XHTML file -
jsf - Form behaviour when using ajax to include a XHTML file -
i'm learning jsf , trying tabbed pane next tutorial:
tab manager using ajax , jsf
i have managed tab switch working. want include form defined in xhtml file tab tabbed pane in there's datatable commandbutton delete selected row, called clientes.xhtml. if navigate straight page delete button works expected. when include page within contentform shows expected delete button doesn't supposed do, refresh current page no row deleted.
this have far:
welcome.xhtml<?xml version='1.0' encoding='utf-8'?> <!doctype composition public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns="http://www.w3.org/1999/xhtml" template="./templates/basictemplate.xhtml"> <ui:define name="menu_bar"> <h:form id="formmenu"> <ul id="menu-list"> <li><h:commandlink value="home"> <f:ajax event="click" render=":contentform" listener="#{tabviewmanagedbean.settabindex(0)}" /> </h:commandlink></li> <li><h:commandlink value="clientes"> <f:ajax event="click" render=":contentform" listener="#{tabviewmanagedbean.settabindex(1)}" /> </h:commandlink></li> <li><h:commandlink value="proveedores"> <f:ajax event="click" render=":contentform" listener="#{tabviewmanagedbean.settabindex(2)}" /> </h:commandlink></li> </ul> </h:form> </ui:define> <ui:define name="content"> <h:form id="contentform"> <h:panelgroup layout="block" rendered="#{tabviewmanagedbean.tabindex == 0}"> <h1>hi there!</h1> <hr /> </h:panelgroup> <h:panelgroup layout="block" rendered="#{tabviewmanagedbean.tabindex == 1}"> <ui:include src="clientes.xhtml" /> </h:panelgroup> <h:panelgroup layout="block" rendered="#{tabviewmanagedbean.tabindex == 2}"> <ui:include src="proveedores.xhtml" /> </h:panelgroup> </h:form> </ui:define> </ui:composition> clientes.xhtml <?xml version='1.0' encoding='utf-8'?> <!doctype composition public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <ui:composition xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns="http://www.w3.org/1999/xhtml"> <h:form> <h:datatable id="datatable" value="#{clientesmanagedbean.listaclientes}" var="cliente"> <h:column> <f:facet name="header"> <h:outputtext value="id" /> </f:facet> <h:outputtext value="#{cliente.idcliente}" /> </h:column> <h:column> <f:facet name="header"> <h:outputtext value="fecha de ingreso" /> </f:facet> <h:outputtext value="#{cliente.fechaingreso}"> <f:convertdatetime pattern="dd/mm/yyyy"/> </h:outputtext> </h:column> <h:column> <f:facet name="header"> <h:outputtext value="nombre" /> </f:facet> <h:outputtext value="#{cliente.nombre}" /> </h:column> <h:column> <f:facet name="header"> <h:outputtext value="domicilio" /> </f:facet> <h:outputtext value="#{cliente.domicilio}" /> </h:column> <h:column> <f:facet name="header"> <h:outputtext value="teléfono" /> </f:facet> <h:outputtext value="#{cliente.telefono}" /> </h:column> <h:column> <f:facet name="header" /> <h:commandbutton image="./resources/css/delete_16.png" action="#{clientesmanagedbean.eliminarcliente(cliente)}"/> </h:column> </h:datatable> </h:form> </ui:composition> edit 1 here clientesmanagedbean code:
import beans.interfaces.iclientesbeanlocal; import domain.entities.clientejpa; import java.util.arraylist; import java.util.list; import javax.annotation.postconstruct; import javax.ejb.ejb; import javax.faces.bean.managedbean; import javax.faces.view.viewscoped; @managedbean @viewscoped public class clientesmanagedbean { @ejb(beanname = "clientesbeanjpa") private iclientesbeanlocal clientesbeanlocal; private list<clientejpa> listaclientes; private clientejpa cliente; @postconstruct public void init() { listaclientes = new arraylist<>(); listaclientes.addall(clientesbeanlocal.gettodos()); } public list<clientejpa> getlistaclientes() { homecoming listaclientes; } public clientejpa getcliente() { homecoming cliente; } public void eliminarcliente(clientejpa cliente) { if(clientesbeanlocal.eliminar(cliente) == iclientesbeanlocal.exito) { listaclientes.remove(cliente); } } } and clientesbeanjpa session bean, in case:
import beans.interfaces.iclientesbeanlocal; import domain.entities.clientejpa; import javax.ejb.stateless; import javax.ejb.transactionattribute; import javax.ejb.transactionattributetype; import javax.persistence.entitymanager; import javax.persistence.persistencecontext; @stateless(name = "clientesbeanjpa") public class clientesbeanjpa implements iclientesbeanlocal { @persistencecontext(unitname = "cursoj2eepu") private entitymanager entitymanager; @override @transactionattribute(transactionattributetype.required) public int eliminar(clientejpa cliente) { if(entitymanager == null) { string error = "error al inyectar entitymanager en la clase " + getclass().getcanonicalname(); throw new exceptionininitializererror(error); } else { clientejpa clienteaeliminar = entitymanager.getreference(clientejpa.class, cliente.getidcliente()); entitymanager.remove(clienteaeliminar); homecoming exito; } } } edit 2 based on @luiggi's suggestion i've tested if clientesmanagedbean#eliminar(cliente) method called , i've found out:
tabindex property set 1 default, clientes.xhtml rendered , works expected. if tabindex property set value , navigate tab 1, eliminar(cliente) not called. including tabviewmanagedbean code in case.
import javax.faces.bean.managedbean; import javax.faces.view.viewscoped; @managedbean @viewscoped public class tabviewmanagedbean { private integer tabindex = 0; /* * if set tabindex 1 clientes.xhtml rendered default * , everithing works expected. * if set property 0 , navigate tab 1 * behaves described. */ public tabviewmanagedbean() { super(); } public integer gettabindex() { homecoming tabindex; } public void settabindex(integer tabindex) { this.tabindex = tabindex; } }
the problem you're nesting <form>, invalid html. can noted code:
welcome.xhtml:
class="lang-html prettyprint-override"><ui:define name="content"> <h:form id="contentform"> <!-- code here... --> <h:panelgroup layout="block" rendered="#{tabviewmanagedbean.tabindex == 1}"> <!-- including source of clientes.xhtml page --> <ui:include src="clientes.xhtml" /> </h:panelgroup> <!-- code here... --> </h:form> </ui:define> and in clientes.xhtml have:
class="lang-html prettyprint-override"><h:form> <h:datatable id="datatable" value="#{clientesmanagedbean.listaclientes}" var="cliente"> <!-- more code... --> </h:datatable> <h:form> which ends in way:
class="lang-html prettyprint-override"><h:form id="contentform"> <!-- code here... --> <h:panelgroup layout="block" rendered="#{tabviewmanagedbean.tabindex == 1}"> <h:form> <h:datatable id="datatable" value="#{clientesmanagedbean.listaclientes}" var="cliente"> <!-- more code... --> </h:datatable> <h:form> </h:panelgroup> <!-- code here... --> </h:form> decide define <h:form> not have nested forms. imo should define <h:form> in narrowest possible scope, in case in clientex.xhtml page (and in pages include).
more info:
h:commandlink / h:commandbutton not beingness invoked (your scenario resembles case 2 of accepted answer) jsf jsf-2
Comments
Post a Comment