$(document).ready(function() is not working

Question

I am using Jquery for getting a json object from a solr server. When I run my html file with Tomcat it is runns fine but when I embed it with my project which is running on weblogic it gets this error: (debugging done through firebug)

$ is not defined
$(document).ready(function(){

Why do I get this error when I embed it in my project?

This is the contents of my <head> tag, It is how I include jquery.js:

<head>
  <title>Search Result  </title>
  <style>
    img{ height: 150px; float: left; border: 3;}
    div{font-size:10pt; margin-right:150px;
    margin-left:150px; }
  </style>

  <script type="text/javascript" src="jquery-1.6.1.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){       //Error happens here, $ is not defined.

    });
  </script>
</head>

Did you load jQuery? Did you load it before your custom javascript? — igorw, Jun 14 '11 at 08:54
Use jQuery(document).ready(function() instead of $(document).ready(function() . i think it works.. — Ravichandran Jothi, Jun 14 '11 at 08:56
How are you including jQuery library? Check your path is correct. If you are using a CDN ensure it can be "seen" from your network. — Dan Diplo, Jun 14 '11 at 08:56
yes i have included jquery.js and before custom java script. — Romi, Jun 14 '11 at 08:56
first look for jquery file if that is loded then your code must be written after jquery load line — Vivek, Jun 14 '11 at 08:57
i am getting this error too: NetworkError: 404 Not Found - http://localhost:7001/webProject/jquery-1.6.1.js" , But i have included jquery.js in my html file as well as it is available with in the same directory as my html file — Romi, Jun 14 '11 at 09:00
yeah!!! that's the problem it means that your js file has not included..see for your js path. — Vivek, Jun 14 '11 at 09:02
@Romi: post your `head` code, are you 100% sure you included correctly? — Dan Abramov, Jun 14 '11 at 09:07
Download Firebug (a firefox addon), you can see in the console what absolute url is used to request the javascript file. Then you'll be able to see whether it's correct or not. — Kokos, Jun 14 '11 at 09:08
jquery.js is with in the same directory as my .html. and i included it as — Romi, Jun 14 '11 at 09:09
Look at my edit, and i am using firebug, after using it i could say taht i got error NetworkError: 404 Not Found - localhost:7001/webProject/jquery-1.6.1.js"; — Romi, Jun 14 '11 at 09:13

Dan Abramov · Accepted Answer · 2011-06-14T09:04:38.177

32

Did you load jQuery in head section? Did you load it correctly?

<head>
   <script src="scripts/jquery.js"></script>
   ...
</head>

This code assumes jquery.js is in scripts directory. (You can change file name if you like)

You can also use jQuery as hosted by Google:

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
   ...
</head>

As per your comment:

Apparently, your web server is not configured to return jQuery-1.6.1.js on requesting /webProject/jquery-1.6.1.js. There may be numerous reasons for this, such as wrong file name, folder name, routing settings, etc. You need to create another question and describe your 404 in greater details (such as local file name, operation system, webserver name and settings).

Again, you can use jQuery as provided by Google (see above), however you still might want to find out why some local files don't get served on request.

edited Jun 14 '11 at 09:04

answered Jun 14 '11 at 08:57

Dan Abramov

264,556
84
409
511

when i used this my code is running fine it means there is a problem with the path but i am not getting why is so :O – Romi Jun 14 '11 at 09:28
1

@Romi, you're missing `http://` or `https://` from the beginning of the URL. Without it, the browser looks for the asset at the CURRENT folder. – Nathan J.B. Apr 22 '13 at 20:06
Or [`//ajax.googleapis.com` for that purpose](http://stackoverflow.com/q/550038/458193). – Dan Abramov Apr 23 '13 at 18:06
Instead of loading jQuery in head, you only need to load jQuery before it. – Pbinder Nov 06 '16 at 15:40

score 15 · Answer 2 · edited Dec 28 '16 at 18:17

I found we need to use noConflict sometimes:

jQuery.noConflict()(function ($) { // this was missing for me
    $(document).ready(function() { 

       other code here....

    });
});

From the docs:

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.

Kokos · Answer 3 · 2013-05-29T14:50:59.443

6

You only get this error if jQuery is not correctly loaded, you can check with firebug what url its trying to load so you can see if your relative path is wrong.

Also, on a separate note, you can use $(function(){ as a shorthand to $(document).ready(function(){

edited May 29 '13 at 14:50

answered Jun 14 '11 at 09:00

Kokos

9,051
5
27
44

live-love · Answer 4 · 2017-04-12T13:27:48.773

3

If you have a js file that references the jquery, it could be because the js file is in the body and not in the head section (that was my problem). You should move your js file to the head section AFTER the jquery.js reference.

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
    <script src="myfile.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>

edited Apr 12 '17 at 13:27

answered Jul 24 '15 at 19:01

live-love

48,840
22
240
204

Is there any other way to make it work, instead of putting the function inside head? – orezvani Jan 26 '17 at 13:31

score 0 · Answer 5 · edited May 07 '16 at 14:57

0

I have same issue ... at http://www.xaluan.com .. but after log. I find out that after jQuery run I make a function using one element id which not exists ..

Eg:

$('#aaa').remove()  <span class="aaa">sss</spam>

so the id="aaa" did not exist .. then jQuery stops running.. because errors like that

edited May 07 '16 at 14:57

marc_s

732,580
175
1,330
1,459

answered May 28 '12 at 05:52

Binh Nguyen

1,313
3
17
27

score 0 · Answer 6 · edited Sep 27 '16 at 03:26

0

Use:

jQuery(document).ready(function($){
    // code where you can use $ thanks to the parameter
});

Or its shorter version:

jQuery(function($){
    // code where you can use $ thanks to the parameter
});

edited Sep 27 '16 at 03:26

ericek111

575
7
15

answered Sep 25 '14 at 10:50

Reign.85

2,420
1
28
28

What is the difference between your code ans code in question? – Nov 28 '16 at 12:57
The diff is I define $ as parameter. Its an old answer but I remember to got an issue with Jquery, $ was not defined. Actually now I guess using var $ = jQuery should works too... – Reign.85 Nov 28 '16 at 16:01

score 0 · Answer 7 · answered Nov 26 '15 at 05:12

0

I just had this issue and it was because of me trying to included jQuery via http while my page was loaded as https.

answered Nov 26 '15 at 05:12

Bishnu Paudel

2,083
1
21
39

score 0 · Answer 8 · answered May 18 '16 at 04:57

I had this same problem in Chrome where my scripts were like:

<script src="./scripts/jquery-1.12.3.min.js"></script>
<script src="./scripts/ol-3.15.1/ol.js" />
<script>
...
$(document).ready(function() {
    ...
});
...
</script>

When I changed to:

<script src="./scripts/jquery-1.12.3.min.js"></script>
<script src="./scripts/ol-3.15.1/ol.js"></script>

$(document).ready was called.

score 0 · Answer 9 · answered Jun 14 '11 at 09:06

0

see for your js path that may be the causing issue...because You only get this error if jQuery is not correctly loaded.

answered Jun 14 '11 at 09:06

Vivek

10,978
14
48
66

score 0 · Answer 10 · answered Dec 10 '21 at 06:34

0

You can also write your jquery code in this function. document.addEventListener("DOMContentLoaded",function(),{ },false);

answered Dec 10 '21 at 06:34

Fakhar Abbas

1
1

score -1 · Answer 11 · answered Sep 11 '18 at 09:02

-1

Set events after loading DOM Elements.

$(function () {
        $(document).on("click","selector",function (e) {
          alert("hi");

        });

    });

answered Sep 11 '18 at 09:02

Md.Morshadun Nur

1
3

Your answer is not related. – Ihtsham Minhas Sep 11 '18 at 09:12
I fixed this type of issue in jQuery 1.10.2. – Md.Morshadun Nur Sep 18 '18 at 10:51

$(document).ready(function() is not working

11 Answers11

As per your comment:

Linked