Search code examples
javascriptjqueryprototypejs

jQuery conflict with Prototype (noconflict doesnt work)

I use jQuery v1.6.4 http://code.jquery.com/jquery-1.6.4.js and prototype.

I am trying to use the jQuery Tabs widget and it conflicts with prototype. As a result the upload button of an input isn't working.

I tried this to resolve but it doesn't seem to work.

<script type="text/javascript">
  jQuery.noConflict();
  _ccsjQ(function() {
    _ccsjQ( "#tabs" ).tabs();
  });
</script>

The funny thing is that if i press F5 the upload button works and when i refresh, doesnt work.

Solution

  • Easy way (IMHO) is just call jQuery.noConflict() then wrap any jQuery code in an anonymous function:

    jQuery.noConflict();
(function($){
  // use your standard $(...) in here
})(jQuery);

    Alternatively, you need to assign jQuery a new alias if you're not going to use jQuery(...) (e.g. var jq = jQuery.noConflict(); then use jq(...)).

    Example of both being used:

        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
    <script type="text/javascript">
        var _cssjQ = jQuery.noConflict();
        _cssjQ('.foo').css('color','#f0f');
        (function($){
            $('.bar').css('color','#f0f');
        })(jQuery);
    </script>

    And the fiddle: http://jsfiddle.net/kbWah/1/