Thursday April 14, 2005

In one of my recent blogs I talked about using JavaScript in your page to do client-side textfield input masking. The JavaScript in that example was completely static - the JavaScript code itself is entered into the page (or a separate JavaScript file) and is not affected by anything happening on the server.

But what if you want to modify your JavaScript to use data from some computation you've performed in your Java code on the server? That's essentially what somebody asked on the forum the other day:

How can my JavaScript reference a field in my Java page bean?

One way to do this would be to use a InputHidden component. In your Java code, you can set the value of the InputHidden, and then you can reference this value from JavaScript. Specifically, if you drop an InputHidden on your page, such that its id is hiddenField1, then your JSP can look like this:

  ...
  <h:inputHidden binding="#{Page1.hiddenField1}" id="hiddenField1"/>
  <script>
     document.write("Message = " + document.getElementById("form1:hiddenField1").value);
  </script>
  ...

   ...
   hiddenField1.setValue("Hello World");
   ...

However, there's an even simpler way, using the Output Text component. Normally, if you set the value of an Output Text component to Hello <b>World<b> then the component will display exactly that value to the user. But the Output Text has an "Escape" property which is normally set to true. This is what is ensuring that the < in the text is properly escaped to the html entity for the less than sign, &lt;. You can however turn off the Escape property, and pass through HTML directly to your page!! If you do that, your output text will display the rendered HTML instead: "Hello World".

Thus, we can create the JavaScript code itself on the server and send it to the page by just binding an output text to a property which returns javascript, and turning off escape. Or better yet, keep the JavaScript mostly in the JSP and reference the data within the script string using one or more value binding expressions. To do this, first create a property in your Page, such as foo, which returns the data you want to insert into your JavaScript:

    public String getFoo() {
       return "Hello World";
    }

<script>document.write("Message: #{Page1.foo}");</script>

More on this shortly.