無法從.jsp頁調用另一個文件中的jQuery函數

Question

我正在構建一個Java Web應用程序，以學習如何使用servlet和jsp。

我試圖將一些jQuery函數放入.js文件中，並將該文件包含在我的jsp頁面中並調用這些函數，但是我無法使其正常工作。

我正在使用的文件：

web > js > myFunctions.js
web > WEB-INF > views > _header.jsp
web > WEB-INF > views > homeview.jsp

myFunction.js內容：

function hideButtons(userSession) {
    alert("hello");

// HIDE BUTTONS WHEN NO USER IS LOGGED IN
    if (userSession === "") {
        $('#logoutBtn').hide();
        $('#productBtn').hide();
        $('#acctBtn').hide();
    }

// HIDE BUTTONS WHEN USER IS LOGGED IN
    if (userSession !== "") {
        $('#loginBtn').hide();
        $('#loginForm').hide();
    }
}

_header.jsp內容：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="../../js/myFunctions.js"></script>

<div style="background: #E0E0E0; height: 55px; padding: 5px;">
     
    <div style="text-align: center;">

        <div id="homeBtn" style="display: inline; padding-right: 10px;">
            <a href="${pageContext.request.contextPath}/">Home</a>
        </div>
        <div id="productBtn" style="display: inline; padding-right: 10px;">
            <a href="${pageContext.request.contextPath}/productList">Product List</a>
        </div>
        <div id="acctBtn" style="display: inline; padding-right: 10px;">
            <a href="${pageContext.request.contextPath}/userInfo">My Account</a>
        </div>
        <div id="logoutBtn" style="display: inline; padding-right: 10px;">
            <a href="${pageContext.request.contextPath}/logout">Logout</a>
        </div>

    </div>

</div>

<script type="text/javascript">

    $(document).ready(function () {

        hideButtons('${loggedInUser}');

    });

</script>

homeView.jsp內容：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title> Home Page </title>
    </head>

    <body>
        <jsp:include page="_header.jsp"></jsp:include>

        <div style="text-align: center">
            <h3> Home Page </h3>
            Welcome to the Home Page of my sample java web application.
        </div>

        <div>
            <b>It includes the following functions:</b>
            <ul>
                <li>Login</li>
                <li>Storing user information in cookies</li>
                <li>Product List</li>
                <li>Create Product</li>
                <li>Edit Product</li>
                <li>Delete Product</li>
            </ul>
        </div>

        <div id="loginForm">
            <hr>
            <jsp:include page="_login.jsp"></jsp:include>
        </div>

        <jsp:include page="_footer.jsp"></jsp:include>
    </body>
</html>

我的想法是，由於_header.jsp將包含在我的所有網頁中，因此我將在其中調用一些函數，並將它們應用於所有這些網頁。

如果我從myFunctions.js取出jQuery並將其直接放入_header.jsp一切都將按照我的計划工作。 但是由於某種原因，我無法調用外部.js文件中的函數。

我有做錯或遺漏的事情嗎？

UPDATE

原來我對.js資源的路徑有問題。 我在給它

<script type="text/javascript" src="/../../js/myFunctions.js"></script>

_header.jsp頁面位於WEB-INF -> views _header.jsp WEB-INF -> views而我的js文件夾位於WEB-INF外部，因此我認為告訴上兩個目錄將可以找到它。

經過猜測和說

<script type="text/javascript" src="/myApp/js/myFunctions.js"></script>

它找到了路徑並正確加載了資源。 但是我仍然不確定為什么我第一次得到它是不正確的並且沒有用。 我以前曾經在應用程序中看到過這種方法。

我是否缺少某種映射？ 像在web.xml聲明js文件夾的路徑一樣？

Answer 1

原來的答案是因為在IntelliJ的Tomcat配置中，我為應用程序部署提供了/myApp的上下文路徑，這使我感到困惑。

刪除后，我可以說/../../js/myFunctions.js ，它正確找到了該文件。

無法從.jsp頁調用另一個文件中的jQuery函數

問題描述

1 個解決方案

解決方案1
0 2017-06-01 17:51:59

無法從.jsp頁調用另一個文件中的jQuery函數

問題描述

1 個解決方案

解決方案1 0 2017-06-01 17:51:59

解決方案1
0 2017-06-01 17:51:59