Set header of <p:dialog> in dynamically

Question

I have to set head for < p : dialog> in JSF.I have written into setHeaderName() for name getter and setter.But I can not see the name of the header of < p : dialog> How to change dynamically head of p:dialog in PrimeFaces.

Solution 1

As mentioned by mareckmareck before, you can do so by using a simple ajax update to the component.

Additionally, I would recommend to use the header fact instead the header attribute like:

<p:dialog id="someDialog" widgetVar="someDialog_var">
   <f:facet name="header">
       <h:outputText id="someDialogHeader" value="#{backingBean.dialogHeader}"/>
   </f:facet>
    ...
 </p:dialog>

And matching

<p:commandButton value="Change dialog header"
actionListener="#{someBackingBean.changeHeader}"
update="someDialogHeader"/>

(I copied and extended the example provided mareckmareck here by the way...)

This is a better solution because now you can update the headers text only, instead of the entire Dialog. (Of cause updating the entire Dialog will work with this approach too.)

Also, you may have noticed, that your dialog will close once you update the entire Dialog. This approach gets rid of that problem too.

Best Regards,

J.Adam

Solution 2

It strongly depends on implementation, but generally you can do it like this:

<p:dialog id="someDialog" header="#{backingBean.dialogHeader}">  
(...)
</p:dialog> 

and then change the value of field dialogHeader in the backing bean (via ajax or any other means). Remember that you need a setter and getter for this to work.

@ViewScoped
@ManagedBean
public class SomeBackingBean {

    private String dialogHeader;

    public void setDialogHeader(final String dialogHeader) { 
        this.dialogHeader = dialogHeader;
    }

    public String getDialogHeader() {
        return dialogHeader;
    }

    public void changeHeader() {
        setDialogHeader("SomeHeader");
    }
} 

Calling changeHeader method and rerendering dialog will change the header. For example it could be called like this:

<p:commandButton value="Change dialog header"
    actionListener="#{someBackingBean.changeHeader}"
    update="someDialog"/>           

Solution 3

You could also opt for a javascript solution running on client side :

if (someCondition) 
    dlgTitle = 'Title A';
else
    dlgTitle = 'Title B';
PF('dlgWidgetVarName').show();
$('#yourFormId\\:yourDialogId_title').text(dlgTitle);

In my case, I chose this approach because my <p:dialog> isn't updated after an ajax call, only a <p:fragment> inside it (which is conditionnally rendered) :

        <h:form id="locations_editer_creer">
            <p:dialog id="location_dlg" widgetVar="locationDlg" header="Location" width="610" closeOnEscape="true"
                      minimizable="true" maximizable="true" fitViewport="true" onShow="preparerCreerAjaxRetour()" >
                <p:fragment id="dlgFrag" rendered="#{locationsControleur.action == 'preparer'}" >
                    <ui:include src="/pages/locations/LocEditerCreerDlg.xhtml">Problème, le dialogue de création / édition ne s&apos;affiche pas...</ui:include>
                </p:fragment>
            </p:dialog>
        </h:form>  

Furthermore, if you need your titles to be localized, you could follow this link to create javascript variables initalized with the content of your server's resources bundle file.