2010-12-13 11 views
7

Ich habe ein JavaScript-Widget erstellt, das auf jeder beliebigen Drittanbieter-Website in jeder Umgebung eingebettet werden kann. Das Widget basiert auf jQuery und jQuery UI. Ich folgte den Schritten in How to embed Javascript widget that depends on jQuery into an unknown environment, um jQuery in einer verantwortlichen Weise hinzuzufügen - funktioniert großartig zum Einbetten von jQuery. Aber wenn ich versuche, jQuery UI hinzuzufügen, schlägt es fehl. Hier ist der Code:Warum sieht jQuery UI jQuery nicht?

(function(window, document, version, callback) { 
    var j, d; 
    var loaded = false; 
    if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"; 
    script.onload = script.onreadystatechange = function() { 
     if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) { 
      callback((j = window.jQuery).noConflict(1), loaded = true); 
      j(script).remove(); 
     } 
    }; 
    document.documentElement.childNodes[0].appendChild(script) 
    } 
})(window, document, "1.3.2", function($, jquery_loaded) { 
    $.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js', function(){ 
     console.log('loaded'); 
    }); 
}); 

Als ich dies ausführen, bekomme ich den ‚geladen‘ mesage, gefolgt von einer Fehlermeldung, dass „$ nicht definiert ist“ on line 15 von jquery-ui.js. Aber wie kann $ undefiniert sein, wenn ich $ .getScript() benutze, um jQuery UI zu laden? Und warum sehe ich die Nachricht "geladen" bevor ich den Fehler bekomme? Laut der jQuery-Dokumentation sollte getScript den Callback erst ausführen, wenn das Skript geladen und ausgeführt wurde.

Gibt es eine Möglichkeit, wie ich dieses Framework verwenden kann, um jQuery UI einzubinden, oder muss ich einen Skriptlader wie RequireJS verwenden, um alles zu laden, Abhängigkeiten zu erzwingen usw.?

Antwort

7

Durch den Aufruf .noConflict(1), das gleiche wie .noConflict(true), löschen Sie jQuery, entfernen Sie einfach die 1. Das Argument true zu .noConflict() teilt jQuery mit, nicht nur $ zu löschen, sondern window.jQuery, die jQuery UI versucht, danach zu verwenden, wenn es lädt.

You can test it here, siehe dort sind keine Fehler in der Konsole.

+0

bah! Das war's. Gut in FF/Chrome/Safari geladen. – venutip

+0

+1 für richtig sein :) – alex

+0

+ für Nick Craver. –