無法動態加載jquery-ui -a未定義

Question

所以我試圖構建一個可嵌入的小部件，它會在外部網站上加載時很好地播放。由於我從來沒有這樣做過，所以我在跟隨由Alex Marandon編寫的偉大教程how to build a web widget。我能夠加載jquery（1.7.1），但是，無論何時我試圖從JS中加載jquery-ui（1.8.16） - 我得到一個JS錯誤，指出「a未定義」。下面的小提琴再現我所看到的：

http://jsfiddle.net/malonso/qfBLx/

現在，如果我結合jQuery和jQueryUI的到一個單一的文件，並把它放在我的服務器上工作正常，但就是達不到最佳的多種原因如果可能，我想避免這種情況。另一個奇怪的是，如果我試圖加載任何其他的JS文件來代替jqueryui，文件加載就好了;顯然我錯過了那裏的一些東西。

在此先感謝。

更新：

小提琴包含了所有相關的代碼，但我將包括下列的JavaScript部分。代碼等待，直到瀏覽器加載jquery，然後它發出加載jqueryui的請求。實際上我使用jquery在請求加載jqueryui之前和之後打印調試語句，所以jquery肯定是「可用的」。只是爲了笑笑，我試圖延遲jqueryui的加載，直到瀏覽器確定jquery加載後3秒，並且我遇到同樣的問題。

(function() { 

// Localize jQuery variable 
var jQuery; 

/******** Load jQuery if not present *********/ 
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.7.1') { 
    var script_tag = document.createElement('script'); 
    script_tag.setAttribute("type","text/javascript"); 
    script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"); 
    if (script_tag.readyState) { 
     script_tag.onreadystatechange = function() { // For old versions of IE 
      if (this.readyState == 'complete' || this.readyState == 'loaded') { 
       scriptLoadHandler(); 
      } 
     }; 
    } else { 
     script_tag.onload = 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() { 
    jQuery(document).ready(function($) { 
     loadJS(); 

    }); 
} 

function loadJS(){ 
    jQuery('#debug').append("About to load jquery-ui<br>"); 
    var script_tag = document.createElement('script'); 
    script_tag.setAttribute("type","text/javascript"); 
    script_tag.setAttribute("src","http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"); 
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); 
    jQuery('#debug').append("Request made to load jquery-ui<br>"); 
} 


})(); // We call our anonymous function immediately 

Answer 1

如果您認爲問題在於腳本標籤沒有被添加我發現這是一個有點棘手，但下面就是我使用，它似乎是工作，雖然我不是服務於JS從剛讀文件，我也沒有嘗試過jquery-ui。 一如既往裏程可能會有所不同

// add additional javascripts 
$.fn.addJavascript = function(src) { 
    if (!$('script[src="' + src + '"]').exists()) { 
     var script = document.createElement('script'); 
     script.setAttribute('type', 'text/javascript'); 
     script.setAttribute('src', src); 
     document.getElementsByTagName("head")[0].appendChild(script); 
    } 
}; 

// .exists() helper 
$.fn.exists = function() { 
    return this.length !== 0; 
}; 

// usage 
var d = ["lib/json2.js", "lib/jquery-ui.js"]; 
for (var i=0; i < d.length; i++) { 
    $.fn.addJavascript(d[i]); 
} 

我取得了一些成功加入我用寫插件中的jQuery UI的功能，這樣做它像這樣的$(window).load(function() { foo.draggable });我已經有jQuery的加載，雖然和「一連串事件「會去像

• 頁面加載使用jQuery
上選擇
• jQuery的DOM準備調用插件
• 選擇爲每個實例的新插件
• 插件的init（）
  • 添加依賴性如果不存在
  • 渲染插件
  • window.load - >綁定的jQuery UI的功能

打過這個了我終於想出了一個稍微更好的依賴關係添加功能，雖然我需要看看檢查存在，也可以看看this question

function addDependencies(args) { 
    var head = document.getElementsByTagName('head')[0]; 
    for (var i=0; i < args.length; i++) { 
    var src = args[i]; 
    var isCss = src.match(/.+\.css$/i); 
    var isJs = src.match(/.+\.js$/i); 

    if (isCss) { 
     if (document.createStyleSheet) { 
     document.createStyleSheet(src); 
     } else { 
     var style = document.createElement('link'); 
     style.type = 'text/css'; 
     style.rel = 'stylesheet'; 
     style.href = src; 
     head.appendChild(style); 
     } 
    } else if (isJs) { 
     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.src = src; 
     // script.onload = ; 
     head.appendChild(script); 
    } 
    } 
    return true; 
} 

(function() { 
    var dependencies = [ 
    "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", 
    "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js", 
    "http://ajax.googleapis.com/ajax/libs/yui/2.8.0r4/build/reset-fonts-grids/reset-fonts-grids.css" 
    ]; 

    addDependencies(dependencies); 

    $(document).ready(function() { 
    $('#foo').draggable(); 
    }); 

})(); 

這裏是一個demo

Answer 2

這是一個有點反應遲緩的，但我碰到這個錯誤何時到來動態插入JQuery用戶界面1.8。使用jQuery 1.9將頁面轉換爲頁面16

問題在於「$ .browser」函​​數已被棄用。

切換到Jquery V1.7.2完全解決了我的問題。希望這可以幫助別人