how to use javascript to get jsf h:outputText value?

Question

I have a button has action which can set myBackingBean.myString, and onclick event calls js method to alert that value. I just want to get the value of myString from backing bean by using javascript.

I have a hidden output which has value from backing bean:

h:outputText id="myOutput" rendered="false" value="#{myBackingBean.myString}" 

then I need to alert this value in javascript fxn which triggered by a button:

function myFunction() {

var outPut= document.getElementById("myForm:myOutput").value;

...

}

but i got Object required error. How can i fix this? thanks in advance.

Answer 1

Make you sure that the h:outputText is rendered (rendered="false" could just not add it to the DOM. If it does not render, it can't be accessed. If you need it hidden, use h:inputHidden instead).

Then make sure that it renders an HTML tag as or acting like a container with the id attribute as "myForm:myOutput".

Also, the .value javascript accesor is used for input tags, so use inerHTML instead.

Answer 2

You need not always to have a hidden field to access the Bean Property. You can do it as below.

<h:commandButton value="Show" onclick="alert('#{myBackingBean.myString}');"/>

But if you want to change the value of 'myString' when you click the button and then you want to display the new value you should use a <a4j:commandButton/> and it's onComplete attribute as below.

<a4j:commandButton value="Change" action="#{myBackingBean.changeString()}" oncomplete="alert('#{myBackingBean.myString}');" />