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

【问题标题】：JSF2.0 - InputTextArea inside Dialog cannot be retrieved via Jquery during the dialog's onShow eventJSF2.0 - 在对话框的 onShow 事件期间，无法通过 Jquery 检索对话框内的 InputTextArea
【发布时间】：2012-01-18 14:34:40
【问题描述】：

我的 .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 的内容。

任何帮助表示赞赏。谢谢。

【问题讨论】：

当您在 Web 浏览器中查看 HTML 源代码时，您的 textarea 的 id 属性是什么？
它是tabView:headCodeTextArea_input。但这并不意味着我必须使用如此丑陋的语法来访问它，不是吗？
当我使用该 ID 访问时它可以工作。但是没有其他方法可以解决这个问题吗？谢谢顺便说一句。

标签： java jquery jsf jakarta-ee primefaces

【解决方案1】：

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

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

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

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

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

另见：

【讨论】：

感谢 BalusC，这行得通。一个简单的问题，假设我有widgetVar="xxx"，我可以将其称为xxx.val()吗？
PF Widget 对象不是直接的 jQuery 对象。然而，它们有一个 .jq 属性，它返回包装好的 jQuery 对象。所以xxx.jq.val() 应该这样做。另一种方法是根据xxx.jqId:$(xxx.jqId).val() 获得的 ID 重新创建 jQuery 对象。这样，元素将在 jQuery 上下文而不是 PF Widget 上下文中重新创建。我经历过 xxx.jq.foo() 对于某些 jQuery 函数失败，因为有关父母/孩子的信息不是最新的。