用getScript加载jQuery UI

Question

我想构建一个需要人加载jQuery和jQuery.UI的小部件。

获取jQuery加载不是一个问题，但添加用户界面的头只是不工作，我不断收到此错误。

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在jQuery UI开始加载时没有“定义”。是的，即使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); 
}); 

// ... 

Answer 2

我的功能添加原始脚本文本，它的工作。但还没有尝试.src

function addScript(content) { 
    var script = document.createElement("SCRIPT"); 

    script.type = "text/jscript"; 
    script.text = content; 

    self.document.getElementsByTagName('head')[0].appendChild(script); 

    if(navigator.userAgent.toLowerCase().indexOf('msie') < 0)// it's not IE 
     eval(content); 
} 

ooooh我的坏。

/*加载HTML */

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

变化

/******* 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

这个问题似乎是你的主要功能。您正在加载jQuery UI，然后调用jQuery（document）.ready（）。 ready（）将立即触发，因为DOM已经加载。所以你开始加载jQuery UI，然后在加载jQuery UI之前立即执行jQuery UI代码。您应该将您的函数与jQuery UI代码一起传递给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/

更新：您需要执行你的jQueryUI的代码之后jQueryUI的完全加载。现在你试图在jQueryUI加载时执行jQueryUI代码。试试这个。请注意，我没有使用$（document）.ready（），而是在成功完成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

这可能是矫枉过正的情况，但LAB.js很小，MIT许可，并提供了一个非常强大的框架，用于对脚本加载进行细粒度控制。例如：

$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");