Javascript error in XHTML page in JSF 2 -


i have following code in xhtml page in jsf 2. when page loads javascript error document.getelementbyid("country") null or not object. why happening?

<h:form>     <h:panelgrid columns="2">         selected country locale :          <h:inputtext  id="country" value="#{country.localecode}" size="20" />         select 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> 

it's not finding component. since <h:inputtext> inside of <h:form> id have following pattern formname:componentname. since did not specify id <h:form>, jsf generate 1 you. that's why seeing j_id1926454887_72d35e53:country j_id1926454887_72d35e53 form id. if want deal simpler id, should add id value <h:form>. example

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

the id <h:inputtext> form:country.

even simpler, add prependid = "false" form

<h:form prependid="false"> 

and id <h:inputtext> country.

how can id dynamically?

i'm going modify code achieve want (i'm thinking want disable input based on specific event). consider simpler example

<h:form>     <h:inputtext  id="country" value="#{country.localecode}" size="20" onclick="disableinputtext(this.form)" /> </h:form> 

here i'm attaching javascript function html dom event handler. in case, want input disabled when click on (hence onclick). i'm passing form reference in function. then, define javascript this.

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

we grab input in javascript corresponding id via object form , set disabled attribute true. (you can sort of view form object map).

also check link below more attributes of <h:inputtext> , different handlers can use (the ones on prefix).

inputtext tag attribute.

also, check out answer votes bigger picture on how ids generated , other ways on how can determined.

how can know id of jsf component can use in javascript


Comments

Popular posts from this blog

How to mention the localhost in android -

php - Calling a template part from a post -

c# - String.format() DateTime With Arabic culture -