2010-12-13 16 views
7

He creado un widget de JavaScript que debe poder integrarse en cualquier sitio de terceros, en cualquier entorno. El widget se basa en jQuery y jQuery UI. Seguí los pasos en How to embed Javascript widget that depends on jQuery into an unknown environment para agregar jQuery de manera responsable: funciona muy bien para incorporar jQuery. Pero cuando intento agregar jQuery UI, falla. Aquí está el código:¿Por qué jQuery UI no ve jQuery?

(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'); 
    }); 
}); 

Cuando ejecuto esto, tengo la mesage 'cargado', seguido de un error que dice que "no está definido $" en la línea 15 de jquery-ui.js. ¿Pero cómo puede $ ser indefinido cuando estoy usando $ .getScript() para cargar jQuery UI? ¿Y por qué veo el mensaje 'cargado' antes de obtener el error? De acuerdo con la documentación de jQuery, getScript no debe ejecutar la devolución de llamada hasta que el script se haya cargado y ejecutado.

¿Hay alguna manera en que pueda usar este marco para incluir jQuery UI, o necesito usar un gestor de comandos como RequireJS para cargar todo, aplicar dependencias, etc.?

Respuesta

7

Llamando .noConflict(1), lo mismo que .noConflict(true), está eliminando jQuery, simplemente elimine 1. El argumento true al .noConflict() le dice a jQuery que elimine no solo $, sino también window.jQuery, que la interfaz de usuario de jQuery está intentando usar después, cuando carga.

You can test it here, vea que no hay errores en la consola.

+0

bah! Eso fue todo. Cargando bien en FF/Chrome/Safari. – venutip

+0

+1 por tener razón :) – alex

+0

+ por ser Nick Craver. –