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.

mrembisz · Accepted Answer · 2012-01-10 09:22:30Z

1

You mean something like this?

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

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

edited Jan 10, 2012 at 9:22

answered Jan 10, 2012 at 8:56

mrembisz

12.9k7 gold badges38 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mrembisz Over a year ago

@user1101422 Make sure apostrophes are present around EL expression passed as function argument.

BalusC · Accepted Answer · 2012-01-10 12:30:57Z

1

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>

answered Jan 10, 2012 at 12:30

BalusC

1.1m377 gold badges3.7k silver badges3.6k bronze badges

3 Comments

Fuzzy Analysis Over a year ago

I can't get the above solution to work in JSF 2.2 :(

BalusC Over a year ago

@fuzzyanalysis: JSF 2.x solution works for me on JSF 2.2 too.

Fuzzy Analysis Over a year ago

Thanks BalusC. I got your solution working after all. It's just a matter of getting the order of events in which javascript <script> blocks work with Primefaces components correct, as you mentioned.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related