CODEWITHSUNDEEP
jquery
josh
josh

Reputation: 231

how to use jquery.noConflict property

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?

Upvotes: 5

Views: 35310

Answers (4)

Akrikos
Akrikos

Reputation: 3662

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($) {
    //use '$' as you normally would
    $(document).ready(function() {
        //code here that depends on the document being fully loaded
    });

})(jQuery);  

</script>

Upvotes: 20

Santi
Santi

Reputation: 4468

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")

Upvotes: 1

David Andres
David Andres

Reputation: 31781

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.

Upvotes: -1

Alec Smart
Alec Smart

Reputation: 95900

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

Upvotes: 11

Related Questions