Невозможно загрузить jquery-ui динамически - a не определено

Question

Итак, я пытаюсь создать встраиваемый виджет, который будет хорошо играть с другими, когда он будет загружен на внешний веб-сайт. Поскольку я никогда не делал этого, прежде чем я следовал отличному учебному пособию Алекса Марандона по телефону how to build a web widget. Я могу загрузить jquery (1.7.1), однако, когда я пытаюсь загрузить jquery-ui (1.8.16) - из w/в JS - я получаю JS-ошибку, в которой говорится, что «a не определено». Следующий скрипку воспроизводит то, что я вижу:

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

Теперь, если я объединить JQuery и jqueryui в один файл и поместить его на мой сервер работает нормально, но это меньше, чем оптимальные по целому ряду причин и я хотел бы избежать этого, если это возможно. Другая странная вещь: если я пытаюсь загрузить любой другой JS-файл вместо jqueryui, файл загружается просто отлично; ясно, что там что-то не хватает.

Заранее спасибо.

Update:

скрипку содержат всю необходимую коду, но я буду включать яваскрипту часть ниже. Код ждет, пока браузер не загрузит jquery, а затем он сделает запрос на загрузку jqueryui. Я фактически использую jquery для печати отладочных операторов до и после запроса на загрузку jqueryui, поэтому jquery определенно «доступен». Только для хихиканья я пытался отложить загрузку jqueryui до 3 секунд после того, как браузер определит, что jquery загружен, и я получаю ту же проблему.

(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 плагина готового Dóm вызова по выбору
• выбора для каждого экземпляра нового плагина
• плагин инициализации()
  • добавить зависимости, если не существует
  • визуализации Plugin
  • window.load - функциональность> связывать JQuery-щ

Сыграв с этим для бит, я, наконец, придумал немного лучшую функцию добавления зависимостей, хотя мне нужно взглянуть на проверку на существование, также вы можете также взглянуть на 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 UI 1.8.16 на страницу с jQuery 1.9

Проблема заключалась в том, что функция «.browser» устарела.

Переключение на JQuery V1.7.2 полностью устраняет проблему. Надеюсь, это поможет кому-то еще