CODEWITHSUNDEEP
jquery
Jonathan Kittell
Jonathan Kittell

Reputation: 7503

Uncaught ReferenceError: $ is not defined although jquery is loaded

I have some javascript on an .aspx page however it appears that jquery is not defined even though the google chrome page inspector is loading jquery. The scripts are loaded through a bundle config.

Bundle Config

bundles.Add(new ScriptBundle("~/bundles/allscripts").Include(
            "~/Scripts/jquery-{version}.js",
            "~/Scripts/jquery-migrate-{version}.js",
            "~/Scripts/jquery-ui-{version}.js",
            "~/Scripts/Common.js",
            "~/Scripts/knockout-{version}.js",
            "~/Scripts/knockout.mapping-latest.js",
            "~/Scripts/knockout-ext.js",
            "~/Scripts/jquery.maskedinput.js",
            "~/Includes/Lightbox/lightbox.js",
            "~/Scripts/scrollTo.js",
            "~/Scripts/modernizr-{version}.js",
            "~/Scripts/Watermark.js",
            "~/Scripts/jquery.validate.js",
            "~/Scripts/json2.js",
            "~/Scripts/jquery.autosave.js",
            "~/Scripts/bootstrap.js",
            "~/Scripts/jquery.fileupload.js",
            "~/Scripts/toastr.js"
            ));

JavaScript

<script type="text/javascript">
    $(function () {
        var displayMessage = false;
        var queryForEligibleUser = $.getJSON('../Mvc/Home/DetermineIfWeShouldShowMessage', function (data) {
            var result = $.parseJSON(data);
            displayMessage = result;
        }).done(function () {
            console.log("Display  message: ", displayMessage);
            if (displayMessage) {
                $.getJSON('../Mvc/Home/GetMessageToDisplay', function (messageToDisplay) {
                    console.log(messageToDisplay);
                    $('#DisplayMessage').text(messageToDisplay);
                });
            }
        });
    });
</script>

Below this script near the bottom of the page is where the scripts are loaded.

<![if (gt IE 8) | (!IE)]>
<script src="/Scripts/jquery-2.1.3.js"></script>
<script src="/Scripts/jquery-migrate-1.2.1.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/Common.js"></script>
<script src="/Scripts/knockout-3.3.0.debug.js"></script>
<script src="/Scripts/knockout.mapping-latest.debug.js"></script>
<script src="/Scripts/knockout-ext.js"></script>
<script src="/Scripts/jquery.maskedinput.js"></script>
<script src="/Includes/Lightbox/lightbox.js"></script>
<script src="/Scripts/scrollTo.js"></script>
<script src="/Scripts/Watermark.js"></script>
<script src="/Scripts/json2.js"></script>
<script src="/Scripts/jquery.autosave.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/jquery.fileupload.js"></script>
<script src="/Scripts/toastr.js"></script>

Upvotes: 1

Views: 1254

Answers (1)

Jonathan Kittell
Jonathan Kittell

Reputation: 7503

I found a solution here.enter link description here

I moved the script into a separate file and then put the reference at the bottom of the page.

<script type="text/javascript" defer="defer" src="../Areas/Mvc/Scripts/ShowMessage.js"></script>

I used defer so the script is downloaded after the HTML is rendered.

Upvotes: 1

Related Questions