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完好无损，只需从true电话中移除noConflict即可;这放弃了对$的控制权，但留下了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

问题似乎是您的主要功能。您正在加载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 3

对于您的情况可能有点过分，但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");

Answer 4

我的函数添加原始脚本文本，它的工作。但是没有试过.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);
}

哦，我的坏。

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

使用getScript加载jQuery UI

4 个答案: