Wednesday, March 10, 2010

$(document).ready is not a function

$(document).ready is not a function

This error message appears only if another framework is in conflict with the almighty jQuery. For example You try to use Prototype/Scriptaculous for Lightbox but you also need something else, which requires jQuery.

Since no framework is compatible with another framework, you have to find a workaround to get things working.

And here comes jQuery in your help. The jQuery team was smart enough to realize that there will be conflicts between frameworks, especially the $ will cause massive headaches since it’s the basic of each framework. $ is the shortcut for the word “jQuery”

So, they invented jQuery.noConflict();. This will let you to replace the $ with the word jQuery, in all your code. So, when you need to call this: $(document).ready(function(){ … You simply replace the $ as I said above: jQuery(document).ready(function(){ …, don’t forget to call jQuery.noConflict(); before this.

So, when you use the noConflict() function, your code should look something like this:


<script type="text/javascript" src="JScripts/lightbox/prototype.js">
<script type="text/javascript" src="JScripts/lightbox/scriptaculous.js?load=effects,builder">
<script type="text/javascript" src="JScripts/lightbox/lightbox.js">

<script type="text/javascript" src="JScripts/jquery-1.2.6.min.js">
<script type="text/javascript" src="JScripts/jquery.linkselect.js">


<script type="text/javascript">

$(document).ready(function (){
$("#category").linkselect();
});


So now the above code block becomes



<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function (){
jQuery("#category").linkselect();
});




No comments:

Post a Comment