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>

这假设您<ui:insert name="script">内有<h:head>。

您找到的答案使用JSF功能通过<h:head>将脚本自动重定位到target="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脚本没有使用ui：composition在JSF页面中运行

我的jQuery：

这是我的JSF页面：

1 个答案:

另见：