CODEWITHSUNDEEP
javascriptjqueryasp.nettwitter-bootstrap
Touy
Touy

Reputation: 71

Custom JQuery showing: Uncaught ReferenceError: $ is not defined on modal

Question Background:

I have a simple ASP.NET MVC site using Bootstrap to render a view with nine panels. On each panel is a button that when clicked should produce a modal popup.

The issue:

If I include a script link to the included bootstrap.min.js filethen I can produce a simple modal pop-up. My issue is I will need to start passing parameters to the pop-up eventually so am attempting to develop my JQuery solution. Currently when I click on a panel button in my view I can see from the Chrome console I'm getting the error:

Uncaught ReferenceError: $ is not defined

Code:

Note: This view is based on a master view that has <script src="/Scripts/jquery-1.9.1.js"></script> included as part of the defined bundles

    @{
        ViewBag.Title = "CIBuilds";
        Layout = "~/Views/Shared/_Layout.cshtml";

        <link rel="stylesheet" href="~/Content/bootstrap.min.css">
        <link rel="stylesheet" href="~/Content/bootstrap.css">
    }

    @Styles.Render("~/Content/css")

    <div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-4 col-lg-4">
                <div class="panel panel-default">
                    <div class="panel-heading">This Page is Disabled</div>
                    <div class="panel-body">
                        This page is temporarily disabled by the site administrator for some reason.<br>
                        <a href="#">Click here</a> to enable the page.
                        <a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#basicModal">Click to open Modal</a>
                    </div>
                </div>
            </div>

        //Other 8 panels

        </div>

<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <h3>Modal Body</h3>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
    <script>

ERROR:***** Uncaught ReferenceError: $ is not defined
$(document).ready(function () {
    $(".btn").click(function () {
        $("#basicModal").modal("show");
    });
});

</script>

If anyone could help me sorting this that would be great.

UPDATE

I commented out the master views RenderSection reference to the defined JQuery bundle along with the bundle itself. I then added a link to JQuery1.9.1.js and also tried 1.9.1.min.js to no avail.

I also tried JQuery-1.11.2.js and 1.11.2.min.js again the issue still persists.

I am getting a different error message now which is:

 Uncaught TypeError: undefined is not a function

This is because .modal() is not showing as a valid method in the JQuery - which would explain the undefined function error message, what script should I be using?

Upvotes: 3

Views: 9846

Answers (4)

MikeTeeVee
MikeTeeVee

Reputation: 19422

I noticed this error in Firefox using their developer tool.
I use MVC, and was able to resolve this issue by moving
  my @Scripts.Render() calls Before calling @RenderBody() in my Layout Page.

Upvotes: 0

Prashant Kumar
Prashant Kumar

Reputation: 386

Simply open viewsource in browser and see

1 : If jquery is file loaded (clicking on the link in viewsource should open the jquery file)

2 : If there are more than one links to include jquery (make sure you turn off EnableOptimization in your bundle)

Also try replacing $ with JQuery

Upvotes: 0

Arcanyx
Arcanyx

Reputation: 870

Must be the $ conflict! Try this:

jQuery(document).ready(function () {
    jQuery(".btn").click(function () {
        jQuery("#basicModal").modal("show");
    });
});

instead of

$(document).ready(function () {
    $(".btn").click(function () {
        $("#basicModal").modal("show");
    });
});

Upvotes: 0

Dave D
Dave D

Reputation: 938

Running your script snippets the same way you have pasted, I get the same error that you are talking about in the console until I include the JQuery Library. Once the JQuery library is loaded the error goes away.

You may want to recheck your bundles to make sure that they are all linked properly, or if the software your using blocks JQuery on the frontend you may have to add another link to the Library you intend to use. Hope this helps.

I wanted to add this as a comment to poke around a little bit to come to the correct solution first, but I don't have enough rank for that. I would try using this on the front end, but with your version of JQuery that you want to use.

// By Chris Coyer CSS-Tricks

    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/js/jquery-1.4.2.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>

EDIT:

Here is the fiddle http://jsfiddle.net/sf9knxx8/ with no library, you can see the console to find your error. Here is one with the library added http://jsfiddle.net/6f980kyc/, clear your console and refresh you can see the error goes away.

Upvotes: 0

Related Questions