Effect of ajax on button

Question

In the commandButton of primefaces we have u attribute ajax which may be true or false. What effect does it have on submission? I am making a silly example where the user type a name and triggers the button, soon after the name entered is displayed. In this case only works if the ajax is false, because ?

<h:form>
    <h:panelGrid columns="3">
        <p:outputLabel value="Nome" />
        <p:inputText id="nome" value="#{modelo.nome}"/> 
        <p:outputLabel id="resultado" styleClass="data" rendered="#{!empty modelo.nome}" value="#{modelo.nome}"/>
    </h:panelGrid>
    <p:commandButton id="su" value="Salvar" update="resultado" ajax="false"/>
</h:form>

Answer 1

The "ajax" option basically says if there will be a Submit of the page when the action of the button is triggered and consequently the new rendering of all its components. In your case, the update would be used to render the outputLabel without submitting the whole page, but it’s not working because this component has a condition rendered. What happens is that the attribute update should point to an id of an existing DOM component. Since this element is not rendered on the server side, no components are found to be updated. One way to solve this problem is to create another component that surrounds the outputLabel and update this component, since it will not have rendering condition and therefore will exist in DOM:

<h:panelGrid columns="3">
    <p:outputLabel value="Nome" />
    <p:inputText id="nome" value="#{modelo.nome}"/> 
    <h:panelGroup id="panel">
       <p:outputLabel id="resultado" styleClass="data" rendered="#{!empty modelo.nome}" value="#{modelo.nome}"/>
    </h:panelGroup>
    <p:commandButton id="su" value="Salvar" update="panel"/>
</h:panelGrid>

Now, updating the panelGroup your button will work with AJAX.