CODEWITHSUNDEEP
javascriptjqueryjsf-2jquery-selectorsprimefaces
Java
Java

Reputation: 2489

Open a dialog box in same window on selectOneMenu change

I have a jsf page where I have a selectOneMenu and , I want to open a dialog box on selectOneMenu changes.

As a example if user selects a value ="passive" from jsf selectOneMenu it should open a dialog box or a light box on same page where I want to display a small jsf form like as here done.(please click on that small image(yes, like this dialog box I want to open after selecting particular value in selectOneMenu) ) http://www.primefaces.org/showcase-labs/ui/dialogLogin.jsf

and I also want save that submitted data in my backing bean somewhere so I can store it in to database later.

I dont know how to open a dialog box or light box from backing bean in same window,as we will identify value change using valueChangeListener event or by using ajax event.

I am able to identify which value is selected from selectOneMenu(DropdownMenu), but dont know how to open a dialog box on selecting particular value.

<h:outputLabel
            value="* Country: "/>
        <h:selectOneMenu
            id="someSelect"
            value="#{testController.countryName}"
            required="true">
            <f:selectItem
                itemLabel="Select Country"
                itemValue=""/>
            <f:selectItems
                value="#{testController.countryNamesSelectItems}"/>
             </h:selectOneMenu>

Supoose we have 2 options in selectItems as India and Austrlia, then If a user choose India a dialog box should open on same page where a user need to fill some information and need to submit if he is from india (like here in example http://www.primefaces.org/showcase-labs/ui/dialogLogin.jsf (please click on that small image(yes, like this dialog box I want to open after selecting particular value in selectOneMenu) )user will put his username and password and submits data)

Hope this helps

how can we check in primefaces , selected value of selectOneMenu using java script(jquery) like done here for richfaces t:selectOneMenu how to get selected value using java script??

Upvotes: 3

Views: 4273

Answers (1)

Matt Handy
Matt Handy

Reputation: 30025

You could use the onchange attribute of h:selectOneMenu to open the dialog:

 <h:selectOneMenu
        id="someSelect"
        value="#{testController.countryName}"
        required="true"
        onchange="dlg.show()">

With dlg as value of the widgetVar attribute of the p:dialog. This will open the dialog before the server is hit.

If you want to open the dialog after completion of an ajax request you can use p:ajax with the oncomplete attribute:

<p:ajax update=".." process=".." oncomplete="dlg.show()"/>

Or if you want to make opening the dialog dependent on the selected value you could use a wrapper function:

function showDialog() {
 if($('#IdOfYourSelectOneMenu').val() == 'India') {
   dlg.show();
 }
}

with:

<p:ajax update=".." process=".." oncomplete="showDialog()"/>

Upvotes: 5

Related Questions