How to pass backing bean value to JavaScript?

Question

I would like to read the backing bean value in JSF and then pass over to JavaScript, may I know how this can be done?

Backing bean sample code:

@ManagedBean(name="enquiry")
@SessionScoped
public class Enquiry {

  public boolean noQuery;

  /** getter and setter **/
}

In XHTML sample code, I would like pass the backing bean value and then pass into showNoQueryPrompt() like this:

<h:commandLink onClick="showNoQueryPrompt(#{enquiry.noQuery})">
</h:commandLink>

And then in JavaScript code, I can read the boolean value to determine whether I should prompt or not prompt. Here is the code:

<script ...>
   var showNoQueryPrompt(Boolean showPrompt) {

     if( showPrompt == "true" ) {
        alert('No query');
     }
   }
</script>

Solution 1

To the point, you need to understand that JSF merely produces HTML code and that JS is part of HTML. So all you need to do is to write JSF/EL code accordingly that it produces valid HTML/JS code. Indeed, using EL to inline bean properties in the generated JavaScript code like as in your attempt is one of the right ways.

Assuming that this is indeed the real code, you however made some syntax mistakes. The onClick attribute is invalid. It must be in all lowercase. Otherwise JSF simply won't render the attribute at all.

<h:commandLink value="link" onclick="showNoQueryPrompt(#{enquiry.noQuery})" />

JavaScript has no notion of strong typing. The Boolean type in function argument is invalid. Remove it. Otherwise you will face a nice JS syntax error (in browser's JS console).

function showNoQueryPrompt(showPrompt) {
   if (showPrompt) {
      alert('No query');
   }
}

Note that I expect that you understand that this runs before commandlink's own action is been invoked (you should now have understood; JSF generates HTML; rightclick page in browser and View Source to see it yourself). But you didn't cover that in your concrete question (even more, you didn't describe the concrete problem with the given code in the question at all), so I can't give an detailed answer on that.

Solution 2

You could try the approach from here

and save your bean field in:

<h:inputHidden id="hidden2" value="#{enquiry.noQuery}" />

then, call your method using the value of this field.