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

前に、私はこの1つに遭遇しました - jQueryのUIのロードが開始するときにjQueryは、「定義された」されていません。はい、これはjQueryがロードしていても当てはまります！ ;-)

jQuery UIスクリプトは、最初の引数としてグローバル名jQueryをとります。 jQuery.noConflict(true)を呼び出してから、jQueryをグローバルオブジェクト（window）から削除するまで、jQuery UIをロードしていません。

これを解決するには2通りの方法があります。window.jQueryをそのまま残してもよければ、noConflictコールからtrueを削除するだけです。これは$の制御を放棄したが使用するjQueryのUIの周りjQueryを残し：

また

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

を、getScriptにコールバックにあなたのnoConflictコールを移動：

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

私の悪い。

/*負荷HTML

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

に*/

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

変更; D

Answer 3

問題は、あなたの主な機能であるように思われます。 jQuery UIをロードしてから、jQuery（document）.ready（）を呼び出しています。 ready（）は、DOMがすでにロードされているため、すぐに起動します。したがって、jQuery UIの読み込みを開始してから、jQuery UIがロードされる前にすぐにjQuery UIコードを実行します。 getScript（）の成功ハンドラにjQuery UIコードを含む関数を渡す必要があります。

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/

UPDATE：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");