Open JQuery dialog in JSF2 page

Question

In my JSF page when user clicks on 'Register' commandLink component I have to display a confirmation message to the user in a jQuery popup after doing the registration stuff.

My JSF page looks like

<h:commandLink value="Register" p:data-role="button" >
    <f:ajax execute="@form" listener="#{userController.registerUser(event)}" 
            onevent="function(data){if(data.status==='success')
            {
           openDialogFunc();
            }}" />
</h:commandLink>

<div data-role="popup" id="register-dialog" data-theme="a" data-overlay-theme="a">  

    <div data-role="header" data-tap-toggle="false">
        <h1>Success</h1>
    </div>

    <div data-role="content">
        <br/>
        <p>Your user account has now been created.</p>
        <br/>
        <h:commandButton value="Login" p:data-role="button" action="#{userController.Login}"/>
    </div>

</div>

The definition of openDialogFunc is given below:

function openDialogFunc() {
    $("<a />").attr({
        "href": "#register-dialog",
        "data-rel": "popup",
        "data-position-to": "window",
        "data-theme": "a"
    }).click();

}

When I click on the 'Register' button it registers the user and the openDialogFunc is called. However the jQuery popup is not displayed. Am I doing something silly here? (I am a newbie to Java/Web world).

Update:- I used component from primefaces (version 3.5) as per @BalusC's advice. But the dialog is again not displaying. I simply did the copy paste from the sample found in showcase. The browser log displayed an error message 'PF not defined'. I used the following code to launch the dialog:

<p:commandButton id="basic" value="Basic" onclick="PF('dlg1').show();" type="button" />

which doesn't work in 3.5. Its actually a 4.0 way to display the dialog. However using the following didn't work either

<p:commandButton id="basic" value="Basic" onclick="dlg1.show();" type="button" />

Anyhow, now I am using Growl component to display the notification.

I can see there is a Dialog Framework which can be used to launch an external page into a dialog from a bean. Is it possible to use the same framework to launch a or into the dialog dynamically?

Why don't you use a jQuery based JSF component library such as PrimeFaces? It has a `` component for the very purpose without the need that you've to write/compose all that HTML/JS boilerplate code every time. http://www.primefaces.org/showcase/ui/dialog.jsf — BalusC, Aug 29 '13 at 16:52
@BalusC That's really a wonderful piece of information. Please see my updated question. — A J Qarshi, Aug 30 '13 at 10:21
The showcase is currently running PF 4.0 snapshot which is currently still in alpha stage. You can find proper PF 3.5 examples in users guide: http://www.primefaces.org/documentation.html — BalusC, Aug 30 '13 at 12:05

score 2 · Accepted Answer · edited May 23 '17 at 12:23

Just use a jQuery based JSF component library such as PrimeFaces. It has a <p:dialog> component for the very purpose without the need that you've to write/compose all that HTML/JS boilerplate code every time.

The showcase showcases currently PrimeFaces 4.0 compatible code, here's the PrimeFaces 3.5 compatible markup (note the <p:dialog widgetVar>, this works also in PrimeFaces 4.0, but somehow they preferred to show how to use the new PF() function):

<h:form>
    ...
    <p:commandLink value="Register" action="#{user.register}" oncomplete="w_confirm.show()" />
</h:form>

<p:dialog widgetVar="w_confirm" header="Success">
    <h:form>
        <p>Your user account has now been created.</p>
        <p><p:commandButton value="Login" action="#{user.login}" oncomplete="w_confirm.hide()" /></p>
    </h:form>
</p:dialog>

Open JQuery dialog in JSF2 page

1 Answers1

See also: