Estoy construyendo una web widget de jquery desde el tutorial encontrado aquí.

Básicamente, comprueba si jQuery cargado de lo contrario la carga. Mi widget simplemente muestra un botón y onClick muestra un fancybox que carga un iframe.

(function() {

//Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type","text/javascript");
    script_tag.setAttribute("src",
        "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
    if (script_tag.readyState) {
        script_tag.onreadystatechange = function () { //For old versions of IE
          if (this.readyState == 'complete' || this.readyState == 'loaded') {
            scriptLoadHandler();
          }
        };
    } else { //Other browsers
        script_tag.onload = scriptLoadHandler;
    }
    //Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] ||      document.documentElement).appendChild(script_tag);
} else {
    //The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    //Restore $ and window.jQuery to their previous values and store the
    //new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    //Call our main function
    main(); 
}

/******** Our main function ********/
function main() { 
    jQuery(document).ready(function($) { 
        //We can use jQuery 1.4.2 here

        /**** LOAD FANCYBOX ******/
        $.getScript("fancyboxURL");

        //I also tried loading fancybox here but that didnt work either
        $(".fancybox").fancybox();
    });
}

})(); //We call our anonymous function immediately

Cuando la carga de la página que estoy recibiendo el siguiente error.

Uncaught TypeError: undefined is not a function jquery.fancybox.pack.js?v=2.1.5:2
Uncaught TypeError: Cannot read property 'fancybox' of undefined jquery.fancybox-thumbs.js?v=1.0.7:19
Uncaught TypeError: Property '$' of object [object Object] is not a function 

Algunos intentos

En el archivo que el error Property "$" .... error viene, se lee actualmente

$(document).ready(function(){
  $(".fancybox").fancybox();
});

De otros hilos que he encontrado que yo debería tratar con

jQuery(function($){
  $(".fancybox").fancybox();
});

pero que sólo me dio Property "jQuery" of object is not a function.

Sé que el código funciona bien, porque si me incluir manualmente jQuery en mi archivo html funciona.

Mi archivo HTML a continuación:-

<html>
<head>
<!-- IF I UNCOMMENT THE BELOW LINE IT WORKS! Add jQuery library -->
<!-- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js">    </script>-->
</head>
<body>
<!-- load widget -->
<script src="http://mywidgetURL.../widget/myWidget.js" type="text/javascript"></script>
<div id="widget-container"></div>
</body>
</html>

