rich:modalPanel confirm delete

[spiritfox26]

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?

The modal

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>

[sarocks]

I doubt the datatable is rerendering while showing the modalpanel.

Did you try the other way of showing modalpanel?

e.g. Use a boolean variable in the bean class, and specify the boolean in the rendered attribute of the modalpanel.

And in the action method, make the boolean to true. Then reRender the modalpanel id in the commandlink.

And after modalpanel work over, make the boolean varibale to false again.

This procedure I am following and its pretty fast.

Hope it may help you. If you want i can send a sample code.

[liuliu]

hi,

1 you have a queue with 1000ms delay.

2 i think the rerender attribute on your datatable is a problem.

to saroj:

i dont think you can rerender something with rendered attribute is false.

[sivaprasad9394]

Because it is contacting with your backing bean while clicking delete buttton,So oncomplete of it will show your panel.Thats why it is taking delay,

See this for reference,

Check this ,

http://community.jboss.org/wiki/RichFaces4xpanels/diff?secondVersionNumber=5

Showing the panel

There should be next ways to show the panel on the client

• by calling JS api show method
• by defining show boolean attribute(false by default) to true. (prev showWhenRendered)

POST M! We should discuss switchType(showMode) for the panel in future - loading by ajax out of the box on show.

[sarocks]

Hi Liumin,

We can not rerender modalpanel with rendered attribute is false.

That's the reason we have to make that boolean variable true in the action method. When it returns from the action method, it rerender and finds the rendered attribute is true, so it works!

May be seems weired, but modalpanel loads pretty fast.

[spiritfox26]

Hi, thanks for answers, If i change oncomplet for onclick in:

<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>

the modalPanel appear very fast, but the a4j:actionParam have a delay to set the new value, i think this delay is related  with

<a4j:queue requestDelay="1000"/>

but i can't remove this a4j:queue because is necesary to filterEvent in rich:datatable.

PS: Sorry, I'm Uruguayan and my english is very very bad

[liuliu]

hi,

1 you should not use onclick event.

2 you can keep your requestDelay if you dont care this 1 second.

3 i think you should try remove the rerender on your datatable.

4 use a phase listener to see if delay come from phase 5 or phase 6 in lifecycle.

I m not good at english neither.

[spiritfox26]

Ok, thanks for answers.

[spiritfox26]

I add limitToList="true" reRender="deletePanel" in a4j:commandLink but i dont have lucky

Anyone have other idea?

Thanks