Javascript does not work under JSF template

Question

I'm using JSF templates and Primefaces.

Javascript code does not seem to be working under ui:composition and ui:define tags. The following code is not hitting the loaded() method. This is the content.xhtml file

<h:head>
<script language="javascript">
    function loaded() {
        alert("Working!!");
    }
</script>
</h:head>

<ui:composition template="/template/template.xhtml">
<ui:define name="content">
<h:body style="width:100%;height:100%;" onload="loaded()">
     <p class="item">Random text</p>
</h:body>
</ui:define>
</ui:composition>

but when i remove the define and composition tags the loaded function is called. Any idea why this is happening ?

Here is the template file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">


<h:head>
<title><ui:insert name="title">Template</ui:insert></title>
</h:head>

<h:body>

<div id="header">
    <ui:insert name="header">
        <ui:include src="../menu.xhtml" />
    </ui:insert>
</div>


<div id="content">
    <ui:insert name="content">
        <ui:include src="../content.xhtml" />
    </ui:insert>
</div>

<div id="footer">
    <ui:insert name="footer">
        This is a footer
    </ui:insert>
</div>

Good idea :) ... Just checked and it looks like the loaded() method is not being added to the output html. — user438454534
– user438454534, Commented Jun 14, 2012 at 6:37

Community · Accepted Answer · 2017-05-23 12:00:12Z

14

Everything outside <ui:composition> is ignored during building the view. Also, redeclaring <h:body> once again is unnecessary. To use a script which runs during on page load, better use a <h:outputScript target="body">. This will be relocated to end of body and thus be invoked after the necessary HTML DOM elements are been built. This is also somewhat faster than an onload.

All with all, your entire content.xhtml must look like this:

<ui:composition template="/template/template.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
>
    <ui:define name="content">
        <h:outputScript target="body">
            alert("Working!!");
        </h:outputScript>

        <p class="item">Random text</p>
    </ui:define>
</ui:composition>

1 Comment

user438454534 Over a year ago

Awesome!! That worked. Thanks heaps BalusC ... You are a super hero here on Stackoverflow. Thanks again :)

Steve H. · Accepted Answer · 2012-06-14 05:46:32Z

1

You are passing "content" to the template. If your template does not include "content", it won't be including in the resulting HTML.

Post the template.xhtml and let's see...

answered Jun 14, 2012 at 5:46

Steve H.

6,9672 gold badges32 silver badges49 bronze badges

1 Comment

user438454534 Over a year ago

Steve I've edited the question and added the template.xhtml file

Collectives™ on Stack Overflow

Javascript does not work under JSF template

2 Answers 2

See also:

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

See also:

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related