Y el marcado que se genera cuando me Inspeccionar Elemento en Chrome parece indicar que jQuery es cargado.

  • No entiendo tu problema.
  • Pero la biblioteca jQuery deben ser incluidos por el widget javascript. Bien me deja editar mi pregunta para mostrar el código javascript.
  • cuando usted está incluyendo jQuery… hay una posibilidad de que cuando el $(document).ready(..) ejecuta el código de jQuery… puede que no se han cargado….
  • dónde estás usando $(document).ready(function(){.. código..?
InformationsquelleAutor chongzixin | 2013-10-24

4 Comentarios

  1. 1

    Existen al menos tres problemas (probablemente más).

    Utilizar jQuery.noConflict(true), el true dice jQuery, que no sólo se quiere restaurar la window.$ que fue establecida antes de jQuery estaba cargado, pero también la window.jQuery.

    Si no jQuery que se ha cargado en la página el objeto global window.jQuery estancias undefined.
    Para obtener fancybox de trabajo que necesita jQuery para estar disponible en el globale alcance, que no es tu caso. Es por eso que usted recibe este mensaje de error:

    Uncaught TypeError: indefinido no es una función de jquery.fancybox.pack.js?v=2.1.5:2

    Entonces usted tiene este mensaje de error:

    Uncaught TypeError: No se puede leer la propiedad «fancybox’ undefined jquery.fancybox-thumbs.js

    Esto demuestra que usted carga jquery.fancybox-thumbs.js en algún lugar, en un tiempo donde la jQuery no está disponible en el ámbito global (lo más probable es lo mismo que el anterior), al intentar acceder a fancybox que no está asignado a jQuery debido a la razón anterior.

    Sobre el último mensaje de error:

    Uncaught TypeError: la Propiedad ‘$’ del objeto [object object] no es una función

    Si esto sucede en su código publicados cuando llame $(document).ready( ... ), entonces es porque jQuery no está asignado a $ (noConflict). Pero jQuery(document).ready( ... ) en el main debería funcionar (debe corregir los errores en el orden en que tienen lugar, para asegurarse de que los otros no están de seguimiento de errores)

    Otro problema que tiene, que aparecerá cuando usted resolver los otros problemas es con:

     $.getScript("fancyboxURL");
    
     //I also tried loading fancybox here but that didnt work either
     $(".fancybox").fancybox();

    $.getScript("fancyboxURL"); cargas de secuencias de comandos asincrónica, por lo que en casi todos los casos facnybox no está cargado en el momento de llamar a $(".fancybox").fancybox();.

    EDITAR

    Para el código del widget que sugeriría que la sede de todos sus bibliotecas usted mismo o utilizar bibliotecas de soporte de AMD y un cargador de donde se puede crear un contexto de carga para los módulos.
    Yo actualmente puede sugerir que uno, porque tenemos un propio cargador.

    Otra solución sería la sede de todos sus plugins de jQuery ti mismo y envolverlos en una callback función.

    Algo así como que:

     function myWidgetScript_s7d8f6_fancybox(jQuery, $) {
           //the original code that is in the fancybox.js file
     }

    myWidgetScript_[algún número para evitar conflictos]_[nombre de secuencia de comandos modificada]

    Y en el código de hacer algo como esto

     jQuery.getScript( "modified.fancybox.js", function() {
           myWidgetScript_s7d8f6_fancybox(jQuery, jQuery);
           jQuery(".fancybox").fancybox();
    
     });
    • wow muchas gracias por el derramamiento de tanta luz. Voy a intentar resolver estos uno por uno ahora. Todas las sugerencias que usted nos interesa mucho también!
    • Así que estoy en lo cierto al decir que la primera cosa que debe mirar es tener jQuery en el ámbito global?
    • Así que no le ayudará mucho con el elegido de la biblioteca, pero para los widgets recomiendo usar AMD capaz de bibliotecas y de carga de estos por ejemplo, con requirejs
    • muchas gracias. No soy experto en javascript para la RequireJS sitio tiene un aspecto muy difícil de digerir para empezar. Si usted tiene cualquier tutoriales o clases voy a estar muy agradecida. 🙂
    • Actualizado mi respuesta. Yo no recomendaría a hacer su jQuery, fancybox y todas las demás dependencias estar disponibles en el ámbito global, debido a que este tiene un alto riesgo de conflictos, ya sea haciendo su widget se comportan mal, o la destrucción de de la página donde se incluyen. De todos modos, si usted no tiene mucha experiencia en JS probablemente no es la mejor idea para escribir un widget. Correctamente el aislamiento de código puede ser doloroso y requiere que usted sea capaz de leer y comprender los mensajes de error y de alcance.
    • Aclaración cuando la escritura de widgets que realmente debe usar window.jQuery.noConflict(true) con true. Pero esto hace que sea difícil para incluir otros plugins si usted no tiene experiencia en js desarrollador.

  2. 0

    Usted necesita para asegurarse de que todo el código javascript que usted hace de la página web está dentro de la «podemos utilizar jQuery 1.4.2 aquí» sección. Si es fuera de la sección, el navegador no será consciente de jQuery.

    • sí lo hice toda la carga dentro de la «podemos utilizar jQuery 1.4.2 aquí la sección» como usted ha mencionado, pero que no trabajo.
  3. 0

    El fancybox widget utiliza jQuery. Así que usted tiene que incluir, antes de usarla.

    Por lo que el flujo sería

    • incluir jQuery (no es necesario para comprobar si es la primera cosa que de todos modos)
    • incluyen fancybox
    • Uso de documento listo para inicializar fancybox, como en el anterior.

    Algo como esto:

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    
    <script src="http://mywidgetURL.../widget/myWidget.js" type="text/javascript"></script>
    
    <script type="text/javascript">
         $(function(){
              $(".fancybox").fancybox();
         });
    </script>
    • sí que lo hice, o al menos creo que lo hice de esa manera. Ha editado el «podemos utilizar jQuery 1.4.2 aquí» sección de mi código de arriba para ver más.
  4. 0

    Probar este,

    <script>
       //code to load jquery version 1.4.2 if not exists
       (window.jQuery && window.jQuery.fn.jquery !== '1.4.2')  || 
            document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"><\/script>');
    </script>
    <!-- include your fancybox plugin to work properlly -->
    <script src="path_of_your_js_folder/fancybox-plugin.js"></script>
    <script>
        //code to initialize your fancybox
        $(document).ready(function(){
           $(".fancybox").fancybox();
        });
    </script>
    • Esta no es la mejor solución para un widget de código, ya que es necesario que todo este montón de código html ha de ser incluido en el código html, sin posibilidad de ser modificados posteriormente.

Dejar respuesta

Please enter your comment!
Please enter your name here