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"
".dtd">
<html xmlns=""
xmlns:h=""
xmlns:f=""
xmlns:ui=""
xmlns:p="">
<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>
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>
Share Improve this question edited Jun 14, 2012 at 13:00 BalusC 1.1m376 gold badges3.6k silver badges3.6k bronze badges asked Jun 14, 2012 at 5:43 user438454534user438454534 3,6898 gold badges38 silver badges58 bronze badges 2
- See the difference in generated HTML in both cases – Jigar Joshi Commented Jun 14, 2012 at 5:45
- Good idea :) ... Just checked and it looks like the loaded() method is not being added to the output html. – user438454534 Commented Jun 14, 2012 at 6:37
2 Answers
Reset to default 14Everything 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?
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...