2 Replies Latest reply on Oct 1, 2012 2:03 AM by pepelara

    <rich:tab> closes on select option in its nested form

    pepelara

      I have a h:form inside a rich:tab of a rich:tabPanel and when I select an

      option from its inside form the rich:tab closes.

       

      Here is the structure,

       

      home.xhtml.-

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:rich="http://richfaces.org/rich"
          template="/WEB-INF/layout/template.xhtml">
      
          <ui:define name="body">
              <div id="mainDiv" style="height:595px; overflow-y: scroll; text-align: center;">
                     <table width="80%" align="center" style="background-color: #FFFFFF;">
                      <tr><td>
                          <table width="100%" style="color: #FFFFFF; background-color: #778899;">
                              <tr><td align="left">Recambios de electrodom&eacute;stico</td></tr>
                          </table>
                          <hr width="100%" style="background-color: #778899;"/>
                      </td></tr>
                      <tr><td align="center">
                          <h:panelGrid width="100%">
                              <rich:tabPanel switchType="client" style="width:100%;">
                                  <rich:tab header="Inicio">
                                      <ui:include src="/richfaces/inicio/inicio.xhtml" />
                                  </rich:tab>
                                  <rich:tab header="Login/Register">
                                      <ui:include src="/richfaces/login-register/login_register.xhtml" />
                                  </rich:tab>
                                  <rich:tab header="Catalogo">
                                      <ui:include src="/richfaces/catalogo/catalogo.xhtml" />
                                  </rich:tab>
                                  <rich:tab header="Carrito">
                                      <ui:include src="/richfaces/carrito/carrito.xhtml" />
                                  </rich:tab>
                                  <rich:tab header="Marcas">
                                      <ui:include src="/richfaces/marcas/marcas.xhtml" />
                                  </rich:tab>
                                  <rich:tab header="Contacta">
                                      <ui:include src="/richfaces/contacta/contacta.xhtml" />
                                  </rich:tab>
                              </rich:tabPanel>
                          </h:panelGrid>
                      </td></tr>
                  </table>
              </div>
          </ui:define>
      
      </ui:composition>
      

       

      catalogo.xhtml.-

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:s="http://jboss.org/seam/faces"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:rich="http://richfaces.org/rich"
          xmlns:c="http://java.sun.com/jsp/jstl/core">
      
          <div id="catalogo" style="height:595px; text-align: center;">
              <table width="100%" align="center" style="background-color: #FFFFFF;">
                  <tr><td>
                      <table width="100%" style="color: #FFFFFF; background-color: #778899;">
                          <tr><td align="left">Cat&aacute;logo</td></tr>
                      </table>
                      <hr width="100%" style="background-color: #778899;"/>
                  </td></tr>
                  <tr><td align="center">
                      <h:panelGrid rendered="#{identity.loggedIn}" width="100%">
                          <c:choose>
                              <c:when test="#{currentUser.perfil == 'Admin'}">
                                  <ui:include src="/richfaces/catalogo/admin/insertar.xhtml" />
                              </c:when>
                              <c:when test="#{currentUser.perfil == 'User'}">
                                  <ui:include src="/richfaces/catalogo/user/seleccionar.xhtml" />
                              </c:when>
                          </c:choose>
                      </h:panelGrid>
                      <h:panelGrid rendered="#{not identity.loggedIn}">
                          <ui:include src="/richfaces/catalogo/otherwise/default.xhtml" />
                      </h:panelGrid>    
                  </td></tr>
              </table>
          </div>
      
      </ui:composition>
      

       

      seleccionar.xhtml.-

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:s="http://jboss.org/seam/faces"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:rich="http://richfaces.org/rich"
          xmlns:a4j="http://richfaces.org/a4j"
          xmlns:c="http://java.sun.com/jsp/jstl/core">
      
          <table width="100%" align="center" style="background-color: #FFFFFF;">
              <tr><td>
                  <table width="100%" style="color: #FFFFFF; background-color: #778899;">
                      <tr><td align="left">Usuario Seleccionar</td></tr>
                  </table>
                  <hr width="100%" style="background-color: #778899;"/>
              </td></tr>
              <tr><td align="center">
                  <rich:tabPanel switchType="client" style="width:100%">
                      <rich:tab header="Lavado">
                          <ui:include src="/richfaces/catalogo/user/lavado/seleccionarLavado.xhtml" />
                      </rich:tab>
                      <rich:tab header="Cocci&oacute;n">
                          <ui:include src="/richfaces/catalogo/user/coccion/seleccionarCoccion.xhtml" />
                      </rich:tab>
                      <rich:tab header="Calor">
                          <ui:include src="/richfaces/catalogo/user/calor/seleccionarCalor.xhtml" />
                      </rich:tab>
                      <rich:tab header="Fr&iacute;o">
                          <ui:include src="/richfaces/catalogo/user/frio/seleccionarFrio.xhtml" />
                      </rich:tab>
                  </rich:tabPanel>
              </td></tr>
          </table>
      
      </ui:composition>
      

       

      seleccionarLavado.xhtml.-

      <ui:composition xmlns="http://www.w3.org/1999/xhtml"
          xmlns:h="http://java.sun.com/jsf/html"
          xmlns:f="http://java.sun.com/jsf/core"
          xmlns:s="http://jboss.org/seam/faces"
          xmlns:ui="http://java.sun.com/jsf/facelets"
          xmlns:rich="http://richfaces.org/rich"
          xmlns:a4j="http://richfaces.org/a4j"
          xmlns:c="http://java.sun.com/jsp/jstl/core">
      
          <h:form id="seleccionarLavadoForm">
              <table width="100%" align="center" style="background-color: #FFFFFF;">
                  <tr valign="middle">
                      <td align="center"><img src="images/catalogo/lavado.png" alt="Lavado" /></td>
                  </tr>
                  <tr>
                      <td align="center"><p>Repuestos para lavadoras, lavavajillas,<br/>secadoras, lavadoras de turbina...</p></td>
                  </tr>
                  <tr>
                      <td align="center">
                          <a4j:outputPanel>
                              <h:panelGrid columns="2" rendered="#{familiaAgent.familia == null}">    
                                  <a4j:commandButton value="Seleccionar" render="seleccionarLavadoForm" action="#{catalogoBean.selectCategorias}" >
                                      <a4j:param name="sFamId" value="1" assignTo="#{catalogoBean.sFamId}" />
                                  </a4j:commandButton>
                                  <a4j:commandButton value="Cancelar" render="seleccionarLavadoForm" action="#{catalogoBean.cancel}" />
                              </h:panelGrid>
                          </a4j:outputPanel>
                          
                          <a4j:outputPanel id="panelCategorias">
                              <h:panelGrid rendered="#{catalogoBean.categoriasSelected and catalogoBean.showCategorias}">
                                  <rich:dataTable id="tableCategorias" iterationStatusVar="it" var="cat" value="#{catalogoBean.categorias}">
                                      <rich:column>
                                          <f:facet name="header">Nombre</f:facet>
                                          <h:outputText value="#{cat.nombre}" />
                                      </rich:column>
                                      <rich:column>
                                          <f:facet name="header">Seleccionar</f:facet>
                                          <a4j:commandButton value="Seleccionar" render="seleccionarLavadoForm"
                                              action="#{catalogoBean.selectCategoria}" execute="@this">
                                              <a4j:param name="catId" value="#{it.index}" assignTo="#{catalogoBean.catId}" />
                                          </a4j:commandButton>                                                                            
                                      </rich:column>
                                  </rich:dataTable>
                              </h:panelGrid>
                          </a4j:outputPanel>
                          
                          <a4j:outputPanel id="panelButtonMarca">
                              <h:panelGrid rendered="#{catalogoBean.categoriaSelected and catalogoBean.showCategorias}">
                                  <a4j:commandButton value="Listar Marcas" render="seleccionarLavadoForm" action="#{catalogoBean.selectMarcas}" />
                              </h:panelGrid>
                          </a4j:outputPanel>    
                                  
                          <a4j:outputPanel id="panelMarcas" >
                              <h:panelGrid rendered="#{catalogoBean.marcasSelected and catalogoBean.showMarcas}">
                                  <rich:dataTable id="tableMarcas" iterationStatusVar="it" rows="5"
                                           var="mar" value="#{catalogoBean.marcas}">
                                      <rich:column>
                                          <f:facet name="header">Marcas</f:facet>
                                          <a4j:commandLink render="seleccionarLavadoForm" value="#{mar.nombre}"
                                              action="#{catalogoBean.selectMarca}" execute="@this">
                                              <a4j:param name="marId" value="#{it.index}" assignTo="#{catalogoBean.marId}" />
                                          </a4j:commandLink>                                                                            
                                      </rich:column>
                                      <f:facet name="footer">
                                          <rich:dataScroller page="#{catalogoBean.page}" />
                                      </f:facet>
                                  </rich:dataTable>
                              </h:panelGrid>
                          </a4j:outputPanel>
                                  
                          <a4j:outputPanel id="panelButtonModelo">
                              <h:panelGrid rendered="#{catalogoBean.marcaSelected and catalogoBean.showMarcas}">
                                  <a4j:commandButton value="Listar Modelos" render="seleccionarLavadoForm" action="#{catalogoBean.selectModelos}" />
                              </h:panelGrid>
                          </a4j:outputPanel>
                      
                          <a4j:outputPanel id="panelModelos">
                              <h:panelGrid rendered="#{catalogoBean.modelosSelected and catalogoBean.showModelos}" >
                                  <rich:dataTable iterationStatusVar="it" id="tableModelos" rows="5"
                                      var="modelo" value="#{catalogoBean.modelos}">
                                      <rich:column>
                                          <f:facet name="header">ID</f:facet>
                                          <h:outputText value="#{it.index}" />
                                      </rich:column>
                                      <rich:column>
                                          <f:facet name="header">Descripci&oacute;n</f:facet>
                                          <h:outputText value="#{modelo.descripcion}" />
                                      </rich:column>
                                      <rich:column>
                                          <f:facet name="header">Referencia</f:facet>
                                          <a4j:commandLink value="#{modelo.modelo}" render="seleccionarLavadoForm"
                                              action="#{catalogoBean.selectModelo}" execute="@this">
                                              <a4j:param name="modId" value="#{it.index}" assignTo="#{catalogoBean.modId}" />
                                          </a4j:commandLink>                                                                            
                                      </rich:column>
                                      <f:facet name="footer">
                                          <rich:dataScroller page="#{catalogoBean.page1}" />
                                      </f:facet>
                                  </rich:dataTable>
                              </h:panelGrid>
                          </a4j:outputPanel>
                          
                          <a4j:outputPanel id="panelButtonProducto">
                              <h:panelGrid rendered="#{catalogoBean.modeloSelected and catalogoBean.showModelos}">
                                  <a4j:commandButton value="Listar Productos" render="seleccionarLavadoForm" action="#{catalogoBean.selectProductos}" />
                              </h:panelGrid>
                          </a4j:outputPanel>
                          
                          <a4j:outputPanel id="panelProductos">
                              <h:panelGrid rendered="#{catalogoBean.productosSelected and catalogoBean.showProductos}" >
                                  <rich:dataTable iterationStatusVar="it" id="tableProductos" rows="5"
                                      var="producto" value="#{catalogoBean.productos}">
                                      <rich:column>
                                          <f:facet name="header">Imagen</f:facet>
                                          <img src="images/productos/#{producto.imagen}" alt="Productos" />
                                      </rich:column>
                                      <rich:column>
                                          <f:facet name="header">Descripci&oacute;n</f:facet>
                                          <h:outputText value="#{producto.descripcion}" />
                                      </rich:column>
                                      <rich:column>
                                          <f:facet name="header">Existencias</f:facet>
                                          <h:outputText value="#{producto.existencias}" />
                                      </rich:column>
                                      <rich:column>
                                          <f:facet name="header">Precio</f:facet>
                                          <h:outputText value="#{producto.precio}€" />
                                      </rich:column>
                                      <rich:column>
                                          <f:facet name="header">Carrito</f:facet>
                                          <a4j:commandLink value="Seleccionar" render="seleccionarLavadoForm"
                                              action="#{catalogoBean.selectProducto}" execute="@this" >
                                              <a4j:param name="proId" value="#{it.index}" assignTo="#{catalogoBean.proId}"/>
                                          </a4j:commandLink>
                                      </rich:column>
                                      <f:facet name="footer">
                                          <rich:dataScroller page="#{catalogoBean.page2}" />
                                      </f:facet>
                                  </rich:dataTable>
                              </h:panelGrid>
                          </a4j:outputPanel>
                          
                          <a4j:outputPanel id="panelTextCantidad">
                              <h:panelGrid columns="2" rendered="#{catalogoBean.productoSelected and catalogoBean.showProductos}">
                                  <h:outputText value="Cantidad:" />
                                  <h:inputText id="inputCantidad" value="#{catalogoBean.sCantidad}" >
                                       <f:validator validatorId="customValidator"/>
                                  </h:inputText>
                                  
                                  <a4j:commandButton value="Validar Cantidad" render="seleccionarLavadoForm" action="#{catalogoBean.selectCantidad}" />
                                  <h:message for="inputCantidad"/>
                              </h:panelGrid>
                          </a4j:outputPanel>
                          
                          <a4j:outputPanel id="panelShowData">
                              <h:panelGrid id="showData" columns="2" rendered="#{catalogoBean.cantidadSelected and catalogoBean.showCantidad}">
                                  <h:outputText value="Nombre Familia:" />
                                  <h:outputText value="#{catalogoBean.familia.nombre}" />
                                  
                                  <h:outputText value="Nombre Categoria:" />
                                  <h:outputText value="#{catalogoBean.categoria.nombre}" />
                                  
                                  <h:outputText value="Marca:" />
                                  <h:outputText value="#{catalogoBean.marca.nombre}" />
                                  
                                  <h:outputText value="Modelo Ref.:" />
                                  <h:outputText value="#{catalogoBean.modelo.modelo}" />
                                  
                                  <h:outputText value="Producto Ref.:" />
                                  <h:outputText value="#{catalogoBean.producto.referencia}" />
                                  
                                  <h:outputText value="Cantidad:" />
                                  <h:outputText value="#{catalogoBean.cantidad}" />
                              </h:panelGrid>
                          </a4j:outputPanel>
                          
                          <a4j:outputPanel id="buttonCarrito">    
                              <h:panelGrid rendered="#{catalogoBean.cantidadSelected and catalogoBean.showCantidad}">
                                  <a4j:commandButton value="Add to Cart" render="seleccionarLavadoForm" action="#{catalogoBean.addToCarrito}" />
                              </h:panelGrid>
                          </a4j:outputPanel>
                          
                          <a4j:outputPanel id="panelShowConfirm">    
                              <h:panelGrid id="showConfirm" columns="1" rendered="#{catalogoBean.showConfirmarPedido}">
                                  <h:outputText value="Para seleccionar otro producto pulse en Seleccionar," />
                                  <h:outputText value="o bien puede confirmar el pedido y verlo en la pestaña Carrito." />
                              </h:panelGrid>
                          </a4j:outputPanel>
                          
                          <a4j:outputPanel id="panelConfirm">    
                              <h:panelGrid rendered="#{catalogoBean.showConfirmarPedido}">
                                  <a4j:commandButton value="Confirmar Pedido" render="seleccionarLavadoForm" action="#{catalogoBean.confirmarPedido}" />
                              </h:panelGrid>
                          </a4j:outputPanel>
          
                          <a4j:outputPanel id="panelPedidoConfirmado">    
                              <h:panelGrid id="pedidoConfirmado" rendered="#{catalogoBean.showPedidoConfirmado}">
                                  <h:outputText value="Pedido confirmado!" />
                              </h:panelGrid>
                          </a4j:outputPanel>
                      </td>
                  </tr>
              </table>
          </h:form>
      
      </ui:composition>
      

       

      and here is where I get problems

      <a4j:outputPanel id="panelCategorias">
          <h:panelGrid rendered="#{catalogoBean.categoriasSelected and catalogoBean.showCategorias}">
              <rich:dataTable id="tableCategorias" iterationStatusVar="it" var="cat" value="#{catalogoBean.categorias}">
                  <rich:column>
                      <f:facet name="header">Nombre</f:facet>
                      <h:outputText value="#{cat.nombre}" />
                  </rich:column>
                  <rich:column>
                      <f:facet name="header">Seleccionar</f:facet>
                      <a4j:commandButton value="Seleccionar" render="seleccionarLavadoForm"
                          action="#{catalogoBean.selectCategoria}" execute="@this">
                          <a4j:param name="catId" value="#{it.index}" assignTo="#{catalogoBean.catId}" />
                      </a4j:commandButton>                                                                            
                  </rich:column>
              </rich:dataTable>
          </h:panelGrid>
      </a4j:outputPanel>
      

       

      this panel insted of gives me the selected option closes the rich:tab

       

      I am not sure at all if I am doing it right.

       

      Thanks in advance,

      Jose

        • 1. Re: <rich:tab> closes on select option in its nested form
          pepelara

          Here is my bean,

           

          @ViewScoped
          @ManagedBean(name="catalogoBean")
          public class CatalogoBean implements Serializable {
          ...........................
          ...........................
          
          public void selectCategorias() {
                  if(sFamId != null) {
                      try {
                          Integer iId = Integer.valueOf(sFamId);
                          familia = familiaDAO.buscarPorId(iId);
                          if (familia != null) {
                              categorias = familia.getCategorias();
                          }
                      } catch(Exception ex) {
                      }
                  }
                  
                  categoriasSelected = (categorias != null);
                  System.out.println("Categorias: " + categoriasSelected + " " + categorias.size());
              }
              
              public void selectCategoria() {
                  System.out.println("EN SELECTCATEGORIA()");
                  
                  if(categoriasSelected) {
                      if(sCatId != null) {
                          try {
                              Integer iId = Integer.valueOf(sCatId);
                              categoria = categorias.get(iId);
                          } catch (Exception ex) {
                          }
                      } else {
                          categoria = categorias.get(catId);
                      }
                  }
                  
                  categoriaSelected = (categoria != null);
                  System.out.println("Categoria: " + categoriaSelected + " " + categoria.getNombre());
              }
          ......................................
          ......................................
          

           

          I can see in the console the message from selectCategorias() [System.out.println("Categorias: " + categoriasSelected + " " + categorias.size());],

          but no message from selectCategoria() [System.out.println("Categoria: " + categoriaSelected + " " + categoria.getNombre());].

           

          When I say 'closes' I was trying to say 'collapses'.

           

          Regards,

          Jose

          • 2. Re: <rich:tab> closes on select option in its nested form
            pepelara
            1 of 1 people found this helpful