Update JSF component via Bean

Question

Inside my code I have two variables called displayMessage and displayImage that are two Strings, as the method is running, the messages are being updated. In my Managedbean messages are updated, but I have not found an effective way to render this information on the page xhtml, which to each change would like the messages to be updated within a dialog.

Follow an excerpt of my code below:

<p:commandButton value="Buscar" id="pesquisa"
                class="ui-button-custom ui-button-busca"
                action="#{fluxo.veiculos}" process="@form" 
                update="@form" onclick="PF('statusDialog').show();" />

        <p:dialog id="mod" modal="true" widgetVar="statusDialog" header="Status"   
         draggable="false" closable="true">
            <h:form id="idformdialog">              
         <div class="modal-content">                                            
          <p:graphicImage id="displayImage1" url="#{fluxoPeriodo.displayImage}" />
           <h:outputText  id="displayMessage1" value="#{fluxoPeriodo.displayMessage}" />                         
        </div>

        <div  class="modal-content">       

          <p:graphicImage id="displayImage2" url="#{fluxoPeriodo.displayImage2}" />
           <h:outputText id="displayMessage2" value="#{fluxoPeriodo.displayMessage2}" />                

        </div> 

        </h:form>              
        </p:dialog>     

By clicking the button Fetch appears to dialog about a datatable while information is processed.

Below follows the way I would like the information to be shown in my dialog:

Does anyone have any suggestions on how to achieve this goal?

Gratefully, Well

Answer 1

Try to update your dialog (update="mod") by clicking the button:

<p:commandButton value="Buscar" id="pesquisa"
                class="ui-button-custom ui-button-busca"
                action="#{fluxo.veiculos}" process="@form" 
                update="mod" onclick="PF('statusDialog').show();" />

• Since your button is outside the dialog, both are in different formats

• In your code only the form where the button is inserted will be updated

Need to see if there is one form inside the other, this is a dangerous practice and not recommended

Put your dialog (containing a form) outside the form with the button

---

Update after response:

In your Managedbean there is a method called veiculos() where the processing steps are processed. I suggest that after each completed step you do an ajax update via backbean. In version 6.1 of Primefaces you can use this function:

RequestContext.getCurrentInstance().update("mod");

If you upgrade your Primefaces to version 6.2 or higher do so:

PrimeFaces.current().ajax().update("mod");

Example of how your code would look:

public void veiculos() {
    executarProcedimento1();
    atualizarModal();
    executarProcedimento2();
    atualizarModal();
    executarProcedimento3();
    atualizarModal();
    executarProcedimento4();
    atualizarModal();
}

private void atualizarModal() {
    RequestContext.getCurrentInstance().update("mod");
}

I don’t know if this will be enough for you to have the visual effect you want, depending on the processing time the update speed will be almost immediate. Maybe it needs adjustments to stay exactly as desired, but it’s already a way.