getScript函数工作，但没有得到一些CSS
问题描述：
So every time I am loading my getScript function on ajax success some of the js are working some of it are not. but if i'm loading trying to load it on my footer.php it's working. but I need to load it dynamically since I am using ajax to load my pages and I need my js files to load everytime I change content and also it looks like my .js files aren't getting the css from the page. Here's my code to load the scripts.
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);
});
}
});
});
答
Maybe the following will work better, even though it's not documented the function getScript of jQuery returns a promise, you can use that. $.ajax returns a promise too so you can use that.
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
);
});