How to use jquery.noConflict property

Question

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

But the problem is that I use jquery on my page. So my jquery code breaks because both mootools and jquery use "$".

I placed the entire source of the page on the jsbin page: http://jsbin.com/ozime (added here are those added to mootools).

On this page, I have added sample jquery code that should run when the drop-down list changes. I also added some warnings. However, only the first warning operator appears. One inside jquery code does not work.

I am trying to use jquery without conflicts, but it does not seem to work.

Has anyone encountered this issue?

Answer 1

After you enable jQuery, add the following to the script tag immediately after it.

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

Also place your jQuery script in front of your mootools library. Order will be:

jQuery script includes

noConflict code

mootools script enable

Answer 2

I prefer to use a self-tuning anonymous function to give your jQuery code its own area in which you can use $, as usual, if you do not need to worry about compatibility.

It will look strange if you have not seen it before. Basically, I defined a function that takes a parameter ($) and then executes that function using jQuery as a parameter.

 <script> jQuery.noConflict(); (function($) { //use '$' as you normally would $(document).ready(function() { //code here that depends on the document being fully loaded }); })(jQuery); </script> 

Answer 3

Paste the following before any jquery code:

 $j = jQuery.noConflict(true); 

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

 $j("body") 

Answer 4

Instead of j (function () ...

to try

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

You tried to wrap a function instead of an element, which might cause unexpected behavior.