Problem loading multiple jQuery plugins

Question

I have a problem using multiple (2) jQuery plugins. I've googled a little but can't really find a solution, even though I suppose it's pretty simple. I'm new to jQuery so please be gentle :)

I'll try to make it short. I have two plugins: one drag'n'drop (using Prototype and Scriptaculous) and one tooltip plugin (TipTip). This is the code used to load the files and library:

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>

<script type="text/javascript" src="js/prototype.js"></script> 
<script type="text/javascript" src="http://webdesign.torn.be/tutorials/assets/js/scriptaculous/scriptaculous.js?load=effects,dragdrop"></script>

<script type="text/javascript" src="js/jquery.tipTip.js"></script>
<script type="text/javascript" src="js/jquery.tipTip.minified.js"></script>

I call the functions using this:

// CALLING THE TIPTIP-PLUGIN
<script type="text/javascript">
    $(function(){
    $(".heroStr").tipTip();
    });
</script>

// CALLING THE DRAG'N'DROP-PLUGIN
<script type="text/javascript">
    //<![CDATA[  
    document.observe('dom:loaded', function() {  
        var changeEffect;  
    Sortable.create("selectedSetupTop", {containment: ['listStr', 'listAgi', 'listInt', 'selectedSetupTop', 'selectedSetupMid', 'selectedSetupBot', 'selectedSetupFor'], tag:'img', overlap:'vertical', constraint:false, dropOnEmpty: true,
        onChange: function(item) {
            var list = Sortable.options(item).element;
            $('changeNotification').update(Sortable.serialize(list).escapeHTML());
            if(changeEffect) changeEffect.cancel();
            changeEffect = new Effect.Highlight('changeNotification', {restoreColor:"transparent" });
        },          
        onUpdate: function(list) {
            new Ajax.Request("saveImageOrder.php", {
                method: "post",
                onLoading: function(){$('activityIndicator').show(), $('activityIndicator2').hide()},
                onLoaded: function(){$('activityIndicator').hide(), $('activityIndicator2').show()},
                parameters: { data: Sortable.serialize(list), container: list.id }
            });             
        }
    });
    });  
// ]]>  
</script>

When I'm using the code above only the drag'n'drop works. If I remove the Prototype- and Scriptaculous files the TipTip works, but the drag'n'drop will not work of course.

How do I manage to run both at the same time? Would rally appreciate some help, thanks in advance!

/cheezen

[Related issue](http://stackoverflow.com/q/134572/546661) – Peter Olson Aug 09 '11 at 19:00 — Peter Olson, Aug 09 '11 at 19:00

Dennis · Accepted Answer · 2011-08-10T10:34:24.713

1

jQuery and other libraries use the $ variable for most of its functions. If you include more than one (jQuery, Prototype, MooTools etc...), they may trample each other. Fall back to the jQuery variable when using tipTip. (Which you only need to include once)

$.noConflict();  //Release the $ variable
jQuery(function($){  //Shorthand for $(document).ready(), callback locally renames jQuery to $
    $(".heroStr").tipTip();
});

Also, while you can use both simultaneously, Prototype is not a jQuery plugin, it is a separate framework.

edited Aug 10 '11 at 10:34

answered Aug 09 '11 at 19:00

Dennis

32,200
11
64
79

Thanks a lot for the fast answer, worked! Thought I tried that, guess I didn't. I suppose it's the same if I want to use another plugin? – Cheezen Aug 09 '11 at 19:14
The document.ready callback gets the jQuery object passed to it, so you can rename it and use the dollar sign inside the function (see edited post). I would, however, second what bfavaretto said and use jQueryUI for the actual drag-and-drop support, as that is an actual jQuery plugin. – Dennis Aug 10 '11 at 10:25

score 1 · Answer 2 · answered Aug 09 '11 at 19:13

You have to use jQuery.noConflict() docs to avoid $ collision between jQuery and Prototype.

But instead I would suggest you use jQueryUI to handle drag and drop, instead of prototype+scriptaculous. Also, I recommend you update your jQuery to the latest version, the one you are using is really outdated.

Problem loading multiple jQuery plugins

2 Answers2