How to add different javascripts on a page when using ui:composition

Question

I am using a page with ui:composition use on it like this

<?xml version='1.0' encoding='UTF-8' ?>
<!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:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.prime.com.tr/ui" 
    xmlns:f="http://java.sun.com/jsf/core">

    <h:head>

        <title></title>

    </h:head>

    <h:body>

        <ui:composition template="./WEB-INF/templates/layout.xhtml">

            <ui:define name="title">#{faqAddUpdate.actionState} FAQ</ui:define>
            <ui:define name="content">

                <h:form id="faqAddUpdateForm" style="border-color: #000000;width: 960px;position: absolute;left: 150px;" prependId="false">
                ....
                ....

                </h:form>

            </ui:define>

        </ui:composition>

    </h:body>
</html>

My layout.xhtml look like this

<?xml version='1.0' encoding='UTF-8'?>
<!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:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html">

    <h:head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script type="textext/javascript" src="ckeditor/ckeditor.js" >
            <ui:insert name="script"></ui:insert>
        </script>

        <title>
            <ui:insert name="title">Login</ui:insert> 
        </title>

    </h:head>
    <h:body>
        <div id="top">
            <ui:insert name="top">
                <ui:include src="header.xhtml" id="header"/>
            </ui:insert>
        </div>
        <div>
            <div id="content">
                <ui:insert name="content"></ui:insert>
            </div>
        </div>
        <div id="bottom" style="position: absolute;top: 675px;width: 100%" align="center">
            <ui:insert name="bottom">
                <ui:include src="footer.xhtml" id="footer"/>
            </ui:insert>
        </div>
    </h:body>
</html>

on my page i am using something like this

<h:body>

    <ui:composition template="./WEB-INF/templates/layout.xhtml">
        <ui:define name="script"></ui:define>
        <ui:define name="title">#{faqAddUpdate.actionState} FAQ</ui:define>
        <ui:define name="content">
        ....
       </ui:define>

   </ui:composition>

This add javascript tag in my page head section.Now i want to ask if i want to add another .js file on my page. The i will have to define another ui:insert name="script" in my layout.xhtml page like this?

<script type="textext/javascript" src="js/1.js" >
        <ui:insert name="script"></ui:insert>
</script>

<script type="textext/javascript" src="js/2.js" >
        <ui:insert name="script"></ui:insert>
</script>

and so on. Or is there any trick that i define script tag in my layout.xhtml once and then on the basis of src attribute, i insert it on my ui:composition page?

Thanks

score 15 · Accepted Answer · answered Jan 25 '12 at 16:13

15

You do not have to do this using ui:inserts. Wherever you need to add a javascript file in your pages. Just add like this using resource API.

<h:outputScript library="javascript" name="1.js" target="head" />

For this create folder WebContent/resources/javascript and put that 1.js in javascript folder.

answered Jan 25 '12 at 16:13

Ravi Kadaboina

8,494
3
30
42

ya, but i am using ui:composition. And if i use this line in my page header tag, then ui:composition discard all the tags outside it. So this won't work in case of ui:composition. I have done it. I will have to use something like this in my layout page `` and then in my page inside ui:composition, i will ahve to use this ` `. This is right. – Basit Jan 26 '12 at 04:34
9

Just put that `` line inside ``. – BalusC Jan 27 '12 at 12:40
@BalusC Thanks buddy, your comment above just saved my afternoon. – cg. Jun 04 '13 at 14:30

score 1 · Answer 2 · answered Jan 26 '12 at 04:39

<h:head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>
        <ui:insert name="title">Login</ui:insert> 
    </title>

    <ui:insert name="script"></ui:insert>

</h:head>

<h:body>
    <div id="top">
        <ui:insert name="top">
            <ui:include src="header.xhtml" id="header"/>
        </ui:insert>
    </div>
    <div>
        <div id="content">
            <ui:insert name="content"></ui:insert>
        </div>
    </div>
    <div id="bottom" style="position: absolute;top: 675px;width: 100%" align="center">
        <ui:insert name="bottom">
            <ui:include src="footer.xhtml" id="footer"/>
        </ui:insert>
    </div>
</h:body>

and then in your page use something like this

<h:body>
    <ui:composition template="./WEB-INF/templates/Review_Template.xhtml">

        <ui:define name="title">FAQ Review</ui:define>

        <ui:define name="script"><h:outputScript library="Javascripts" name="jquery-1.7.1.js"/> </ui:define>
        <ui:define name="script"><h:outputScript library="Javascripts" name="1.js"/> </ui:define>
        <ui:define name="content">
            <h:form id="FaqGridForm" prependId="false" >
                ....
            </h:form>

        </ui:define>
    </ui:composition>
</h:body>

And you Javascripts folder should be inside, resources folder, as mentioned by Ravi in his answer :)

Thanks

How to add different javascripts on a page when using ui:composition

2 Answers2

Linked