Как правильно подключить js-скрипт динамически?

Question

[Александр]

Здравствуйте.
Друзья, подскажите, как правильно подключить js динамически?
Нашел функцию:

function loadjscssfile(filename,filetype){if(filetype=="js"){var fileref=document.createElement("script");fileref.setAttribute("type","text/javascript");fileref.setAttribute("src",filename)}else{if(filetype=="css"){var fileref=document.createElement("link");fileref.setAttribute("rel","stylesheet");fileref.setAttribute("type","text/css");fileref.setAttribute("href",filename)}}if(typeof fileref!="undefined"){document.getElementsByTagName("head")[0].appendChild(fileref)}};

Нужно подключить файлы jquery-календаря и отобразить данный календарь по клику на span объект страницы..
Вот код:

$('span.gocal').live('click', function() {    
loadjscssfile("/js/jquery.pickmeup.min.js", "js");  
loadjscssfile("/css/pickmeup.min.css", "css");  
$('span.gocalact').pickmeup({
		flat	: true
	});  

  });

на первый клик идет почему-то только подгрузка js и css файлов.. На второй клик подгружается календарь..
Я что-то делаю неправильно?

Answer 1

[Иван]

А нужны ли такие сложности? Можно же через AJAX подгрузить div блок (например), в который поместить сразу теги script и style. Содержимое выполнится при загрузе. Но насколько это валидно не знаю.

Answer 2

[Stalker_RED]

Вы вызываете $('span.gocalact').pickmeup() в тот момент, когда jquery.pickmeup.min.js еще не успел загрузиться.

Чтобы не подключать скрипты при каждом нажатии можно добавить проверку
вот на примере плагина combobox

function loadComboboxPlugin() {
    if(!$.fn.combobox){ // if not loaded yet
        $('head').append('<link rel="stylesheet" href="/style/class/css/bootstrap-combobox-plugin.css" type="text/css" />');
        $('head').append('<script src="/style/class/js/bootstrap-combobox-plugin.js" type="text/javascript"></script>');
    }
    $('select.combobox').combobox() // convert 'select.combobox'
}
if($('.combobox').exists()) {
    loadComboboxPlugin()
}

Comments

[Александр]

Сделал проверку..
$('span.gocalact').live('click', function() {

if(!$.fn.pickmeup){
loadjscssfile("/engine/classes/js/jquery.pickmeup.min.js", "js");
loadjscssfile("/engine/classes/css/pickmeup.min.css", "css");
}
$('span.gocalact').pickmeup({
flat : true
});


});

А не подскажете, как сделать так, чтобы jquery.pickmeup.min.js успевал загружаться?
Буду очень благодарен)

[Stalker_RED]

Александр: stackoverflow.com/questions/8586446/dynamically-lo...

Answer 3

[Пума Тайланд]

Проверьте консоль на ошибки, скорее всего pickmeup после первого клика выполняется раньше чем подгружается js файл,
да и в целом похоже у вас скрипты накидываются каждое нажатие

Comments

[Александр]

Вы правы. Убрал накидывание.. А как сделать так, чтобы pickmeup выполнялся после загрузки данных скриптов?(

Answer 4

[Александр Золотых]

Используйте готовую библиотеку yepnopejs.com

Comments

[Валентин Дубровский]

Огромными буквами на главной странице, для таких как вы - Yepnope has been deprecated. There are new best practices that you should likely follow instead. Please read our notice here. We will keep these docs online for those still using the old version.

[Александр Золотых]

Валентин Дубровский: это чем то мешает использовать данную библиотеку?

Answer 5

[Dmitriy Mozgovoy]

Вырвал из своей библиотеки, кажется убрал все зависимости, должен быть рабочий, использует Promise:

function loadScript(src,_timeout) {

           return new Promise(function(resolve, reject){
               if(!src){
                   reject(new TypeError("filename is missing"));
                   return;
               }

               var script=document.createElement("script"),
                   timer,
                   head=document.getElementsByTagName("head")[0];


               head.appendChild(script);

               function leanup(){
                   clearTimeout(timer);
                   timer=null;
                   script.onerror=script.onreadystatechange=script.onload=null;
               }

               function onload(){
                   leanup();
                   if(!script.onreadystatechange||(script.readyState&&script.readyState=="complete")){
                       resolve(script);
                   }
               }

               script.onerror=function(error){
                   leanup();
                   head.removeChild(script);
                   script=null;
                   reject(new Error("network"));
               };

               if (script.onreadystatechange === undefined) {
                   script.onload = onload;
               } else {
                   script.onreadystatechange = onload;
               }

               timer=setTimeout(script.onerror,_timeout||30000);
               script.setAttribute("type", "text/javascript");
               script.setAttribute("src", src);
           });
       }

       function loadCSS(src, _timeout) {
           var css = document.createElement('link'), c = 1000;
           document.getElementsByTagName('head')[0].appendChild(css);
           css.setAttribute("rel", "stylesheet");
           css.setAttribute("type", "text/css");


           return new Promise(function(resolve, reject){
               var c=(_timeout||10)*100;
               if(src) {
                   css.onerror = function (error) {
                       if(timer)clearInterval(timer);
                       timer = null;

                       reject(new Error("network"));
                   };

                   var sheet, cssRules, timer;
                   if ('sheet' in css) {
                       sheet = 'sheet';
                       cssRules = 'cssRules';
                   }
                   else {
                       sheet = 'styleSheet';
                       cssRules = 'rules';
                   }
                   timer = setInterval(function(){
                       try {
                           if (css[sheet] && css[sheet][cssRules].length) {
                               clearInterval(timer);
                               timer = null;
                               resolve(css);
                               return;
                           }
                       }catch(e){}

                       if(c--<0){
                           clearInterval(timer);
                           timer = null;
                           reject(new Error("timeout"));
                       }
                   }, 10);

                   css.setAttribute("href", src);
               }else{
                   reject(new TypeError("filename is missing"));
               }
           });
       }

Вызывать так:

loadScript("/engine/classes/js/jquery.pickmeup.min.js").then(function(){
           console.log("js ready");
       },function(error){
           console.log(error);
       })

       loadCSS("/engine/classes/css/pickmeup.min.css").then(function(){
           console.log("css ready");
       },function(error){
           console.log(error);
       })

https://jsfiddle.net/2rfqh464/