. Advertisement .
..3..
. Advertisement .
..4..
“$(Document). ready is not a function” is a common problem in JQuery that many people are still at a loss as to how to solve it. This ITtutoria guide will fix that dilemma for you. Keep scrolling for more helpful pointers from our team!
Example of The Error
Suppose you want to use Jquery to get Json objects from the Solr server. The server runs fine if you run the HTML file on Tomcat. Here’s the content in your tag <head>, where you include Jquery.JS:
<head>
<title>Search Result </title>
<style>
img{ height: 140px; float: left; border: 2;}
div{font-size:09pt; margin-right:140px;
margin-left:140px; }
</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>
However, once you decide to embed that file into your project (which currently runs on Weblogic), it sends you this error (the debugging process is done via Firebug):
$ is not defined
$(document).ready(function(){
How to Solve The “$(Document). Ready Is Not A Function” Error
Here are three methods you should remember:
- Method 1. Reload the Jquery
- Method 2. Use NoConflict
- Method 3. Relocate the JS file
Method 1. Reload The JQuery
Ask yourself these questions: Did I load the jQuery of my “Head” section? If yes, did I do that the right way?
<head>
<script src="scripts/jquery.js"></script>
...
</head>
This code will assume the Jquery.JS lies in the script directory. Of course, it’s alright the change the file’s name if that’s what you want)
Another way is to load the Jquery that Google hosts:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
...
</head>
And what if the web server cannot return Jquery/1.6.1? Reasons are numerous, like wrong routing settings, folder name, file name, et cetera. Check them carefully to avoid errors!
Method 2. Use “NoConflict”
Numerous JavaScript libraries employ “$” as variable or function names. For JQuery, “$” only serves as Jquery’s alias, meaning all functionalities are available without including $.
Hence, should you use another library in JavaScript along with JQuery, we suggest you return the $ control to a new library while calling $.noConflict(). Some old $ references have been saved after JQuery’s initialization; the noConflict() only restores them.
jQuery.noConflict()(function ($) { // this was missing for me
$(document).ready(function() {
other code here....
});
});
Method 3. Relocate The JS File
Do you have JS files referencing JQuery? The reason might be that your JS file lies in the system’s body instead of your head section (a quite common problem!).
Moving that file to your head section and behind the reference “Jquery.JS” will be a great solution.
<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>
Conclusion
So you have it – three methods to solve the error “$(Document). ready is not a function“! Hopefully, our guides will serve you best. For other errors in Jquery (such as “Failed to load resource“), keep browsing our website!
Leave a comment