Question

In a Facelet page that uses a Facelet Template like this:

<h:head>
    <h:outputScript name="custom.js" library="javascript" target="head"/>
</h:head>
<ui:composition template="../../WEB-INF/Template.xhtml">

</ui:composition>

How do you include a custom javascript? In the code above my custom.js is ignored because
of the ui:composition facelet tag.

I dont want to mess my page by putting my javascript in it so I am externalizing it in my resources
folder.

But how do I achieve my goal?

UPDATE:

I basically have this button and I wanted to add custom javascript on the oncomplete event of my primefaces button.

<p:commandButton value="Save"
        actionListener="#{memberManagedBean.save}"
        oncomplete="handleSaveNewMember(xhr, status, args)"
        update=":memberListForm:membersTable"
        process="@form" />

But instead of putting my code to it, I have externalize it to my custom.js

function handleSaveNewMember(xhr, status, args) {
    /*More Code*/
    addMemberDlg.hide();
}

But looking at the generated HTML for my button, my custom javascript codes are not included and only the function name is added.

<button id="createupdateform:j_idt18" oncomplete:function(xhr, status, args){handleSaveNewMember(xhr, status, args);}});return false;" type="submit"><span class="ui-button-text">Save</span></button>

Why do you think this is so?

UPDATE 2

You should insert the script inside the ui:define facelet tag not inside the ui:composition.

<ui:composition template="../../WEB-INF/Template.xhtml">
    <ui:define name="content">
        <h:outputScript name="showmembers.js" library="javascript" target="head"/>
    </ui:define>
</ui:composition>

Answer 1

You can place it inside your <ui:composition

<ui:composition template="../../WEB-INF/Template.xhtml">
    <h:outputScript name="custom.js" library="javascript" target="head"/>
</ui:composition>

or place <h:outputScript inside your Template.xhtml

anyway the <h:head> better be placed in your Template.xhtml only…