Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Javascript does not work under JSF template

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>

like image 448
user794783 Avatar asked Jun 14 '12 05:06

user794783


2 Answers

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>

See also:

  • How to include another XHTML in XHTML using JSF 2.0 Facelets?
like image 101
BalusC Avatar answered Oct 13 '22 19:10

BalusC


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

like image 34
Steve H. Avatar answered Oct 13 '22 18:10

Steve H.