how to use jquery.noConflict property

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?

Akrikos · Answer 1 · 2013-01-17T18:50:52.540

21

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>

edited Jan 17 '13 at 18:50

answered Oct 23 '09 at 03:56

Akrikos

3,595
2
24
22

This is rather deep javascript foo and you may want to stay away from it if you can't figure out why it works this way. I'd recommend figuring it out though :-) – Akrikos Oct 23 '09 at 03:57
Is this better than doing var $ = jQuery.noConflict(); and that way you can assign it to a local copy of $ and still use $ the way you always would? – emschorsch Jan 17 '13 at 15:55
From what I see here: http://api.jquery.com/jQuery.noConflict/ $ = jQuery.noConflict(); is not a good thing to do. It looks like that would undo everything that noConflict does. If you do that inside a closure, it would work, but it would be more confusing than this method. If you're going to do something similar to what you propose, you're better off with running noConflict in the global space and then $ = jQuery; inside your closure. However, you need to be really careful not to do that assignment in the global scope. – Akrikos Jan 17 '13 at 18:55

score 12 · Accepted Answer · answered Sep 08 '09 at 04:33

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

score 0 · Answer 3 · answered Sep 08 '09 at 05:01

0

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

answered Sep 08 '09 at 05:01

Santi

4,428
4
24
28

1

Unless one wants to use more jQuery versions in one page, you shouldn't release the `jQuery` variable, as many plugins rely on it. – alexia Dec 22 '10 at 13:43

score -2 · Answer 4 · answered Sep 08 '09 at 04:34

-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.

answered Sep 08 '09 at 04:34

David Andres

31,351
7
46
36

1

`$(function() { … })` is a shorthand for `$(document).ready(function() { … })`, just check out [jQuery's source](https://github.com/jquery/jquery/blob/master/src/core.js#L177-189). – alexia Dec 22 '10 at 13:42

how to use jquery.noConflict property

4 Answers4

Linked