Javascript error in XHTML page in JSF 2

Question

I have the following code in an xhtml page in JSF 2. But when the page loads I get an javascript error that document.getElementById("country") is null or not an object. Why is this happening?

<h:form>
    <h:panelGrid columns="2">
        Selected country locale : 
        <h:inputText  id="country" value="#{country.localeCode}" size="20" />
        Select a country {method binding}: 
        <h:selectOneMenu value="#{country.localeCode}" onchange="submit()"
            valueChangeListener="#{country.countryLocaleCodeChanged}">
            <f:selectItems value="#{country.countryInMap}" />
        </h:selectOneMenu>
        <script>
            alert("hi");
            document.getElementById("country").disabled=true;
        </script>
    </h:panelGrid>
</h:form>

are you sure the page is rendering the input element correctly? and i don't know about javascript requesting elements before the page is finished loading. You might try jquery because the $(document).ready function is nice. — ChrisThompson, Jul 18 '13 at 14:58
When I viewed the page source I saw that the field is rendered as where j_id1926454887_72d35e53 is the id of the form .How can I get this id dynamically?This is not working as well document.getElementById("Form:country").disabled=true; — Ayan Biswas, Jul 18 '13 at 15:03
The id within a JSF page is not the same as the id of the rendered html element. the html id is often referred to as "Client ID". This will give you some more information on that: http://java.dzone.com/articles/jsf-20-clientid-jquery and http://illegalargumentexception.blogspot.co.at/2009/10/jsf-working-with-component-identifiers.html — Robert M., Jul 18 '13 at 15:26
possible duplicate of [Composite components & ID](http://stackoverflow.com/questions/10356993/composite-components-id) — Luiggi Mendoza, Jul 18 '13 at 16:33
I don't understand why this is downvoted. It's a valid question. — Andy, Jul 18 '13 at 17:02

score 0 · Answer 1 · edited May 23 '17 at 12:12

0

It's seems to be a naming issue. the id of the field is not rendered as country. i found a question that seems relevant. Composite components & ID

edited May 23 '17 at 12:12

Community

1
1

answered Jul 18 '13 at 15:15

ChrisThompson

1,998
12
17

Instead of posting an answer with the link of the possible duplicate question, just flag the question. I would recommend to delete this answer as well. – Luiggi Mendoza Jul 18 '13 at 16:34

score 0 · Accepted Answer · edited May 23 '17 at 10:32

It's not finding your component. Since your <h:inputText> is inside of an <h:form> the id will have the following pattern formName:componentName. Since you did not specify an id for <h:form>, JSF will generate one for you. That's why you are seeing j_id1926454887_72d35e53:country where j_id1926454887_72d35e53 is the form id. If you want to deal with simpler id, then you should add an id value to your <h:form>. For example

<h:form id="form">
    <h:inputText  id="country" value="#{country.localeCode}" size="20" /> 
</h:form>

The id for <h:inputText> will now be form:country.

Even simpler, you could simply add prependId = "false" to your form

<h:form prependId="false">

and now your id for <h:inputText> will simply be country.

How can I get this id dynamically?

I'm going to modify your code slightly to achieve what you want (I'm thinking that you want to disable the input based on a specific event). Consider this simpler example

<h:form>
    <h:inputText  id="country" value="#{country.localeCode}" size="20" onclick="disableInputText(this.form)" />
</h:form>

Here I'm attaching a javascript function to an HTML DOM Event handler. In this case, I want the input to be disabled when I click on it (hence onclick). I'm also passing the form as a reference in the function. Then, define your Javascript like this.

<script>
    function disableInputText(form) {
        form[form.id + ":country"].disabled = true;
    }
</script>

We simply grab the input in the javascript with the corresponding id via the object form and set its disabled attribute to true. (You can sort of view the form object as Map).

Also check the link below for more attributes of <h:inputText> and the different handlers you can use (the ones with on as prefix).

inputText Tag Attribute.

Also, check out the answer with the most votes to get a bigger picture on how ids are generated and other ways on how they can be determined.

How can I know the id of a JSF component so I can use in Javascript

@AyanBiswas Check out this answer. If you have any questions, feel free to drop me a comment. — Andy, Jul 18 '13 at 17:28

Javascript error in XHTML page in JSF 2

2 Answers2