Question

I have PrimeFaces p:wizard inside p:dialog component. I’m using the custom buttoms for next/previous step:

<p:commandButton value="Weiter" onclick="wiz.next()">

I want to change the element of the dialog, which contains the wizard, in my case it is the dialog header:

<p:dialog id="dialogRespWizard"
        header="#{wizardBean.header}"

I’ve changed my code to:

<p:commandButton value="Weiter" onclick="wiz.next()" update="dialogRespWizard">

But the whole dialog is dissapearing after choosing next step.

So, how can I refresh the wizard ‘surrounding’ on the step change?

Answer 1

Regarding your question:

The dialog disappears because you update your whole dialog (means that the whole dialog element will be dropped from the HTML page, and will get replaced by a new dialog HTML element received from the server), that is intentional. If you want to update something inside your dialog you need to make some kind of XXXpanel inside your dialog and update that XXXpanel (wrapping HTML dialog element will be the samel, just the content of the dialog gets replaced with a new content received from the server):

<p:dialog id="dialogWizard" header="something">
  <p:outputPanel id="outputPanelWizard">
    // a lot of stuff which needs to get updated
  </p:outputPanel>
  <p:commandButton .... update="outputPanelWizard" />
</p:dialog>

… and your dialog won’t hide again. Therefore you need to put the header into a facet which you already have done, one step into the right direction.

To your self-answered question:

The “blinking” is present because you use onclick and update. Onclick gets executed as soon as the user clicks on the p:commandButton. But the update happens sometimes later in the cycle (when the browser received the response from the server). Therefore the wizard switches with wiz.next() and afterwards the update happens on the dialog header. You could just use oncomplete instead of onclick and the switch will happen after the browser receives the response from the server and after the dialog gets updated -> no more “blinking”.
Some other solutions exist as well, e.g.

Don’t use onclick/oncomplete/update on the p:commandButton, instead handle everything in the action/*actionListener* with the RequestContext as seen here RequestContext Showcase.

this.header = "my new header";
context.execute("wiz.next();"); 
context.update("outputPanelWizard");  

The advantage is IMHO, that you can evaluate the form (the user input) and switch to wiz.next() if it is applicable or not. When the user input is not satisfying you can stay on the same page, just don’t call wiz.next(). Same applies to the header, you can update is in the backing bean in respect to the user input.