jQuery 脚本不是运行在 JSF 页面中使用 ui:composition

Question

我正在尝试将我的 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>

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

jQuery 脚本不是运行在 JSF 页面中使用 ui:composition

jQuery script not running in JSF page using ui:composition

html

jquery

jsf-2

我的jQuery:

这是我的 JSF 页面：

另请参阅：

jQuery 脚本不是 运行 在 JSF 页面中使用 ui:composition

jQuery script not running in JSF page using ui:composition

html

jquery

jsf-2

我的jQuery:

这是我的 JSF 页面：

另请参阅：

jQuery 脚本不是运行在 JSF 页面中使用 ui:composition