使用getScript加载jQuery UI [英] Loading jQuery UI with getScript

问题描述

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

I am trying to build a widget which requires the person to load jQuery and jQuery.UI.

让jQuery加载不是问题，但是将ui添加到标头中却无法正常工作，而我一直收到此错误.

Getting the jQuery to load is not a problem but adding ui the the header is just not working and I keep getting this error.

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

有什么办法可以解决这个问题吗?

Any ideas how I can resolve this ?

推荐答案

我之前遇到过这个问题-jQuery UI开始加载时jQuery尚未定义".是的，即使jQuery正在加载它，这也可能是正确的！ ;-)

I've run into this one before — jQuery isn't "defined" when jQuery UI begins to load. Yes, this can be true even if jQuery is loading it! ;-)

jQuery UI脚本将全局名称 jQuery作为其第一个参数.直到调用jQuery.noConflict(true)之后，您才加载jQuery UI，这会从全局对象(window)中删除jQuery.

The jQuery UI script takes the global name jQuery as its first argument. You aren't loading jQuery UI until after you've called jQuery.noConflict(true), which removes jQuery from the global object (window).

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

There are two ways to solve this. If you're okay leaving window.jQuery intact, simply remove the true from your noConflict call; this relinquishes control over $ but leaves jQuery around for jQuery UI to use:

/******** 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上的回调中:

Alternatively, move your noConflict call into a callback on 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);
});

// ...

这篇关于使用getScript加载jQuery UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！