JSF2.0 - InputTextArea inside Dialog cannot be retrieved via Jquery during the dialog's onShow event

Question

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.

What is the id attribute for your textarea set to when you view HTML source in your web browser? — planetjones, Jan 18 '12 at 14:40
It's `tabView:headCodeTextArea_input`. But that doesn't mean I have to access it with such ugly syntax, does it? — Murat Derya Özen, Jan 18 '12 at 14:44
Well it works when I access with that id. But isn't there another way to get around this? Thanks btw. — Murat Derya Özen, Jan 18 '12 at 14:46

score 3 · Accepted Answer · edited May 23 '17 at 11:55

3

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.

Open 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']");

Thanks BalusC, this works. A quick question, can I instead refer to it as `xxx.val()` assuming I have `widgetVar="xxx"`? – Murat Derya Özen Jan 18 '12 at 16:17
1

PF Widget objects are not directly jQuery objects. They have however a `.jq` property which returns the wrapped jQuery object. So `xxx.jq.val()` should do. An alternative is to recreate the jQuery object based on the ID as obtained by `xxx.jqId`: `$(xxx.jqId).val()`. This way the element will be recreated in jQuery context instead of PF Widget context. I've experienced that `xxx.jq.foo()` fails for some jQuery functions because information about parents/childs is not up to date. – BalusC Jan 18 '12 at 16:19

JSF2.0 - InputTextArea inside Dialog cannot be retrieved via Jquery during the dialog's onShow event

1 Answers1

See also: