CODEWITHSUNDEEP
c#jquery.netasp.net-mvc
Lucie
Lucie

Reputation: 161

.NET Jquery Script Error

Trying to do a Jquery function, everything seems to be setup fine, but I get this error in my browser console log

SCRIPT5009: 'jQuery' is not defined bootstrap.js (20,1)

HTML1300: Navigation occurred. 1 (1,1) 2 CSS3121: The media query -ms-viewport has been deprecated.

SCRIPT5009: SCRIPT5009: 'jQuery' is not defined bootstrap.js (21,1)

SCRIPT5009: SCRIPT5009: '$' is not defined SendEmail.js (1,1)

This is my View Scripts/Styles:

@model Linkofy.Models.EmailAccount

@{
ViewBag.Title = "SendMail";
}
@section Styles {
<link href="@Url.Content("~/Styles/Edit.css")" rel="stylesheet" type="text/css" />
}
@section Scripts {
<script src="@Url.Content("~/Javascript/SendEmail.js")"></script>      
}

My Function (SendEmail.js):

$("#templateName").on("change", function () {

var tempID = $(this).find('option:selected').val();
var url = "/Identifiers/TemplateData/" + tempID;
console.log()

$.ajax({
    type: "GET",
    dataType: "json",
    contentType: "application/json",
    url: url, // Variabel
    showLoader: true,
    success: test // Function
});

});
function test(data) {
data = $.parseJSON(data);
$('#subject').val(data.subject);
$('#body').val(data.body);
}

Bundles:

    // For more information on bundling, visit https://go.microsoft.com/fwlink/?LinkId=301862
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery.js"));

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate"));

        // Use the development version of Modernizr to develop with and learn from. Then, when you're
        // ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
        bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                    "~/Scripts/modernizr-"));

        bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                  "~/Scripts/bootstrap.js",
                  "~/Scripts/respond.js"));

        bundles.Add(new StyleBundle("~/Content/css").Include(
                  "~/Content/bootstrap.css",
                  "~/Content/site.css"));
    }
}
}

Can't post without padding out the text on this file, so here is my whole layout file:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - linkofy</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

</head>
<body>
<div class="navbar" style="background-color: LightSteelBlue;">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            @Html.ActionLink("Linkofy", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Domains", "Index", "Identifiers")</li>
                <li>@Html.ActionLink("Clients", "Index", "Clients")</li>
                <li>@Html.ActionLink("Links", "Index", "Links")</li>
                <li>@Html.ActionLink("Status", "Index", "Status")</li>
            </ul>
            @Html.Partial("_LoginPartial")
        </div>
    </div>
</div>
<div class="container body-content">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - Orb Online - Liam Cook</p>
    </footer>
</div>

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)
    @RenderSection("Styles", required: false)
</body>
</html>

enter image description here

enter image description here

Upvotes: 1

Views: 1260

Answers (1)

Husni Salax
Husni Salax

Reputation: 2020

That error can only be caused by one of three things:

  1. Your JavaScript file is not being properly loaded into your page

  2. You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.

  3. You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.

You should check the Firebug net panel to see if the file is actually being loaded properly. If not, it will be highlighted red and will say "404" beside it. If the file is loading properly, that means that the issue is number 2.

Make sure all jQuery javascript code is being run inside a code block such as:

$(document).ready(function () {
  //your code here
});

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

One final thing to check is to make sure that you are not loading any plugins before you load jQuery. Plugins extend the "$" object, so if you load a plugin before loading jQuery core, then you'll get the error you described.

Note: If you're loading code which does not require jQuery to run it does not need to be placed inside the jQuery ready handler. That code may be separated using

document.readyState

Make sure that in your layout in header tags scripts should be like this order:

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Upvotes: 2

Related Questions