jsf - entre - primefaces commandbutton actionlistener example

Orden de ejecución de eventos al presionar PrimeFaces p: commandButton

Question

Estoy intentando ejecutar un método de bean JSF2 y mostrar un cuadro de diálogo después de completar el método al hacer clic en PrimeFaces <p:commandButton> .

<p:commandButton id="viewButton" value="View"
    actionlistener="#{userBean.setResultsForSelectedRow}" ajax="false"
    update=":selectedRowValues"
    oncomplete="PF(''selectedRowValuesDlg'').show()">
</p:commandButton>

<p:dialog id="selectedRowValues" widgetVar="selectedRowValuesDlg" dynamic="true">
    <h:outputText value="#{userBean.selectedGroupName}" />
</p:dialog>

Cuando hago clic en el botón de comando, el método de escucha de acción de bean setResultsForSelectedRow ejecuta correctamente, pero no muestra el cuadro de diálogo cuando se completa el método. Si actionlistener , se muestra el cuadro de diálogo. No sé qué está pasando mal.

¿Cuál es el orden de ejecución de los eventos? ¿Es posible ejecutar oncomplete y oncomplete simultáneamente?

Answer 1

Falló porque ajax="false" . Esto desencadena una solicitud síncrona completa que a su vez causa una recarga de página completa, haciendo que el oncomplete nunca se oncomplete (tenga en cuenta que todos los demás atributos relacionados con ajax como process , onstart , onsuccess , onerror y update tampoco se onerror nunca).

Que funcionó cuando actionListener también es imposible. Debería haber fallado de la misma manera. Quizás también quitó ajax="false" a lo largo de él sin entender realmente lo que estaba haciendo. Eliminar ajax="false" debería cumplir el requisito deseado.

¿También es posible ejecutar actionlistener y oncomplete simultáneamente?

No. La secuencia de comandos solo se puede iniciar antes o después del oyente de acción. Puede usar onclick para onclick el script en el momento del clic. Puede utilizar onstart para onstart el script en el momento en que se va a enviar la solicitud de Ajax. Pero nunca serán despedidos exactamente al mismo tiempo. La secuencia es la siguiente:

• El usuario hace clic en el botón en el cliente
• código JavaScript onclick se ejecuta
• JavaScript prepara una solicitud ajax basada en el process y el árbol DOM HTML actual
• onstart código JavaScript de onstart se ejecuta
• JavaScript envía una solicitud ajax del cliente al servidor
• JSF recupera la solicitud de ajax
• JSF procesa el ciclo de vida de la solicitud en el árbol de componentes JSF en función del process
• El método actionListener JSF backing bean se ejecuta
• se ejecuta el método de beans de respaldo JSF de action
• JSF prepara una respuesta ajax basada en la update y el árbol de componentes JSF actual
• JSF envía una respuesta ajax del servidor al cliente
• JavaScript recupera la respuesta de ajax
  • si el estado de la respuesta HTTP es 200, se onsuccess código JavaScript de onsuccess
  • de lo contrario, si el estado de respuesta HTTP es 500, se onerror código JavaScript onerror
• JavaScript realiza una update basada en la respuesta ajax y el árbol DOM HTML actual
• oncomplete código JavaScript oncomplete

Tenga en cuenta que la update se realiza después de actionListener , por lo que si estaba usando onclick o onstart para mostrar el cuadro de diálogo, puede mostrar contenido antiguo en lugar de contenido actualizado, lo cual es deficiente para la experiencia del usuario. En su lugar, sería mejor utilizar oncomplete para mostrar el diálogo. También tenga en cuenta que es mejor usar action lugar de actionListener cuando tenga la intención de ejecutar una acción comercial.

Ver también:

• Comprender el proceso / actualización PrimeFaces y los atributos JSF f: ajax execute / render
• Diferencias entre acción y acción

Answer 2

Me encanta recibir información como BalusC aquí, y él es tan amable de ayudar a TANTAS personas con tanta BUENA información que considero sus palabras como un evangelio, pero no pude usar ese orden de eventos para resolver este mismo tipo de tiempo problema en mi proyecto Como BalusC puso aquí una gran referencia general que incluso marqué, pensé que donaría mi solución para algunos problemas de sincronización avanzada en el mismo lugar, ya que también soluciona los problemas de sincronización del póster original. Espero que este código ayude a alguien:

        <p:pickList id="formPickList" 
                    value="#{mediaDetail.availableMedia}" 
                    converter="MediaPicklistConverter" 
                    widgetVar="formsPicklistWidget" 
                    var="mediaFiles" 
                    itemLabel="#{mediaFiles.mediaTitle}" 
                    itemValue="#{mediaFiles}" >
            <f:facet name="sourceCaption">Available Media</f:facet>
            <f:facet name="targetCaption">Chosen Media</f:facet>
        </p:pickList>

        <p:commandButton id="viewStream_btn" 
                         value="Stream chosen media" 
                         icon="fa fa-download"
                         ajax="true"
                         action="#{mediaDetail.prepareStreams}"                                              
                         update=":streamDialogPanel"
                         oncomplete="PF(''streamingDialog'').show()"
                         styleClass="ui-priority-primary"
                         style="margin-top:5px" >
            <p:ajax process="formPickList"  />
        </p:commandButton>

El diálogo está en la parte superior del XHTML fuera de este formulario y tiene una forma propia incrustada en el cuadro de diálogo junto con una tabla de datos que contiene comandos adicionales para transmitir los medios que todos deben prepararse y estar listos cuando el diálogo es presentado. Puede utilizar esta misma técnica para hacer cosas como descargar documentos personalizados que deben prepararse antes de que se transfieran a la computadora del usuario a través de los botones de descarga de archivos en el cuadro de diálogo también.

Como dije, este es un ejemplo más complicado, pero golpea todos los puntos más importantes de su problema y el mío. Cuando se hace clic en el botón de comando, el resultado es primero asegurar que el bean de respaldo se actualiza con los resultados de la lista de selección, luego decirle al bean de respaldo que prepare flujos para el usuario según sus selecciones en la lista de selección, luego actualice los controles en el diálogo dinámico con una actualización, luego muestra el cuadro de diálogo listo para que el usuario comience a transmitir su contenido.

El truco consistía en utilizar el orden de eventos de BalusC para el CommandButton principal y luego agregar el bit <p:ajax process="formPickList" /> para garantizar que se ejecutó primero, porque nada sucede correctamente a menos que pickList haya actualizado el bean de respaldo. primero (algo que no me estaba sucediendo antes de agregarlo). Entonces, sí, ese comando se mueve porque puede afectar a los componentes anteriores, pendientes y actuales, así como a los granos de respaldo, pero el tiempo para interrelacionarlos no es fácil de manejar algunas veces.

Feliz codificación!