how to use jquery non conflict properly

Question

I am testing my webpage on a server using preview dns. Just realized that preview dns automatically adds mootools library towards the end of any php page. Probably for their own statistics or something.

But the problem is that I am using jquery in my page. So My jquery code breaks because both mootools and jquery both use '$'.

I've put all the page source of my page on jsbin: http://jsbin.com/ozime (this includes the added on mootools).

In this page I've added a sample jquery code which should trigger on change of the drop down box. I added some alert statements as well. However, only first alert statement shows up. One inside jquery code does not.

I've tried to use jquery no conflict but it does not seem to work.

Has someone faced this issue?

Answer 1

After you include jQuery, add the following in a script tag immediately after it.

<script> 
jQuery.noConflict();

jQuery(document).ready(function() {
alert('hi');
});
</script>

Also place your jQuery script before your mootools library. Order will be:

jQuery script include

noConflict code

mootools script include

Answer 2

Instead of j(function()...

try

j(document).ready
(
  function()
  {
   alert("here");
   j("select#rooms")
     .change
     (
       function()
       {
         alert("here1");
       }
     )
  }
);

You were trying to wrap a function instead of an element, which is what might be causing the unexpected behavior.

Answer 3

Insert the following before any jquery code:

$j = jQuery.noConflict(true);

Now you can use $j instead of $ for any jquery stuff you want to do. i.e.:

$j("body")

Answer 4

I prefer using a self executing anonymous function to give your jQuery code its own scope where you can use $ as you normally would if you didn't have to worry about compatability.

This is going to look weird if you haven't seen it before. Basically, what I did was define a function that takes a parameter (the $) and then execute that function with jQuery as the parameter.

<script>
jQuery.noConflict();

(function($) {

    $(document).ready(function() {
    //code here that depends on the document being fully loaded
    });

})(jQuery);  

</script>