CODEWITHSUNDEEP
javascriptajaxjsf-2jquery-selectorsprimefaces
Java
Java

Reputation: 2489

get selected value from selectOnemenu using javascript in primefaces and open a dialog box

How can we get the selected value of PrimeFaces <p:selectOneMenu> using JavaScript/jQuery?

I am trying to get it this way, but it does not go inside if condition, which means that the ID of the element is not correct.

<h:head> 
    <script> 
        function showDialog() { 
            alert("insdie function"); 
            if($('#someSelect').val() == 'India') { 
                dlg.show(); 
                alert("after function"); 
            } 
            alert("outside function"); 
        }   
    </script> 
</h:head> 
<h:body> 
    <h:form> 
        <p:panel> 
            <h:panelGrid columns="2"> 
                <p:selectOneMenu 
                    id="someSelect" 
                    value="#{testController.countryName}" 
                    <f:selectItem itemLabel="Select One" itemValue="" /> 
                    <f:selectItems value="#{addPatientProfileBB.patStatusSelect}" 
                        itemLabel="#{testController.countryName}" 
                        itemValue="#{testController.countryNameId}" /> 
                    <p:ajax process="someSelect" update="dialog" oncomplete="showDialog()"/> 
                </p:selectOneMenu> 
            </h:panelGrid> 

            <p:dialog id="dialog" header="Login" widgetVar="dlg"> 
                <h:form> 
                    <h:panelGrid columns="2" cellpadding="5"> 
                        <h:outputLabel for="username" value="Username:" /> 
                        <p:inputText id="username" required="true" label="username" /> 
                    </h:panelGrid> 
                </h:form> 
            </p:dialog> 
        </p:panel>  
    </h:form> 
</h:body>

Upvotes: 0

Views: 15717

Answers (3)

Cristian Casta&#241;o
Cristian Casta&#241;o

Reputation: 1

I my friends. i found the following solution.

<h:head> 
    <script> 
        function showDialog() {
            alert(PF('selectWV').getSelectedValue());
            if (PF('selectWV').getSelectedValue() == "b") {
                PF('buttonWV').jq.show();
            } else {
                PF('buttonWV').jq.hide();
            }
        }  
    </script> 
</h:head> 
<h:body> 
    <h:form> 
        <p:panel> 
            <h:panelGrid columns="2"> 
                <h:form>
            <p:selectOneMenu style="width:150px" id="id" widgetVar="selectWV">  
                <f:selectItem itemLabel="Select" itemValue="a"></f:selectItem>
                <f:selectItem itemLabel="Other" itemValue="b"></f:selectItem>
                <p:ajax process="id" update="dos" oncomplete="showDialog()"/>
            </p:selectOneMenu>
            <p:commandButton value="Register" widgetVar="buttonWV"
                style="display: none" />
        </h:form>
            </h:panelGrid> 
        </p:panel>  
    </h:form> 
</h:body>

Upvotes: 0

Daniel
Daniel

Reputation: 37051

try changing 

if($('#someSelect').val() == 'India') {

into

if($("select[name$='someSelect_input'] option:selected").val() == 'India') {

EDIT

you can improve the selector by changing 

name$='someSelect_input'

into

name='yourFormName\\:someSelect_input'

Upvotes: 5

BalusC
BalusC

Reputation: 1108537

JSF runs on webserver and generates HTML which get sent to webbrowser. JavaScript/jQuery runs on webbrowser and doesn't see anything of the JSF source code, but only its HTML output.

Open the page in browser, rightclick and View Source (or here on PrimeFaces showcase site). You'll see that the actual <select> element has the ID of the parent <h:form> prepended and the word _input suffixed (because the <p:selectOneMenu> basically generates a <div><ul><li> to achieve the fancy look'n'feel which isn't possible with a plain <select>, thus it's been hidden away).

So, if you give the parent form a fixed ID (so that JSF doesn't autogenerate one), then the following JSF code

<h:form id="form">
    <p:selectOneMenu id="someSelect" ...>

will generate the HTML <select> as follows:

<select id="form:someSelect_input">

You need to use exactly that ID instead to grab the element from DOM.

$("#form\\:someSelect_input");

or

$("[id='form:someSelect_input']");

See also:

Unrelated to the concrete problem, you've there another problem with that <p:dialog>. It contains another <h:form> and thus you're effectively nesting forms which is illegal in HTML! Put that entire <p:dialog> outside the form like so:

<h:form>
    <p:selectOneMenu ... />
</h:form>
<p:dialog>
    <h:form>
        ...
    </h:form>
</p:dialog>

Upvotes: 6

Related Questions