Mam problem z używaniem wielu (2) wtyczek jQuery. Trochę googlowałem, ale tak naprawdę nie mogę znaleźć rozwiązania, chociaż przypuszczam, że jest to dość proste. Jestem nowy w jQuery, więc proszę o łagodność :)

Postaram się to skrócić. Mam dwie wtyczki: jedną drag'n'drop (przy użyciu Prototype i Scriptaculous) i jedną podpowiedź (TipTip). To jest kod używany do ładowania plików i biblioteki:

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

Wywołuję funkcje używając tego:

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

Kiedy używam powyższego kodu, działa tylko drag'n'drop. Jeśli usunę pliki Prototype i Scriptaculous, TipTip zadziała, ale przeciąganie i upuszczanie oczywiście nie zadziała.

Jak mogę uruchomić oba jednocześnie? Byłbym wdzięczny za pomoc, z góry dzięki!

/cheezen

0
Cheezen 9 sierpień 2011, 22:52
 – 
Peter Olson
9 sierpień 2011, 23:00

2 odpowiedzi

Najlepsza odpowiedź

JQuery i inne biblioteki używają zmiennej $ dla większości swoich funkcji. Jeśli dołączysz więcej niż jeden (jQuery, Prototype, MooTools itp.), mogą one się nawzajem deptać. Powróć do zmiennej jQuery podczas korzystania z tipTip. (Które wystarczy podać tylko raz)

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

Ponadto, chociaż możesz używać obu jednocześnie, Prototype nie jest wtyczką jQuery, jest osobnym frameworkiem.

1
Dennis 10 sierpień 2011, 14:34
Wielkie dzięki za szybką odpowiedź, zadziałało! Myślałem, że tego próbowałem, chyba nie. Przypuszczam, że tak samo jest, jeśli chcę użyć innej wtyczki?
 – 
Cheezen
9 sierpień 2011, 23:14
Wywołanie zwrotne document.ready pobiera obiekt jQuery, więc możesz zmienić jego nazwę i użyć znaku dolara wewnątrz funkcji (patrz edytowany post). Chciałbym jednak poprzedzić to, co powiedział bfavaretto i użyć jQueryUI do faktycznej obsługi przeciągania i upuszczania, ponieważ jest to rzeczywista wtyczka jQuery.
 – 
Dennis
10 sierpień 2011, 14:25

Musisz użyć jQuery.noConflict() dokumentacji, aby uniknąć kolizji $ między jQuery i prototyp.

Ale zamiast tego sugerowałbym użycie jQueryUI do obsługi przeciągania i upuszczania, zamiast prototype+scriptaculous. Ponadto polecam zaktualizować jQuery do najnowszej wersji, ta, której używasz, jest naprawdę przestarzała.

1
bfavaretto 9 sierpień 2011, 23:13