How to embed and call a javascript script in a RichFaces/JSF page

Question

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

Community · Accepted Answer · 2017-05-23 10:29:03Z

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!

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Jun 4, 2010 at 11:47

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

6 Comments

volvox Over a year ago

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

Pointy Over a year ago

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.

BalusC Over a year ago

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. As to your overgeneralization of XHTML which I edited away, see this answer: What's the need for XHTML?

Pointy Over a year ago

@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.

BalusC Over a year ago

Fair enough. Sorry, just getting tired of seeing XHTML being overhyped/overgeneralized by wrong people :)

|

Collectives™ on Stack Overflow

How to embed and call a javascript script in a RichFaces/JSF page

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related