jQuery und Prototype gemeinsam einsetzen

In seltenen Fällen kann es vorkommen, dass man jQuery und Prototype gemeinsam in einem Projekt einsetzen möchte. Dieses macht in meinen Augen zwar nicht sehr viel Sinn, denn alles was Prototype kann, läßt sich mit jQuery ebenfalls realisieren. Manchmal hat man aber vielleicht einfach keine Lust oder Zeit, die bereits vorhandenen Funktionen und Klassen für die jeweils andere JavaScript Framework anzupassen.

Wer jetzt aber glaubt, dass man lediglich beide Frameworks einbinden braucht und dann gleich starten kann, der liegt ziemlich falsch, denn dummerweise sprechen sowohl jQuery, als auch Prototype die internen Funktionen und Selektoren mit Hilfe des Shortcuts „$“ an und genau da liegt dann auch das grundlegende Problem der parallelen Einsatzweise.

Um diese unerwünschten Namenskollisionen zu vermeiden, wäre es also notwendig, dass einer der beiden Libraries den internen Shortcut z.B. auf „jQuery“ oder „Pro“ etc. ändert und da die Entwickler des jQuery-Frameworks hier bereits mitgedacht haben, wird diese Änderung automatisch durch die interne Methode .noConflict() realisiert.

Damit das Ganze aber auch fehlerfrei funktioniert, müsst Ihr zwingend darauf achten, die Prototype – Bibliothek vor der jQuery Bibliothek zu laden, denn ansonsten erzielt Ihr durch den Einsatz von jQuery.noConflict() keinerlei Wirkung.

Der folgende Beispielcode verdeutlicht nochmals die korrekte Anwendung der Methode:


    
    
    

Weitere Informationen zum Thema findet Ihr auch in der jQuery Dokumentation.

3 comments for “jQuery und Prototype gemeinsam einsetzen

  1. Mike
    4. Mai 2009 at 11:52

    Hi,

    Hab das ganze so realisiert, aber das scheint bei mir auf Webkit-basierenden Browser nicht zu funktionieren. prototype wid vor jQuery geladen, ich benutze jQuery anstett $ und jQuery.noConflict steht am anfang der Zeile. Trotzdem Pustekuchen. Irgendwelche Vorschläge?

  2. Stefan
    4. Mai 2011 at 06:32

    also bei mir gehts auch nich und ich benötige das für ein wichtiges projekt. also wenn jemand helfen kann und weiß, wie prototype eingesetzt werden kann, ohne dass jquery nicht mehr funktioniert, kann sich ja gerne mal melden. mein problem ist, dass bei mir keine einzige jquery funktion mehr klappt um so fern Prototype eingebunden ist.

  3. Matthias
    1. November 2011 at 13:22

    Ohne dass ihr etwas von eurem jQuery-Code umschreiben müsst, könnt ihr ganz einfach den Teil des Codes in einen eigenen Scope packen.

    jQuery.noConflict();
    (function($){
    $(„#foo“).bar();
    })(jQuery);

    Ihr übergebt das jQuery-Objekt und innerhalb des Scopes könnt ihr wieder auf die $-Variable zugreifen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.