primefaces commandbutton ajax submit works as a non-ajax submit

Question

I'm using primefaces 3.5 and I want to update de value of an object using p:commandButton with ajax, but when I click on the p:commandButton the form submits entirely as a non-ajax submit. I tried with immediate=true, ajax="true" (but I read that this option is the default) partial-submit="true" but nothing, the button refresh all the page instead of just the asignarUA component.

Note: this is a liferay (6.2 CE) portlet.

This is part of the code:

<html xmlns="http://www.w3.org/1999/xhtml"  
xmlns:h="http://java.sun.com/jsf/html"  
xmlns:f="http://java.sun.com/jsf/core"  
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form>
    <p:commandButton onclick="asignarUADlg.show()" update=":asignarUA" title="Asignar" value="Asignar">
    <f:setPropertyActionListener value="#{solicitud }" target="#{mailboxView.solicitud}"/>
    </p:commandButton>                                                
</h:form>


<p:dialog id="asignarUA" widgetVar="asignarUADlg" modal="true" header="Asignar Unidades Administrativas" width="530" showEffect="fade" hideEffect="fade">
    <h:form enctype="multipart/form-data">
        <h:outputLabel for="dependencia" value="Dependencia: " />
        <h:outputText value="#{mailboxView.solicitud.nombreDependencia}" rendered="#{not empty mailboxView.solicitud}" />
        <p:separator />

        <p:commandButton value="Enviar" ajax="false" actionListener="#{mailboxView.asignar}" update=":messages2"/>
        <p:commandButton value="Cancelar" onclick="asignarUADlg.hide()" type="button"/>
    </h:form>
</p:dialog>
</h:body>
</html>

What is the button presenting the problem? Note that all the three <p:commandButton> are not ajax. <p:commandButton> is not ajax true by default, so if you want an ajax behavior on it you must manually set ajax=true on the desired button. — Bonifacio
According to the primefaces show case ajax=true is the default value. primefaces.org/showcase/ui/button/commandButton.xhtml Anyway I also tried with ajax=true but the behavior is the same. Greetings. — Carlos Marmolejo
Your code has an error on line 5: </p:form> should be </h:form> — stiemannkj1

stiemannkj1 stiemannkj1 · Accepted Answer · 2016-01-22T15:05:59

Your first p:commandButton is showing the dialog and then immediately hiding it again. This is also causing the page to blink, and I think you have mistaken this blinking for a non-ajax submit. When you click your the p:commandButton, dialog.show() is called and the dialog is shown. Then the update=":dialogId" code runs* and sends an ajax request to the server to re-render the dialog. Since the server does not know that dialog.show() has been called on the client, the server thinks that the dialog should still be in its default state: hidden. So the partial response that comes back resets the dialog to its initial state and hides the dialog again.

The solution is to update the content of the dialog instead of the whole dialog. For your particular example, you should add an id to your second h:form and update that from your Asignar button:

<h:form>
    <p:commandButton onclick="asignarUADlg.show()" update=":dialogContent"
    title="Asignar" value="Asignar">

<!-- ... -->

<p:dialog id="asignarUA" widgetVar="asignarUADlg" modal="true"
    header="Asignar Unidades Administrativas" width="530" showEffect="fade" hideEffect="fade">
    <h:form id="dialogContent" enctype="multipart/form-data">

<!-- ... -->

*The update attribute causes the p:commandButton to render code to send an ajax request in its onclick attribute. So the ajax code is literally called right after dialog.show().

primefaces commandbutton ajax submit works as a non-ajax submit

2 Answers