How to include external javascript file in a facelet page?

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>

Daniel · Accepted Answer · 2012-05-17 05:28:33Z

3

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

answered May 17, 2012 at 5:28

Daniel

37.2k10 gold badges122 silver badges208 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Mark Estrada Over a year ago

Hi Daniel, Thanks to this but can you still help with my problem? I have updated my post.

Daniel Over a year ago

did my answer solved your original question ? about your new question you are no supposed to see your handleSaveNewMember code appended in to your button , its ok, it will be inside your js file... in the button you suppoed to see only the reference to the function name kust like you posted , you might need to click ctrl + F5 one time to refresh your js

Mark Estrada Over a year ago

Hi Daniel.. Sorry I am not sure if my question was really answered because my Dialog wasn't close when I clicked the button. Nothing is really happening. I am thinking that my code was not executed.

Daniel Over a year ago

for start write a simple js method closeDialog(){addMemberDlg.hide();} and call it from oncomplete="closeDialog()" ofcourse you need to place it in your js file...

Daniel Over a year ago

is it even being called ? closeDialog(){alert('hey')} you see the alert ?

|

Collectives™ on Stack Overflow

How to include external javascript file in a facelet page?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related