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

Question

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

我试图通过这种方式获取它，但它没有进入if条件，这意味着元素的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 在 Web 服务器上运行并生成 HTML，然后发送到 Web 浏览器。 JavaScript/jQuery 在 Web 浏览器上运行，看不到任何 JSF 源代码，只能看到它的 HTML 输出。

在浏览器中打开页面，右键单击并查看源代码 ( or here on PrimeFaces showcase site )。您会看到实际的 <select>元素具有父元素的 ID <h:form>前面加上单词 _input后缀(因为 <p:selectOneMenu> 基本上生成 <div><ul><li> 来实现奇特的外观和感觉，这是普通 <select> 不可能实现的，因此它被隐藏了)。

因此，如果您为父表单指定一个固定的 ID(以便 JSF 不会自动生成 ID)，则以下 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']");

另请参阅:

• How to select JSF components using jQuery?

<小时/>

与具体问题无关，您还有另一个问题 <p:dialog> 。它包含另一个<h:form>因此，您实际上是在嵌套表单 illegal在 HTML 中!把整个<p:dialog> 在表单之外，如下所示:

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