CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Eric J Fisher
Eric J Fisher

Reputation: 324

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>

Upvotes: 11

Views: 105725

Answers (6)

RickInLosAngeles
RickInLosAngeles

Reputation: 189

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!

Upvotes: 2

user6263772
user6263772

Reputation: 1

I was getting this same error code:

(Error: 'generateText' is undefined)

...on the code

var bodyText=["The....now."]

I discovered on my text-editor(Notepad++), when typing many lines of text in the directly above the variable bodyText, if I didn't hit return carriage (enter==>WordWrap is off) just kept typing w/o return carriage and let the editor adjust text it worked?

Must be in the settings of Notepad++??

Upvotes: -1

Pascal Klein
Pascal Klein

Reputation: 24923

Some of my clients had this problem, because apparently they blocked loading Javascript from 3rd party sites. So now I always use the following code to include jQuery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
window.jQuery || 
document.write('<script type="text/javascript" src="/js/jquery-1.9.1.min.js">\x3C/script>')
</script>

This makes sure, that even if my client blocks loading the Javascript file from the CDN domain, the client still downloads the file from my own server, which is not blocked by the browser.

Upvotes: 1

Chris Gillum
Chris Gillum

Reputation: 15052

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.

Upvotes: 1

user3801205
user3801205

Reputation: 1

Anover variant, in my case - I was forced to use proxy. So - IE11--> InternetOptions --> Connections-->LANSettings-Proxy Server--> UseProxyServer - should be checked. Also check awailability of jQUery script source, my worked variant in VS2012 - -just like in top example

Upvotes: 0

coder
coder

Reputation: 13248

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>

Upvotes: 15

Related Questions