how will i get backing bean value in java script on click of command button

Question

Can you please help me out in doing this? I am trying to get value from backing bean in my javascript on click of the command button.

this is my jsf command button

   <h:commandButton id="me" value="test" action="#{ques.conversiontostring}"
         onclick="mystring()"/>

this my javascript function

   function mystring()
    {
    var mystring = window.document.getElementById("form:me").click(); 
    alert(mystring);

    }

my bean returns a string that i am storing in mystring variable, but when i alert i get null value. that would be great if someone helps in doing that. Thanks in advance.

Answer 1

You mean something like this?

<h:commandButton id="me" value="test" action="#{ques.conversiontostring}"
     onclick="myFunction('#{ques.mystring}')"/>

function myFunction(message)
{
  alert(message);
}

Answer 2

I understand that you want so show a string value which is been set by the action method? You can only show it once it has been completed. You need to realize that JSF and JS does not run in sync as you'd expect from the coding. JSF is basically a HTML code generator. JS only works on the current HTML DOM tree. You need to let JSF generate HTML code in such way that the JS code get executed once the HTML response arrives at the webbrowser.

Assuming that you have this JS:

function show(string) {
    alert(string);
}

And assuming that you have this bean:

private String message;

public void show() {
    message = "Hello!";
}

public String getMessage() {
    return message;
}

If you're using JSF 1.x, use the following approach:

<h:commandButton value="show" action="#{bean.show}" />
<h:panelGroup rendered="#{not empty bean.message}">
    <script>show('#{bean.message}');</script>
</h:panelGroup>

If you're using JSF 2.x which supports ajax, you could alternatively use the following approach:

<h:commandButton value="show" action="#{bean.show}">
    <f:ajax render="message" />
</h:commandButton>
<h:panelGroup id="message">
    <h:panelGroup rendered="#{not empty bean.message}">
        <script>show('#{bean.message}');</script>
    </h:panelGroup>
</h:panelGroup>