jQuery script not running in JSF page using ui:composition

Question

I'm trying to get my jQuery code to run in my JSF page which uses ui:composition. I've tried so many different things including putting in <head> tags, <h:head> tags, eventually I came across this answer and so tried using the solution there, but to no avail.

At the top of the script is an alert("ready") so I'll know that the script has loaded, but so far I've not gotten it to work. The jQuery code itself works fine (I've tested it in a JSFiddle and on a normal HTML page).

Any suggestions would be helpful!

My jQuery:

$(document).ready(function () {
    alert("ready");
    ...
    ...
});

This is my JSF page:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html"
                xmlns="http://www.w3.org/1999/xhtml"
                template="./_Template.xhtml">

    <ui:define name="script"><h:outputScript library="javascript" name="jquery-2.1.3.min.js" target="head" /> </ui:define>
    <ui:define name="script"><h:outputScript library="javascript" name="jquery-ui.min.js" target="head"/> </ui:define>
    <ui:define name="script"><h:outputScript library="javascript" name="1.js"/> </ui:define>

    <ui:define name="top">
        <h1>Weather App</h1>
    </ui:define>
    <ui:define name="left">
        <h3>Navigation</h3>
        ...
    </ui:define>
    <ui:define name="content">
        <form name="search_form" id="searchForm" method="GET" action="search_results.html">
            <label for="searchBox">Search</label>
            <input type="text" id="searchBox" name="searchString" />
            <button name="searchKeyword" id="searchKeyword">Submit</button>
        </form>      
    </ui:define>
</ui:composition>

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

You've there three <ui:define> with the same name. That's not right. Use one.

<ui:define name="script">
    <h:outputScript library="javascript" name="jquery-2.1.3.min.js" />
    <h:outputScript library="javascript" name="jquery-ui.min.js" />
    <h:outputScript library="javascript" name="1.js" />
</ui:define>

This assumes that you've an <ui:insert name="script"> inside <h:head>.

The answer you found makes use of JSF-feature to auto-relocate the script into the <h:head> via target="head". This way you can just put them anywhere in the composition. For example, inside <ui:define name="content">.

<ui:define name="content">
    <h:outputScript library="javascript" name="jquery-2.1.3.min.js" target="head" />
    <h:outputScript library="javascript" name="jquery-ui.min.js" target="head" />
    <h:outputScript library="javascript" name="1.js" target="head" />
    ...
</ui:define>

This way you don't need the <ui:insert name="script"> anymore.

jQuery script not running in JSF page using ui:composition

My jQuery:

This is my JSF page:

1 Answers1

See also: