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

Answer 1

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.

Answer 2

<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