Open a dialog box in same window on selectOneMenu change

javascript, jquery, jquery-selectors, jsf-2, primefaces

Solution

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()"/>

Problem

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??

Original source