Chargement de l'interface utilisateur jQuery avec getScript

Question

J'essaye de créer un widget qui nécessite que la personne charge jQuery et jQuery.UI.

Obtenir le chargement de jQuery n'est pas un problème, mais ajouter ui l'en-tête ne fonctionne tout simplement pas et je reçois cette erreur.

b is undefined 
[Break on this error] (function(b,c){function f(g){return!b(...NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106, 

Voici le script dans sa forme simple.

(function() { 

// Localize jQuery variable 
var jQuery; 

/******** Load jQuery if not present *********/ 
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.4') { 
    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.4/jquery.min.js"); 
    script_tag.onload = scriptLoadHandler; 
    script_tag.onreadystatechange = function() { // Same thing but for IE 
     if (this.readyState == 'complete' || this.readyState == 'loaded') { 
      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() { 

// Add some validation here to make sure UI is not loaded etc... 
jQuery.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js'); 

jQuery(document).ready(function($) 
{  
    var date = new Date(); 
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); 
    $('.datepicker').datepicker({minDate: new Date(y, m, d)}); 

    /******* Load HTML *******/ 
    var jsonp_url = "/search/form/%AFFILIATE_ID%/%FORM_TYPE%/"; 
    $.getJSON(jsonp_url, function(data) 
    { 
     $('#my-widget').html(data); 
    }); 

}); 
} 

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

Des idées comment je peux résoudre ce problème?

Answer 1

J'ai couru dans celui-ci avant - jQuery n'est pas « défini » lorsque jQuery UI commence à se charger. Oui, cela peut être vrai même si jQuery le charge! ;-)

Le script de l'interface utilisateur jQuery prend le nom globaljQuery comme premier argument. Vous ne chargez pas l'interface utilisateur jQuery tant que vous n'avez pas appelé jQuery.noConflict(true), ce qui supprime jQuery de l'objet global (window).

Il y a deux façons de résoudre ce problème.Si vous acceptez de laisser intact window.jQuery, supprimez simplement le true de votre appel noConflict; ce perdre le contrôle de $ mais laisse jQuery autour de jQuery UI à utiliser:

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

Vous pouvez également déplacer votre noConflict appel en rappel sur getScript:

/******** Called once jQuery has loaded ******/ 
function scriptLoadHandler() { 
    // Store jQuery in a local variable so it can be removed later 
    jQuery = window.jQuery; 
    // Call our main function 
    main(); 
} 

/******** Our main function ********/ 

function main() { 

// Add some validation here to make sure UI is not loaded etc... 
jQuery.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', function() { 
    jQuery.noConflict(true); 
}); 

// ... 

Answer 2

ma fonction ajoute un texte de script brut et c'est du travail. mais ne pas essayer .src

ooooh mon mauvais.

/* charge HTML */

var jsonp_url = "/search/form/%AFFILIATE_ID%/%FORM_TYPE%/"; 
$.getJSON(jsonp_url, function(data) 
{ 
    $('#my-widget').html(data); 
}); 

changement

/******* Load HTML *******/ 
var jsonp_url = "/search/form/%AFFILIATE_ID%/%FORM_TYPE%/"; 
$('#my-widget').load(jsonp_url, function(response, status, xhr) 
{ 
    $(this).html(response); 
}); 

; D

Answer 3

Le problème semble être votre principale fonction. Vous chargez l'interface utilisateur jQuery, puis appelez jQuery (document) .ready(). ready() se déclenchera immédiatement car le DOM est déjà chargé. Vous commencez donc à charger l'interface utilisateur jQuery, puis vous exécutez immédiatement le code de l'interface utilisateur jQuery avant le chargement de l'interface utilisateur jQuery. Vous devez passer votre fonction avec le code de l'interface utilisateur jQuery dans le gestionnaire de succès pour getScript().

jQuery.getScript(url, [ success(data, textStatus) ]) 
    url - A string containing the URL to which the request is sent. 
    success(data, textStatus) - A callback function that is executed if the request succeeds. 

http://api.jquery.com/jQuery.getScript/

MISE À JOUR: Vous devez exécuter votre code jQueryUI après jQueryUI est complètement chargée. En ce moment, vous essayez d'exécuter le code jQueryUI pendant le chargement de jQueryUI. Essayez ceci à la place. Notez comment je n'utilise pas $ (document) .ready(), mais à la place d'enregistrer une fonction anonyme à exécuter après l'exécution réussie de jQuery.getScript().

function main() { 
    // Add some validation here to make sure UI is not loaded etc... 
    jQuery.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', 
     function() { 
      var $ = jQuery; // Since we don't get this as an event parameter and we're using jQuery.noConflict() 
      var date = new Date(); 
      var m = date.getMonth(), d = date.getDate(), y = date.getFullYear(); 
      $('.datepicker').datepicker({minDate: new Date(y, m, d)}); 

      /******* Load HTML *******/ 
      var jsonp_url = "/search/form/%AFFILIATE_ID%/%FORM_TYPE%/"; 
      $.getJSON(jsonp_url, function(data) { 
       $('#my-widget').html(data); 
      }); 
     }); 
} 

Answer 4

Il est peut-être trop pour votre situation, mais LAB.js est petit, sous licence MIT, et offre un cadre très robuste pour un contrôle précis du chargement des scripts. Par exemple:

$LAB 
    .script("must_be_first.js").wait() 
    .script("jquery.js")      // wait for must_be_first.js 
    .script("romulus.js,remus.js").wait()  // any order  
    .script("jquery-ui.js").wait(function(){ // not until all above executed 
    do_stuff();       
    do_other_stuff(); 
    }).wait() 
    .script("must_come_last.js");