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

Здравствуйте.
Друзья, подскажите, как правильно подключить 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 файлов.. На второй клик подгружается календарь..
Я что-то делаю неправильно?
  • Вопрос задан
  • 3975 просмотров
Пригласить эксперта
Ответы на вопрос 5
@LiguidCool
А нужны ли такие сложности? Можно же через AJAX подгрузить div блок (например), в который поместить сразу теги script и style. Содержимое выполнится при загрузе. Но насколько это валидно не знаю.
Ответ написан
Комментировать
Stalker_RED
@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()
}
Ответ написан
opium
@opium
Просто люблю качественно работать
Проверьте консоль на ошибки, скорее всего pickmeup после первого клика выполняется раньше чем подгружается js файл,
да и в целом похоже у вас скрипты накидываются каждое нажатие
Ответ написан
@zolotykh
web-разработчик
Используйте готовую библиотеку yepnopejs.com
Ответ написан
DIITHiTech
@DIITHiTech
Fullstack javascript developer
Вырвал из своей библиотеки, кажется убрал все зависимости, должен быть рабочий, использует 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/
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы