[jquery] $(document).ready(function() is not working

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>

This question is related to jquery html json

The answer is


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


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(){


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


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.


Set events after loading DOM Elements.

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

        });

    });

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>

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.


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


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
});

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to json

Use NSInteger as array index Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) HTTP POST with Json on Body - Flutter/Dart Importing json file in TypeScript json.decoder.JSONDecodeError: Extra data: line 2 column 1 (char 190) Angular 5 Service to read local .json file How to import JSON File into a TypeScript file? Use Async/Await with Axios in React.js Uncaught SyntaxError: Unexpected token u in JSON at position 0 how to remove json object key and value.?