0

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);
      });
    }
  });
});
Danny Fardy Jhonston Bermúdez
  • 5,500
  • 5
  • 25
  • 37
RealRich
  • 47
  • 7

1 Answers1

2

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
  );        

});
HMR
  • 37,593
  • 24
  • 91
  • 160
  • Hi, thank you for this. so I want to load all the js files since I'm using them to every content. my one big problem is that. some of it is working. some of it is not working and I don't know why. and btw I tried yours guess it's not working on me – RealRich Nov 13 '17 at 06:09
  • it's saying body.js:66 Failed: TypeError: Cannot read property 'then' of undefined – RealRich Nov 13 '17 at 06:09
  • @RealRich If you run the following in the console `$.getScript("anything").then` does it show you undefined? What version of jQuery are you using (`$.fn.jquery`)? What is the code block that produced that error (click on the link on the right side of the error)? – HMR Nov 13 '17 at 06:13
  • it's this line. .then(x => data); //return data after getscript is done – RealRich Nov 13 '17 at 06:16
  • I am using 3.2.1 – RealRich Nov 13 '17 at 06:17
  • @RealRich Updated the anser, forgot to return the promise in getScripts: `return jQuery.when.apply(` – HMR Nov 13 '17 at 06:29
  • Hi, I'm getting this. ƒ (b,d,e){var f=0;function g(b,c,d,e){return function(){var h=this,i=arguments,j=function(){var a,j;if(!(b – RealRich Nov 13 '17 at 06:30
  • @RealRich Updated the anser, forgot to return the promise in getScripts: `return jQuery.when.apply(` – HMR Nov 13 '17 at 06:41
  • it's working but the problem is some of the js is not functioning – RealRich Nov 13 '17 at 06:44
  • @RealRich I don't think you are solving the problem in the right way, why would you reload all the scripts after setting some html with the response of an xhr? Anyway; `some of the js is not functioning` is in no way helpful to figure out the cause of why it's not working. You may as well say the sun is shining here but script isn't working. – HMR Nov 13 '17 at 06:47
  • it's loading the scripts. I can see it in network that they are all loaded. the problem now is that for example on my table I am using datatables. it's not working with the table. I am trying this method of loading my js files since I want to change the content of the page only. a specific page only. and I already did it with the use of ajax while my js files are loaded on the footer. but with that the content that has been loaded is not getting the javascript functionality. that's why I am trying this method – RealRich Nov 13 '17 at 06:49
  • @RealRich You could try to set the html before loading all the scripts so `$('#inside').html(data)` before `getScripts(scripts)` I updated the answer. – HMR Nov 13 '17 at 06:53
  • well it's actually working. but... working the same way my first code works. it loaded the scripts. but.. for example my datatable. the datatable is working but not getting the design from my css. so it's working like a default datatable and still some js is not working. really sorry for the disturbance – RealRich Nov 13 '17 at 06:58
  • let me rephrase what I meant. it's working, all the js are working. the problem now is that every data related to the js that is loaded inside $('#inside).html(data); is not working with the css. – RealRich Nov 13 '17 at 07:03
  • @RealRich so setting the html with the data before reloading the scripts (see updated answer) did not solve it? This may be a css issue, did you inspect the element and see if your css is applied? – HMR Nov 13 '17 at 07:11
  • yeah. all css were loaded though.. i don't know why it's not applied on the content loaded inside $('#inside').html(data) – RealRich Nov 13 '17 at 07:18
  • well I noticed... at some point it loads the css. then it wont again. – RealRich Nov 13 '17 at 07:19
  • do you have any ideas with this? @hmr – RealRich Nov 13 '17 at 08:07