$ is not defined

Question

I cannot figure out why it's still not recognizing jQuery syntax when I clearly have included the jQuery library right before my $(document).ready

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
    <head id="Head1"><title>

</title></head>
    <body>

        <form name="form1" method="post" action="jQueryDialogTest.aspx" id="form1">
<div>
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE2MTY2ODcyMjlkZA==" />

</div>


<script src="content/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="content/js/popup.js" type="text/javascript"></script>
            <div id="testDialog" winWidth="400" winHeight="500" winResizable="true">
                Some test mark-up, should show inside the dialog
            </div>
            <div><input type="button" id="invokeDialog" value="Click Me!" /></div>
        </form>

        <script type="text/javascript">

            $(document).ready(function()
            {
                $("input.invokeDialog").click.showDialog("#testDialog");
            });

        </script>

    </body>
</html>

In popup.js I have for example this:

function showDialog(divID)
{
    // Get reference to the div element
    var dialogDiv = $(divID);

    dialogDiv.dialog
    (
        {
            bgiframe: true,
            modal: true,
            autoOpen: false,
            show: 'blind'
        }
    )

    dialogDiv.dialog("open");
}

can you check if popup.js doesn't overwrite the variable `$`. — mauris, Apr 13 '10 at 16:29
**Off-topic Suggestion:** `$(function(){ ... });` is a shortcut for `$(document).ready(function(){ ... });` — brianreavis, Apr 13 '10 at 16:30
Have you tried putting the script elements in the head of your document instead of the body? I am just throwing an uneducated guess out there. — erisco, Apr 13 '10 at 16:31
No I'm loading the .js dynamically in ASP.NET from the Page_Load server-side method. So if I put it in the head, then the loading of the .js happens AFTER so that won't work — PositiveGuy, Apr 13 '10 at 16:33

score 9 · Accepted Answer · answered Apr 13 '10 at 16:28

9

Are you sure that it's actually loading the javascript file? Tools like "Fiddler" can help you determine this.

Also, your code is not terminated correctly, which can cause weird errors. Try this:

$(document).ready(function() 
            { 
                $("input.invokeDialog").click.showDialog("#testDialog"); 
            } 
);

answered Apr 13 '10 at 16:28

John Fisher

22,355
2
39
64

Also, make sure jQuery is loaded before using javascript dependent on it: http://stackoverflow.com/a/20354511/134761 – angularsen Dec 03 '13 at 17:07

score 3 · Answer 2 · answered Apr 13 '10 at 16:35

3

A stab in the dark: you have a relative path to your jQuery file:

<script src="content/js/jquery-1.3.2.min.js" ...

so if your content directory is in the root of your site:

http://mysite.com/content/

but your page is in a subdirectory:

http://mysite.com/test/mypage.html

then the relative path will be:

http://mysite.com/test/content/js/jquery-1.3.2.min.js

which presumably doesn't exist. Should you be saying:

<script src="/content/js/jquery-1.3.2.min.js" ...

(note the leading slash) instead?

answered Apr 13 '10 at 16:35

RichieHindle

272,464
47
358
399

Totally didn't realize but we have this Utility method which inside has hard coded "content/". I hate whoever created this because it forces the consumer to put all pages in the root of the website. Lame. So yes, this may be the issue. – PositiveGuy Apr 13 '10 at 16:49

score 2 · Answer 3 · answered Apr 13 '10 at 16:30

2

Is that code verbatim? You're missing a closing parenthesis after the closing brace.

Don't know if that'd cause your issue, tho.

Might seem like an obvious thing, but make sure the path to jQuery is right.

answered Apr 13 '10 at 16:30

JC Ford

6,946
3
25
34

I took it from page source. But in my code I do have the closing paren and it did not make a difference. It can't understand $ so it won't even get to that. – PositiveGuy Apr 13 '10 at 16:32

score 1 · Answer 4 · answered Apr 13 '10 at 16:47

1

You can solve $ not defined errors by calling jQuery directly and adding the alias by:

       jQuery(document).ready(function($)
       {
           $("input.invokeDialog").click.showDialog("#testDialog");
       });

answered Apr 13 '10 at 16:47

Pollett

596
4
15

$ is not defined

4 Answers4