58

The 1st snippet wasn't working. However, it start working when replacing all $(dollar sign) with jQuery(See 2nd snippet). But i don't really understant why? Can anyone explain this to me? Many thanks!

1st Snippet

jQuery.noConflict();
               $(document).ready(function(){    
                    $("#insideTable > tbody > tr:odd").addClass("odd");
                    $("#insideTable > tbody > tr:not(.odd)").hide();
                    $("#insideTable > tbody > tr:odd").show();
                    $("#insideTable > tbody > tr.odd").click(function(){
                        $(this).next().toggle();
                        $(this).find(".arrow").toggleClass("up");
                    });

                });

2nd Snippet

        jQuery.noConflict();
        jQuery(document).ready(function(){

                jQuery("#insideTable > tbody > tr:odd").addClass("odd");
                jQuery("#insideTable > tbody > tr:not(.odd)").hide();
                jQuery("#insideTable > tbody > tr:odd").show();
                jQuery("#insideTable > tbody > tr.odd").click(function(){
                    jQuery(this).next().toggle();
                    jQuery(this).find(".arrow").toggleClass("up");
                });

            });
Acubi
  • 2,793
  • 11
  • 41
  • 54

2 Answers2

107

This is because jQuery.noConflict() "frees" the "$" from being associated with jQuery. Normally in your code you can use $ as a replacement for "jQuery". If you use noConflict() you can't do that anymore and so you have to replace each "$" with "jQuery"; .

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():

you can also create a totally new alias to use 

var myJqueryAlias = jQuery.noConflict();
myJqueryAlias(document).ready(function(){

        myJqueryAlias("#insideTable > tbody > tr:odd").addClass("odd");
        myJqueryAlias("#insideTable > tbody > tr:not(.odd)").hide();
        myJqueryAlias("#insideTable > tbody > tr:odd").show();
        myJqueryAlias("#insideTable > tbody > tr.odd").click(function(){
            myJqueryAlias(this).next().toggle();
            myJqueryAlias(this).find(".arrow").toggleClass("up");
        });

    });
Kick Buttowski
  • 6,709
  • 13
  • 37
  • 58
Nicola Peluchetti
  • 76,206
  • 31
  • 145
  • 192
  • 18
    This works, just want to point out that the first argument passed to a `ready` callback is the jQuery object, so you can do `.ready(function($){` and then use `$` inside the function, as long as you don't need to use the outer $ for stuff. – loganfsmyth Jun 08 '12 at 20:20
13

Calling noConflict() removes the association between the $ and the jQuery function. This is so that you can use another JavaScript library that also shortens to $ without conflicts.

shanethehat
  • 15,460
  • 11
  • 57
  • 87