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

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