Problème lors du chargement de plusieurs plugins jQuery

Question

J'ai un problème lors de l'utilisation de plusieurs (2) plugins jQuery. J'ai un peu googlé mais je n'arrive pas vraiment à trouver une solution, même si je suppose que c'est assez simple. Je suis nouveau à jQuery alors s'il vous plaît soyez gentil :)

Je vais essayer de faire court. J'ai deux plugins: un drag'n'drop (utilisant Prototype and Scriptaculous) et un plugin tooltip (TipTip). Ceci est le code utilisé pour charger les fichiers et bibliothèque:

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

j'appelle les fonctions en utilisant ceci:

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

Quand je suis à l'aide du code ci-dessus que les travaux de drag'n'drop. Si je supprime les fichiers Prototype- et Scriptaculous, le TipTip fonctionne, mais le drag'n'drop ne fonctionnera pas bien sûr.

Comment gérer les deux en même temps? Rally apprécierait de l'aide, merci d'avance!

/cheezen

Answer 1

jQuery et d'autres bibliothèques utilisent la variable $ pour la plupart de ses fonctions. Si vous en incluez plus d'un (jQuery, Prototype, MooTools etc ...), ils peuvent se piétiner les uns les autres. Retournez à la variable jQuery lorsque vous utilisez tipTip. (Ce qui vous suffit d'inclure une fois)

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

En outre, alors que vous pouvez utiliser les deux simultanément, Prototype est pas un plugin jQuery, il est un cadre distinct.

Answer 2

Vous devez utiliser jQuery.noConflict()docs pour éviter $ collision entre jQuery et Prototype.

Mais à la place, je vous suggère d'utiliser jQueryUI pour gérer le glisser-déposer, au lieu de prototype + scriptaculous. Aussi, je vous recommande de mettre à jour votre jQuery à la dernière version, celle que vous utilisez est vraiment obsolète.