Поэтому каждый раз, когда я загружаю функцию getScript в ajax-успех, некоторые из js работают, некоторые из них не являются. но если я загружаюсь, пытаясь загрузить его на мой footer.php, он работает. но мне нужно загрузить его динамически, так как я использую ajax для загрузки моих страниц, и мне нужно, чтобы файлы js загружались каждый раз, когда я меняю контент, а также похоже, что мои .js-файлы не получают css со страницы. Вот мой код для загрузки скриптов.
JS
var base_url = window.location.origin; if (window.location.pathname.split('/')[1] === 'music' || window.location.pathname.split('/')[1] === 'musicsystem') base_url = base_url + '/' + window.location.pathname.split('/')[1]; $(document).ready(function() { $.ajax({ async: false, url: base_url + '/dashboard/index', success: function(data) { var getScript = jQuery.getScript; jQuery.getScript = function(resources, callback) { var length = resources.length, handler = function() { counter++; }, deferreds = [], counter = 0, idx = 0; for (idx; idx < length; idx++) { deferreds.push(getScript(resources[idx], handler)); } jQuery.when.apply(null, deferreds).then(function() { callback && callback(); }); }; var scripts = [ base_url + "/assets/bower_components/jquery/dist/jquery.min.js", base_url + "/assets/bower_components/bootstrap/dist/js/bootstrap.min.js", base_url + "/assets/bower_components/jquery-ui/jquery-ui.min.js", base_url + "/assets/bower_components/datatables.net/js/jquery.dataTables.min.js", base_url + "/assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js", base_url + "/assets/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js", base_url + "/assets/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js", base_url + "/assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js", base_url + "/assets/bower_components/jquery-knob/dist/jquery.knob.min.js", base_url + "/assets/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js", base_url + "/assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js", base_url + "/assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js", base_url + "/assets/bower_components/fastclick/lib/fastclick.js", base_url + "/assets/dist/js/adminlte.min.js", base_url + "/assets/dist/js/pages/dashboard.js", base_url + "/assets/plugins/iCheck/icheck.min.js", base_url + "/assets/dist/js/demo.js", base_url + "/assets/js/dataTables.colReorder.min.js", base_url + "/assets/dist/js/clipboard.js", base_url + "/assets/js/audio.min.js", base_url + "/assets/js/config.js", base_url + "/assets/js/dropzone.js", base_url + "/assets/js/howler.js", base_url + "/assets/js/upload.js", base_url + "/assets/js/player.js", base_url + "/assets/js/songdraganddrop.js", base_url + "/assets/js/pitching.js", base_url + "/assets/js/share.js", base_url + "/assets/js/alertify.js", base_url + "/assets/bower_components/select2/dist/js/select2.full.min.js", base_url + "/assets/js/newscript.js" ]; $.getScript(scripts, function(data, textStatus) { $('#inside').html(data); }); } }); });
Возможно, следующее будет работать лучше, даже если это не документировано. Функция getScript jQuery возвращает обещание, вы можете использовать это. $ .ajax возвращает обещание, чтобы вы могли его использовать.
var base_url = window.location.origin;
if (window.location.pathname.split('/')[1] === 'music' || window.location.pathname.split('/')[1] === 'musicsystem') base_url = base_url + '/' + window.location.pathname.split('/')[1]; const getScripts = resources => { return jQuery.when.apply( null ,resources.map( resource => $.getScript(base_url + resource) ) ) ; } $(document).ready(function() { $.ajax({ //async: false,//are you kidding? async false is still a thing???? I assume you'd like someone to hire you at some point in time right? url: base_url + '/dashboard/index' }) .then( data => { const scripts = [ //are you sure you'd want to load all the scripts? //I'm pretty sure you don't need to load your libraries again //would be simpler to write a js function that will initialize //the new content that's on the page instead of this "/assets/bower_components/jquery/dist/jquery.min.js", "/assets/bower_components/bootstrap/dist/js/bootstrap.min.js", "/assets/bower_components/jquery-ui/jquery-ui.min.js", "/assets/bower_components/datatables.net/js/jquery.dataTables.min.js", "/assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js", "/assets/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js", "/assets/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js", "/assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js", "/assets/bower_components/jquery-knob/dist/jquery.knob.min.js", "/assets/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js", "/assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js", "/assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js", "/assets/bower_components/fastclick/lib/fastclick.js", "/assets/dist/js/adminlte.min.js", "/assets/dist/js/pages/dashboard.js", "/assets/plugins/iCheck/icheck.min.js", "/assets/dist/js/demo.js", "/assets/js/dataTables.colReorder.min.js", "/assets/dist/js/clipboard.js", "/assets/js/audio.min.js", "/assets/js/config.js", "/assets/js/dropzone.js", "/assets/js/howler.js", "/assets/js/upload.js", "/assets/js/player.js", "/assets/js/songdraganddrop.js", "/assets/js/pitching.js", "/assets/js/share.js", "/assets/js/alertify.js", "/assets/bower_components/select2/dist/js/select2.full.min.js", "/assets/js/newscript.js" ]; $('#inside').html(data);//set the html before loading the scripts return getScripts(scripts) .then(x=>data);//return data after getscript is done } ) .then( undefined ,err => console.warn("Failed:",err)//handle the error ); });