JavaScript runtime error: '$' is undefined

So classic problem, but having a horrible time on finding the actual cause. Typically when I see this error it's because the jQuery reference is after code requiring it, or back jQuery link, or jQuery conflict, etc... so far none of those appear to be the case. Unfortunately seeking out the solution to this problem has lead me to post after post of such cases. I'm sure my problem here is equally as simple, but over an hour of hunting, still no luck...

Edit: Additional information... The solution file (which I've recreated multiple times trying to figure this out. Is a JavaScript Windows Store Blank App template and I'm doing this in Visual studio. The only references files is Windows Library for javascript 1.0, I have tried deleting this to test as well.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>HTML5 Canvas Template</title>
        <style>
            /* styles here */
        </style>
    </head>
    <body>
        <canvas id="myCanvas" width="500" height="500">
            <p>Canvas not supported.</p>
        </canvas>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var canvas = $("#myCanvas").get(0);
                var context = canvas.getContext("2d");

                function renderContent()
                {
                    // we'll do our drawing here...
                }

                renderContent();
            });
        </script>
</body>
</html>

Solution 1:

It's states that JQuery referred URL is not correct

Try this:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Solution 2:

I tried everything listed above and nothing seems to work until I put this string

<script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>

in the head section of the HTML file. So here's how it looks:

<!DOCTYPE html>
<html>
<head>

    <!-- jQuery Reference -->
    <script src="../scripts/jquery-2.2.3.min.js" type="text/javascript"></script>

    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />


    <title>some title</title>

</head>
<body>
...

And the js file is located at a level below in the folder 'scripts'. Finally, the error is gone and what a relief!

Solution 3:

In my case, the problem was that I was rendering my page over https but I was trying to request the JQuery file over http, which is blocked by many browsers for security reasons.

My fix was to change this...

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

...to this...

<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>

This causes the browser to download JQuery using the same protocol (http or https) as the page being rendered.

JavaScript runtime error: '$' is undefined

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts