Uncaught ReferenceError: $ is not defined. (jQuery, javascript)

Question

I know that "Uncaught ReferenceError: $ is not defined" is a common problem. But I have no idea where my code is wrong. I googled but no solution could solve this. Thanks in advance!

错误截图

My code is below.

Because my code is way too lengthy, so I divided it into 3 jsp files: list.jsp, authorModals.jsp, listAuthor.jsp. I attach my code here, but I have deleted some unrelated code to make it short.

list.jsp:

<!DOCTYPE html>
<html lang="en">

<head>

<title>Administrator</title>

<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="../css/bootstrap.min.css" rel="stylesheet">

<!-- Custom CSS -->
<link href="../css/freelancer.css" rel="stylesheet">

<!-- Custom Fonts -->
<link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet"
    type="../text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700"
    rel="stylesheet" type="../text/css">
<link
    href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic"
    rel="stylesheet" type="../text/css">

</head>

<body id="page-top" class="index">

    <!-- Author Modals -->
    <%@include file="authorModals.jsp"%>               <--! Links to authorModals.jsp-->

    <!-- jQuery -->
    <script src="../js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script
        src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    <script src="../js/classie.js"></script>
    <script src="../js/cbpAnimatedHeader.js"></script>

    <!-- Contact Form JavaScript -->
    <script src="../js/jqBootstrapValidation.js"></script>
    <script src="../js/contact_me.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../js/freelancer.js"></script>

</body>

</html>

authorModals.jsp:

<!-- Author Modals -->

<!-- unrelated code here -->

<!-- List Author -->
<%@include file="listAuthor.jsp"%>                 <--! Links to listAuthor.jsp-->

listAuthor.jsp:

<table class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Update</th>
            <th>Delete</th>
        </tr>
    </thead>
    <tbody id="authorData">
    </tbody>
</table>


<script id="entry-template" type="text/x-handlebars-template">
      <tr>
        <td>{{authorId}}</td>
        <td>{{authorName}}</td>
        <td>{{authorId}}</td>
        <td>{{authorName}}</td>
      </tr>
    </script>

<script>
        var source = $("#entry-template").html();      <!-- My code stops here -->
        var template = Handlebars.compile(source);

        var dataString;
        $.ajax({
            method : "POST",
            url : "../listAuthor"
        }).done(function(data) {
            data = $.parseJSON(data);
            $.each(data, function(i, item) {
                var html = template(item);
                dataString += html;
            });
            $("#authorData").html(dataString);
        });

        function pageAuthor(page) {
            dataString = "";
            $.ajax({
                method : "POST",
                url : "../listAuthor",
                data : {
                    pageNo : page
                }
            }).done(function(data) {
                data = $.parseJSON(data);
                $.each(data, function(i, item) {
                    var html = template(item);
                    dataString += html;
                });
                $("#authorData").html(dataString);
            });

        }
    </script>

Answer 1

Update your code to below and see,

Few things:

The order in which you load your scripts is important ,

Make sure you load jQuery before any other script

The below code will ensure that your code is being loaded after jQuery has been initialized.

jQuery(document).ready(function($) {
    var source = $("#entry-template").html();
    var template = Handlebars.compile(source);

    var dataString;
    $.ajax({
        method: "POST",
        url: "../listAuthor"
    }).done(function(data) {
        data = $.parseJSON(data);
        $.each(data, function(i, item) {
            var html = template(item);
            dataString += html;
        });
        $("#authorData").html(dataString);
    });

    function pageAuthor(page) {
        dataString = "";
        $.ajax({
            method: "POST",
            url: "../listAuthor",
            data: {
                pageNo: page
            }
        }).done(function(data) {
            data = $.parseJSON(data);
            $.each(data, function(i, item) {
                var html = template(item);
                dataString += html;
            });
            $("#authorData").html(dataString);
        });

    }

});

Read more information about document ready

Uncaught ReferenceError: $ is not defined. (jQuery, javascript)

Question

1 answers

solution1
1 ACCPTED 2015-10-10 09:00:23

Uncaught ReferenceError: $ is not defined. (jQuery, javascript)

Question

1 answers

solution1 1 ACCPTED 2015-10-10 09:00:23

solution1
1 ACCPTED 2015-10-10 09:00:23