JSF2.0 - InputTextArea inside Dialog cannot be retrieved via Jquery during the dialog"s onShow event
I have the following dialog inside my .xhtml page.
<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>
The dialog is shown when a button is clicked. The fillTextArea javascript function is defined inside script tags at the head of the document.
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
}
What's the problem? Why can't I retrieve the input text area?
Instead of using the onShow event of the Dialog , I tried:
exampleDialog.show();
fillTextArea();
just in case. But this didn't work neither. I'm trying to set the contents of the inputTextArea .
Any help appreciated. Thanks.
jQuery works on the JSF-generated HTML DOM tree, not on the JSF source code. JSF components do not necessarily generate the same client ID (the HTML element ID) as you have specified in the component ID. They may be prepended with IDs of the parent NamingContainer components. The <h:form> and <p:tabView> are such components.
ReplyDeleteOpen the page in webbrowser, rightclick and View Source and locate the generated HTML code of the <p:inputTextarea>. It'll look something like this:
<textarea id="formId:tabViewId:textareaId">
You need to specify exactly this ID in the jQuery selector.
$("[id='formId:tabViewId:textareaId']");
See also:
How to refer to a JSF component Id in jquery?
How to select PrimeFaces UI or JSF components using jQuery?