How to close a p:dialog after a p:commandButton action?

Question

I have a p:dialog that shows after a p:dataTable row is clicked. I have a p:commandButton in the p:dialog and it has an action like this:

<p:commandButton value="Cambiar" action="#{adminUsuarios.cambiarPerfil()}" update="tblUsuarios" />

The method cambiarPerfil():

public void cambiarPerfil() {
    // More stuff here
    this.listaUsuarios = null; // Clear the list
}

That works fine but I want to close the p:dialog after the p:commandButton action.

This is the dialog:

<h:form id="myForm">
    <!-- More stuff-->
    <p:dialog id="myDialog" widgetVar="editarDialog" header="Editar perfil de usuario #{adminUsuarios.usuarioSeleccionado.id_User}" resizable="false" width="400" showEffect="size" hideEffect="size">
        <p:commandButton value="Cambiar" action="#{adminUsuarios.cambiarPerfil()}" update="tblUsuarios" />
    </p:dialog>
</h:form>

Answer 1

You need to add an oncomplete client side method in your commandButton.

<h:form id="myForm">
    ...
    <p:dialog id="myDialog" widgetVar="editarDialog" ...>
        <p:commandButton value="Cambiar" action="#{adminUsuarios.cambiarPerfil()}" update="tblUsuarios" oncomplete="editarDialog.hide();"/>
    </p:dialog>
</h:form>

If you're using PF5.0 you might need to change it to oncomplete="PF('editarDialog').hide();" where editarDialog is your dialog's widgetVar.