java - JSF2.0 - 在对话框的 onShow 事件期间无法通过 Jquery 检索对话框内的 InputTextArea

Question

我的 .xhtml 页面中有以下对话框。

<p:dialog widgetVar="exampleDialog" onShow="fillTextArea()" >
    <p:tabView id="tabView">
        <p:tab id="exampleTab" title="Example">
            <p:inputTextarea id="someInputTextArea" autoResize="false"
                value="" />
        </p:tab>
    </p:tabView>
</p:dialog>

单击按钮时显示对话框。 fillTextArea javascript 函数在文档头部的脚本标记内定义。

function fillTextArea() {
    console.log(jQuery("textarea[id='someInputTextArea']")); // logs empty array []
    console.log($("[id='someInputTextArea']")); // logs empty array []
    jQuery("textarea[id='someInputTextArea']").val('xxx'); // does nothing
}

有什么问题？为什么我无法检索输入文本区域？

我没有使用 Dialog 的 onShow 事件，而是尝试:

exampleDialog.show();
fillTextArea();

以防万一。但这也不起作用。我正在尝试设置 inputTextArea 的内容。

感谢任何帮助。谢谢。

Answer 1

jQuery 在 JSF 生成的 HTML DOM 树上工作，而不是在 JSF 源代码上工作。 JSF 组件不一定生成与您在组件 ID 中指定的相同的客户端 ID(HTML 元素 ID)。它们可能以父​​ ID 为前缀 NamingContainer 成分。 <h:form>和 <p:tabView>是这样的组件。

在网络浏览器中打开页面，右键单击并查看源代码 并找到生成的 HTML 代码 <p:inputTextarea> .它看起来像这样:

<textarea id="formId:tabViewId:textareaId">

您需要在 jQuery 选择器中准确地指定此 ID。

$("[id='formId:tabViewId:textareaId']");

另见:

• How to refer to a JSF component Id in jquery?
• How to select JSF components using jQuery?