CODEWITHSUNDEEP
jqueryhtmljsf-2
DinosaurHunter
DinosaurHunter

Reputation: 692

jQuery script not running in JSF page using ui:composition

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>

Upvotes: 0

Views: 2410

Answers (1)

BalusC
BalusC

Reputation: 1109292

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.

See also:

Unrelated to the concrete problem, the library="javascript" is a red alarm. Carefully read What is the JSF resource library for and how should it be used? and act accordingly.

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

Upvotes: 1

Related Questions