Load multiple js files all at once on ajax success - javascript

Question

so right now I have this code. on ajax success it dynamically loads my js files. but my point here is.. is there any way where I can load them all at once without typing them one by one? by means like folder/*.js then it will load all js files inside that folder. here is my example code.

JS

$(document).ready(function() {
$(document).on("click", "a[rel=tab]", function(e) {
    // e.preventDefault();
    $e = $(e);
    pageurl = $(this).attr('href');
    $.ajax({
        url: pageurl + '?rel=tab',
        success: function(data) {

            var head = document.getElementsByTagName("head")[0];
            var jquery = document.createElement("script");
            jquery.type = "text/javascript";
            jquery.src = base_url + "/assets/bower_components/datatables.net/js/jquery.dataTables.min.js";
            head.appendChild(jquery);

            var js = document.createElement("script");
            js.type = "text/javascript";
            js.src = base_url + "/assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js";
            head.appendChild(js);

            var jsn = document.createElement("script");
            jsn.type = "text/javascript";
            jsn.src = base_url + "/assets/js/newscript.js";
            head.appendChild(jsn);
            jsn.onload = function() {
                $('#inside').html(data);
            }
        }
    });

    //to change the browser URL to 'pageurl'
    if (pageurl != window.location) {
        window.history.pushState({ path: pageurl }, '', pageurl);
    }
    return false;
});

$(window).bind('popstate', function() {
    $.ajax({
        url: location.pathname + '?rel=tab',
        success: function(data) {
            $('#inside').html(data);
        }
    });
});
});

No. Each separate file requires a separate HTTP request to be made in order to load it, or in the case of script files, a separate ` — ADyson, Nov 11 '17 at 10:07
And there's no way to enumerate files in a folder on the server, for basically the same reasons — ADyson, Nov 11 '17 at 10:09
On a side note, since you're using jQuery, you could just use `$.getScript(url, callback)` — Manuel Otto, Nov 11 '17 at 10:26
oh I see. well that explained it. thank you anyways. :) @ADyson — RealRich, Nov 11 '17 at 10:27
yeah. I'm trying to use the $.when() $.done() and load the scripts inside but it's not working for me. well I'll just stick with what I'm working now I guess @ManuelOtto — RealRich, Nov 11 '17 at 10:28
@ManuelOtto Although undocumented getScript returns a promise so better to leave the callback where it belongs, in the past. — HMR, Nov 13 '17 at 05:56

score 2 · Answer 1 · answered Nov 13 '17 at 05:54

Question is answered here with the following code:

const getScripts = 
  resources => {
    jQuery.when.apply(
      null
      ,resources.map(
        resource =>
          $.getScript(base_url + resource)
        )
    )
;

getScripts(["url1","url2"])
.then(
  () => console.log("finished loading scripts")
  ,err => console.warn("Failed:",err)
);

I think you need to rethink your design though, loading a bunch of scripts again. All you need is set some content through xhr (not a big fan of using xhr to request html parts) and initialize the content with script.

Instead of reloading all the scripts you should call a function that will initialize the content.

Load multiple js files all at once on ajax success - javascript

1 Answers1