使用 ui:composition 的 jQuery 脚本未在 JSF 页面中运行答案

【问题标题】：jQuery script not running in JSF page using ui:composition使用 ui:composition 的 jQuery 脚本未在 JSF 页面中运行
【发布时间】：2015-05-16 01:22:33
【问题描述】：

我正在尝试让我的 jQuery 代码在我的使用 ui:composition 的 JSF 页面中运行。我尝试了很多不同的方法，包括添加<head> 标签、<h:head> 标签，最终我遇到了this answer，因此尝试使用那里的解决方案，但无济于事。

脚本顶部是alert("ready")，所以我知道脚本已经加载，但到目前为止我还没有让它工作。 jQuery 代码本身运行良好（我已经在 JSFiddle 和普通 HTML 页面上对其进行了测试）。

任何建议都会有所帮助！

我的 jQuery：

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

这是我的 JSF 页面：

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

【问题讨论】：

标签： jquery html jsf-2

【解决方案1】：

您有三个<ui:define> 和相同的name。那是不对的。使用一个。

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

这假设您在<h:head> 中有一个<ui:insert name="script">。

您找到的答案利用 JSF 功能通过 target="head" 将脚本自动重定位到 <h:head>。这样，您就可以将它们放在构图中的任何位置。例如，在<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>

这样你就不再需要<ui:insert name="script">了。

另见：

How to reference CSS / JS / image resource in Facelets template?

与具体问题无关，library="javascript" 是红色警报。仔细阅读What is the JSF resource library for and how should it be used? 并采取相应措施。

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

【讨论】：