Unable to understand how javascript document.getElementByd() working

[Muhammad Taha, geändert vor 11 Jahren.]

Hi all, when im trying to get <h:inputText id="field"> value in javascript using document.getElementById('field').value, im getting some "TypeError: a is null"
When i check with firebug id is converting to 'A3761:field', if I change in code accordingly, its working fine.

Im looking for any alternate method for this.....hardcoding A3461 every where is not looking good. below is my code

<h:body>
<form>
<h:inputText id="field" value="#{myMO.myfield}" />
<h:inputText id="field2" value="#{myMO.myfield}" />
<h:commandButton action="#{myControllerBean.myMethod()}" value="Submit" onclick="return myfunction();" />
</form>
<script type="text/javascript">
function myfunction(){
var myvar=document.getElementById('A3761:field');
var myvar2=document.getElementById('A3761:field2');
alert(myvar.value);
alert(myvar2.value);
return false;
}
</script>
</h:body>

Thanks,

[Ram A, geändert vor 11 Jahren.]

Hi Muhammad,

Can you try with JQuery to read the value from fields.
var result=$('#fieldid').val();

This may help you.

[Neil Griffin, geändert vor 11 Jahren.]

The value 'A3761' is the namespace prefix. It is put there by Liferay Faces Bridge in order to make sure that multiple JSF portlets on the same portal page have unique IDs for HTML elements.

You should be able to get the value dynamically with an EL expression like:

#{facesContext.externalContext.encodeNamespace('')}

Alternatively, you can set an EL variable like this:

<portlet:namespace var="portletNamespace" />

And then use it in an EL expression like this:

#{portletNamespace}

(Note: Don't include the "1" at the beginning of each line. That's just a feature of the forums here adding line numbers to code fragments)

[Muhammad Taha, geändert vor 11 Jahren.]

Thanks Ram, and Niel,

I can able to get value by using #{facesContext.externalContext.encodeNamespace('')}

var myvar=document.getElementById("#{facesContext.externalContext.encodeNamespace('')}:field");

Thanks

[Muhammad Taha, geändert vor 11 Jahren.]

Hi Niel.. This time similar issue with css...Im unable to apply styles based on Ids
I've my issue with relevant code posted in thread. below I mentioned URL.
How to print only portlet content

Thanks

[Neil Griffin, geändert vor 11 Jahren.]

You can use EL expressions like #{facesContext.externalContext.encodeNamespace('')} in CSS files if they are served up as JSF2 resources.

For example, in the jsf2-portlet demo, there is a file named styling.xhtml that has some markup like this:

<h:outputstylesheet library="example" name="example.css" />

And the actual files live inside the src/main/webapp/resources/example folder of the portlet source code.

[Muhammad Taha, geändert vor 11 Jahren.]

Im following the same approach to add external css,

I tried using #{facesContext.externalContext.encodeNamespace('')} for adding css to an Id.I don't know if would have put it wrongly. I tried in different ways..

1. ##{facesContext.externalContext.encodeNamespace('')}:section_to_print{
background-color: red;
}
Not working
2. #"#{facesContext.externalContext.encodeNamespace('')}":section_to_print{
background-color: red;
}
Not working
3. #A7687:section_to_print{
background-color: yellow;
}
Here I directly hardcoded namespace prefix But Not worked
4. After changing Id to class in .xhtml
.section_to_print{
background-color: yellow;
}
Its working

[Neil Griffin, geändert vor 11 Jahren.]

It has been my experience that accessing via class (rather than id) is always a nice way to do CSS.

If you need to try to get id working in the future, then please let me know -- the EL expression should have worked.