4

I've been looking around for a method to embed and call javascript functions in JSF pages. I'm also using RichFaces.

To define the function, it appears I can do this in a cross-browser supported fashion:

        <a4j:outputPanel ajaxRendered="true">
        <f:verbatim>
            <script type="text/javascript">
                function datum() {
                    alert("hi");
                }
            </script>
        </f:verbatim>
    </a4j:outputPanel>

but I'm not sure how I can call this function when the page loads so the text it returns is embedded in an h:outputPanel. The plan is to have a js clock embedded in the page which is served to the client. Note I'm not using the body tag, I'm using facelets ui:composition, f:view (core) and RF RI rich:page.

Thanks

volvox
  • 3,014
  • 16
  • 51
  • 80

1 Answers1

8

Regardless of what sorts of server-side tags you're using, by the time your page gets to the browser that's all gone and it's just HTML. (At least, it had better be, or things won't work anyway.) What you need to do is arrange for your code to be called by a "load" event handler. There are various ways to do this, but the simplest would be this:

 <f:verbatim>
     <script type="text/javascript">
        window.onload = function() {
            alert("hi");
        }
    </script>
</f:verbatim>

Now as to initializing another part of the page, once again what matters is what ends up in the HTML. You'll want to arrange for there to be some sort of HTML container (a <div> or something, depending on your page design) and you'll want it to have a unique "id" attribute. Your Javascript can then use the "id" to find the element and set its contents:

    var elem = document.getElementById("whatever");
    elem.innerHTML = // ... whatever ;

You'd probably do that stuff inside the "load" function.

Also, if you're using Facelets instead of JSP, which is a XML based view technlogy, you will need to add the XML CDATA section delimiters if your JavaScript contains comments // or literals such as <, >, &&, etc. Here's the example with the XML CDATA delimiters:

 <f:verbatim>
     <script type="text/javascript">
     //<![CDATA[
        //Comments won't show error now.
        window.onload = function() {
            alert("hi");
        }
    //]]>
    </script>
</f:verbatim>

You can see a thorough explanation of when to use CDATA here. You do not need those if you're creating HTML5 pages.

Happy coding!

Community
  • 1
  • 1
Pointy
  • 405,095
  • 59
  • 585
  • 614
  • I realised about the server tags but wanted to be unambiguous regarding then calling this function within the jsf code. I'd not realised I could use window.onload within the js itself. Thanks – volvox Jun 04 '10 at 12:08
  • Oh, also, a warning (probably obvious) - as soon as you need *two* things to be called at "load" time (esp. when they're in unrelated server-side code units), you're going to want a fancier setup for managing those handler functions. That's where the various Javascript frameworks start to be a big help. – Pointy Jun 04 '10 at 12:21
  • As to Facelets, see also this related answer: [Error Parsing /page.xhtml: The content of elements must consist of well-formed character data or markup](http://stackoverflow.com/a/4338816). As to your overgeneralization of XHTML which I edited away, see this answer: [What's the need for XHTML?](http://stackoverflow.com/a/3194601) – BalusC Apr 11 '13 at 16:32
  • @BalusC well I'm flattered that you'd honor my "shudder" as being significant enough to qualify as an "overgeneralization" :-) I won't deny the fact that a shudder is my actual response when thinking about XHTML, though I completely agree with the points you made in that other answer. – Pointy Apr 11 '13 at 16:39
  • Fair enough. Sorry, just getting tired of seeing XHTML being overhyped/overgeneralized by wrong people :) – BalusC Apr 11 '13 at 16:44
  • I've tried surrounding the script with a CDATA section. But if I do so, the CDATA is also rendered to the HTML output. Without it, I get some errors because the script contains < and >. I'm using JSF 2, myfaces implementation. – Markus N. May 12 '16 at 11:09