8 Replies Latest reply on Sep 21, 2010 12:40 PM by Agustin Sivoplás Ferrari

    rich:modalPanel confirm delete

    Agustin Sivoplás Ferrari Expert

      I created a rich:modalPanel to confirm the user you want delete, but the modal have a big delay (6 seg) to appear.

      Anyone have an idea?

       

      tabla.PNG

       

      The modal

       

      confirmacion.PNG

       

      The code:

       

      <rich:panel header="#{msg.itemUsuariosBundle}" styleClass="panelConfRichClass">
      <h:form id="usuarioForm">
      <a4j:queue requestDelay="1000"/>
      <h:outputText id="labelError" value="#{usuarioBean.labelError}" styleClass="labelWhiteError"/>
      <div id="colorBlanco">
      <h:panelGrid columns="2" >
      <h:outputLabel id="ListaClientesLabel" for="listaClientes" value="#{msg.selectClienteLabel}" />
      <h:selectOneMenu id="listaClientes" valueChangeListener="#{usuarioBean.processValueChangeCliente2}"
      value="#{usuarioBean.strIdCliente}" immediate="true" styleClass="comboBoxField">
      <f:selectItem itemLabel="#{msg.seleccionarCliente}" itemValue="-1"/>
      <f:selectItems value="#{usuarioBean.clienteList}" />
      <a4j:support event="onchange" reRender="usuarioForm"/>
      </h:selectOneMenu>
      </h:panelGrid>
      </div>
      <br/>
      <rich:dataTable id="items" value="#{usuarioBean.usuariosModel}"
      var="usuario" rows="15" styleClass="datatableStyle" reRender="scroll">
      <rich:column>
      <f:facet name="header">
      <h:outputText id="a" value="#{msg.idUsuarioLabel}"/>
      </f:facet>
      <h:outputText id="aa" value="#{usuario.idUsuario}"/>
      </rich:column>
      <rich:column sortBy="#{usuario.nombre}" filterBy="#{usuario.nombre}" filterEvent="onkeyup" filterValue="#{usuarioBean.strNombreFiltro}">
      <f:facet name="header">
      <h:outputText id="b" value="#{msg.nomUsuarioLabel}" />
      </f:facet>
      <h:outputText id="bb" value="#{usuario.nombre}"/>
      </rich:column>
      <rich:column sortBy="#{usuario.apellido}" filterBy="#{usuario.apellido}" filterEvent="onkeyup" filterValue="#{usuarioBean.strApellidoFiltro}">
      <f:facet name="header">
      <h:outputText id="c" value="#{msg.apeUsuarioLabel}"/>
      </f:facet>
      <h:outputText id="cc" value="#{usuario.apellido}"/>
      </rich:column>
      <rich:column sortBy="#{usuario.nomUsuario}" filterBy="#{usuario.nomUsuario}" filterEvent="onkeyup" filterValue="#{usuarioBean.strNomUsuFiltro}">
      <f:facet name="header">
      <h:outputText id="f" value="#{msg.nickUsuarioLabel}"/>
      </f:facet>
      <h:outputText id="ff" value="#{usuario.nomUsuario}"/>
      </rich:column>
      <rich:column sortBy="#{usuario.reparticion.nomReparticion}" filterBy="#{usuario.reparticion.nomReparticion}" filterEvent="onkeyup" filterValue="#{usuarioBean.strDepartamentoFiltro}">
      <f:facet name="header">
      <h:outputText id="repUser" value="#{msg.reparticionLabel}"/>
      </f:facet>
      <h:outputText id="repUserVal" value="#{usuario.reparticion.nomReparticion}"/>
      </rich:column>
      <rich:column styleClass="columnaCentrada" rendered="#{securityBean.modificarUsuario}">
      <f:facet name="header">
      </f:facet>
      <h:commandLink id="editUsuario" action="#{usuarioBean.editUsuario}">
      <h:graphicImage value="/images/bt_edit.png" alt="#{msg.editLabel}"/>
      </h:commandLink>
      </rich:column>
      <rich:column styleClass="columnaCentrada" rendered="#{securityBean.modificarUsuario}">
      <f:facet name="header">
      </f:facet>
      <a4j:commandLink id="removeUsuario" oncomplete="#{rich:component('deletePanel')}.show()">
      <h:graphicImage value="/images/bt_delete.png" alt="#{msg.removeLabel}" />
      <a4j:actionparam name="idUsuarioEliminar" value="#{usuario.idUsuario}" assignTo="#{usuarioBean.idUsuarioEliminar}"/>
      </a4j:commandLink>
      </rich:column>
      </rich:dataTable>
      <rich:datascroller id="scroll" for="items" page="#{usuarioBean.scrollerPage}"/>
      <br/>
      <h:commandLink styleClass="ButtonYellowSmall78" onmouseover="this.style.color='#0000CC';" onmouseout="this.style.color='black';"  value="#{msg.addDominioBtn}" action="#{usuarioBean.addNew}" rendered="#{securityBean.modificarUsuario}"></h:commandLink>
      </h:form>
      </rich:panel>
      <rich:modalPanel id="deletePanel" autosized="true" width="200">
              <f:facet name="header">
                  <h:outputText value="#{msg.msgConfirmarEliminar}"/>
              </f:facet>
              <br/>
              <h:form>
                   <table width="100%">
                       <tbody>
                           <tr>
                              <td align="center" width="50%">
                                       <a4j:commandLink value="#{msg.siLabel}" oncomplete="#{rich:component('deletePanel')}.hide();return true;" action="#{usuarioBean.removeUsuario}" reRender="usuarioForm"
                                      styleClass="ButtonYellowSmall78" onmouseover="this.style.color='#0000CC';" onmouseout="this.style.color='black';"/>
                                  </td>
                              <td align="center" width="50%">
                             <a4j:commandLink value="#{msg.noLabel}" onclick="#{rich:component('deletePanel')}.hide();return false;" styleClass="ButtonYellowSmall78" onmouseover="this.style.color='#0000CC';" onmouseout="this.style.color='black';"/>
                              </td>
                          </tr>
                      </tbody>
                  </table>
              </h:form>
          </rich:modalPanel>
      <rich:panel header="#{msg.itemUsuariosBundle}" styleClass="panelConfRichClass">
                <h:form id="usuarioForm">
                     <a4j:queue requestDelay="1000"/>
                     <h:outputText id="labelError" value="#{usuarioBean.labelError}" styleClass="labelWhiteError"/>
                     <div id="colorBlanco">
                          <h:panelGrid columns="2" >
                               <h:outputLabel id="ListaClientesLabel" for="listaClientes" value="#{msg.selectClienteLabel}" />
                               <h:selectOneMenu id="listaClientes" valueChangeListener="#{usuarioBean.processValueChangeCliente2}"
                                    value="#{usuarioBean.strIdCliente}" immediate="true" styleClass="comboBoxField">
                                    <f:selectItem itemLabel="#{msg.seleccionarCliente}" itemValue="-1"/>
                                    <f:selectItems value="#{usuarioBean.clienteList}" />
                                    <a4j:support event="onchange" reRender="usuarioForm"/>
                               </h:selectOneMenu>
                          </h:panelGrid>
                     </div>
                     <br/>
                     <rich:dataTable id="items" value="#{usuarioBean.usuariosModel}" 
                          var="usuario" rows="15" styleClass="datatableStyle" reRender="scroll">
                          <rich:column>
                               <f:facet name="header">
                                    <h:outputText id="a" value="#{msg.idUsuarioLabel}"/>
                               </f:facet>
                               <h:outputText id="aa" value="#{usuario.idUsuario}"/>
                          </rich:column>
                          <rich:column sortBy="#{usuario.nombre}" filterBy="#{usuario.nombre}" filterEvent="onkeyup" filterValue="#{usuarioBean.strNombreFiltro}">
                               <f:facet name="header">
                                    <h:outputText id="b" value="#{msg.nomUsuarioLabel}" />
                               </f:facet>
                               <h:outputText id="bb" value="#{usuario.nombre}"/>
                          </rich:column>
                          <rich:column sortBy="#{usuario.apellido}" filterBy="#{usuario.apellido}" filterEvent="onkeyup" filterValue="#{usuarioBean.strApellidoFiltro}">
                               <f:facet name="header">
                                    <h:outputText id="c" value="#{msg.apeUsuarioLabel}"/>
                               </f:facet>
                               <h:outputText id="cc" value="#{usuario.apellido}"/>
                          </rich:column>
                          <rich:column sortBy="#{usuario.nomUsuario}" filterBy="#{usuario.nomUsuario}" filterEvent="onkeyup" filterValue="#{usuarioBean.strNomUsuFiltro}">
                               <f:facet name="header">
                                    <h:outputText id="f" value="#{msg.nickUsuarioLabel}"/>
                               </f:facet>
                               <h:outputText id="ff" value="#{usuario.nomUsuario}"/>
                          </rich:column>
                          
                          <rich:column sortBy="#{usuario.reparticion.nomReparticion}" filterBy="#{usuario.reparticion.nomReparticion}" filterEvent="onkeyup" filterValue="#{usuarioBean.strDepartamentoFiltro}"> 
                               <f:facet name="header">
                                    <h:outputText id="repUser" value="#{msg.reparticionLabel}"/>
                               </f:facet>
                               <h:outputText id="repUserVal" value="#{usuario.reparticion.nomReparticion}"/>
                          </rich:column>
                          
                          <rich:column styleClass="columnaCentrada" rendered="#{securityBean.modificarUsuario}">
                               <f:facet name="header">
                               </f:facet>
                               <h:commandLink id="editUsuario" action="#{usuarioBean.editUsuario}">
                                    <h:graphicImage value="/images/bt_edit.png" alt="#{msg.editLabel}"/>
                               </h:commandLink>
                          </rich:column>
                          <rich:column styleClass="columnaCentrada" rendered="#{securityBean.modificarUsuario}">
                               <f:facet name="header">
                               </f:facet>
                               <a4j:commandLink id="removeUsuario" oncomplete="#{rich:component('deletePanel')}.show()">
                                    <h:graphicImage value="/images/bt_delete.png" alt="#{msg.removeLabel}" />
                                    <a4j:actionparam name="idUsuarioEliminar" value="#{usuario.idUsuario}" assignTo="#{usuarioBean.idUsuarioEliminar}"/>
                               </a4j:commandLink>
                          </rich:column>
                     </rich:dataTable>
                     <rich:datascroller id="scroll" for="items" page="#{usuarioBean.scrollerPage}"/>
                     <br/>
                     <h:commandLink styleClass="ButtonYellowSmall78" onmouseover="this.style.color='#0000CC';" onmouseout="this.style.color='black';"  value="#{msg.addDominioBtn}" action="#{usuarioBean.addNew}" rendered="#{securityBean.modificarUsuario}"></h:commandLink>
                </h:form>
           </rich:panel>
           <rich:modalPanel id="deletePanel" autosized="true" width="200">
              <f:facet name="header">
                  <h:outputText value="#{msg.msgConfirmarEliminar}"/>
              </f:facet>
              <br/>
              <h:form>
                   <table width="100%">
                       <tbody>
                           <tr>
                              <td align="center" width="50%">
                                       <a4j:commandLink value="#{msg.siLabel}" oncomplete="#{rich:component('deletePanel')}.hide();return true;" action="#{usuarioBean.removeUsuario}" reRender="usuarioForm"
                                            styleClass="ButtonYellowSmall78" onmouseover="this.style.color='#0000CC';" onmouseout="this.style.color='black';"/>
                                  </td>
                              <td align="center" width="50%">
                                   <a4j:commandLink value="#{msg.noLabel}" onclick="#{rich:component('deletePanel')}.hide();return false;" styleClass="ButtonYellowSmall78" onmouseover="this.style.color='#0000CC';" onmouseout="this.style.color='black';"/>
                              </td>
                          </tr>
                      </tbody>
                  </table>
              </h:form>
          </rich:modalPanel>