使用primefaces中的javascript从selectOnemenu中获取选定值并打开一个对话框

Question

我们如何<p:selectOneMenu>使用JavaScript/jQuery 获取PrimeFaces的选定值？

我试图以这种方式得到它,但它不会进入条件,这意味着元素的ID不正确.

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

Answer 1

JSF在webserver上运行并生成HTML,并将其发送到webbrowser.JavaScript/jQuery在webbrowser上运行,并没有看到任何JSF源代码,只看到了它的HTML输出.

在浏览器中打开页面,右键单击并查看源代码(或在PrimeFaces展示站点上).你会看到实际的<select>元素有<h:form>前缀的父ID 和_input后缀这个词(因为它<p:selectOneMenu>基本上生成了一个<div><ul><li>实现花哨的look'n'feel,这是普通的<select>,因此它被隐藏了).

所以,如果你给父表单一个固定的ID(这样JSF不会自动生成一个),那么下面的JSF代码

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

将生成HTML <select>如下:

<select id="form:someSelect_input">

您需要使用完全相同的是ID,而不是抓住从DOM元素.

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

要么

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

也可以看看:

• 如何使用jQuery选择JSF组件？

与具体问题无关,你还有另外一个问题<p:dialog>.它包含另一个<h:form>,因此你有效地嵌套在HTML中非法的表单!把整个表格放在表格<p:dialog> 之外:

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

Answer 2

尝试改变

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

进入

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

编辑

您可以通过更改选择器来改进选择器

name$='someSelect_input'

进入

name='yourFormName\\:someSelect_input'