jquery - 使用 getScript 加载 jQuery UI

Question

我正在尝试构建一个需要人员加载 jQuery 和 jQuery.UI 的小部件。

加载 jQuery 不是问题，但在标题中添加 ui 却不起作用，我一直收到此错误。

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

这是简单形式的脚本。

(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

有什么想法可以解决这个问题吗？

Answer 1

我以前遇到过这个问题 — 当 jQuery UI 开始加载时，jQuery 并未“定义”。是的，即使 jQuery 正在加载它，这也可能是真的! ;-)

jQuery UI 脚本采用全局名称 jQuery 作为其第一个参数。在调用 jQuery.noConflict(true) 之前，您不会加载 jQuery UI，这会从全局对象 (window) 中删除 jQuery。

有两种方法可以解决这个问题。如果您可以保持 window.jQuery 不变，只需从 noConflict 调用中删除 true 即可；这放弃了对 $ 的控制，但留下了 jQuery 供 jQuery UI 使用:

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

或者，将 noConflict 调用移至 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);
});

// ...