How to dynamically append JS/CSS files in order

Question

So, I have to load these in the main page

jQuery.js
jQueryMobile.css
jQueryMobile.js
mainScript.js

But if the user enters from anywhere else I need to load them dynamically. so I have

scriptCheck.js

if scripts not present
    //create array of elements containing above files
    scriptsArray.forEach do |script|
        head.append(script)
    end forEach
end if

My question is, is there a way to make the loading a synchronous operation, that waits for each script to load and be interpreted before loading the next one?

Where are the original scripts printed? Seems like a job for the server side... — elclanrs, Jul 10 '13 at 22:15
Yes. You would set the onload handler of each script element to be the function that loads the next script. — Asad Saeeduddin, Jul 10 '13 at 22:18
Printed? they are loaded on the front-end, the client machine. — DrJonOsterman, Jul 10 '13 at 22:19
possible duplicate of [Dynamically loading JavaScript synchronously](http://stackoverflow.com/questions/2879509/dynamically-loading-javascript-synchronously) — Asad Saeeduddin, Jul 10 '13 at 22:36

Asad Saeeduddin · Answer 1 · 2013-07-10T22:41:34.893

1

You could set the onload handler of each script element to be a function that loads the next script:

var counter = 0
scriptpaths = [...]
function loadnextscript(){
    var el = document.createElement("script");

    el.onload = loadnextscript;
    el.src = scriptpaths[counter];

    document.head.appendChild(el);

    counter++;
}

You can then invoke this using:

if (scriptsnotpresent) {
    loadnextscript();
}

edited Jul 10 '13 at 22:41

answered Jul 10 '13 at 22:22

Asad Saeeduddin

46,193
6
90
139

1

Should be `el.onload = loadnextscript` instead of `el.onload = loadnextscript()`, right? – Joe Enos Jul 10 '13 at 22:31

score -1 · Answer 2 · edited May 23 '17 at 11:56

-1

Check this out: https://stackoverflow.com/a/2880147/1391624

It uses createXMLHTTPObject() to open and send a synchronous request.

edited May 23 '17 at 11:56

Community

1
1

answered Jul 10 '13 at 22:18

Pavan Chander

21
2

If you feel a question is adequately answered somewhere else, please mark it as a duplicate, or at the very least actually explain in the body of your answer how the problem would be solved. – Asad Saeeduddin Jul 10 '13 at 22:20
In this case are you suggesting I should have included more of the linked solution in my answer? – Pavan Chander Jul 10 '13 at 22:22
If the answer you are linking to solves this problem as is, without any changes or elaboration needed, then you should mark this question as a duplicate of that one. You can do this yourself using close votes once you have sufficient reputation, but in the meantime you can flag the question as a duplicate. If the linked answer demonstrates an approach that can be repurposed to solve this problem, please reproduce the relevant parts and elaborate. – Asad Saeeduddin Jul 10 '13 at 22:25
I see the flag link for my own answer, but not for any of the other answers or the question. Perhaps I need a higher reputation to flag as well? – Pavan Chander Jul 10 '13 at 22:29
Perhaps. Let me look into this. Edit: yes, according to http://stackoverflow.com/help/privileges, you will need 15 reputation to flag. Also, note that you should flag the *question* as a duplicate, not an answer. – Asad Saeeduddin Jul 10 '13 at 22:30
Of course, I was just mentioning the inability to flag other answers to make it clear what I see on my screen. The ability to flag my own answer is a bit odd. **Edit:** It also seems buggy. I see two radio buttons, one for moderator attention, the other is an indented option for 'other'. Moderator attention is selected by default and selecting 'other' keeps the moderator option selected. – Pavan Chander Jul 10 '13 at 22:33
Unfortunately, I can't see what you're seeing. This would be a discussion more suited to Meta though, where the site itself (bugs, requests, inquiries) is discussed. You can access that at 5 reputation. – Asad Saeeduddin Jul 10 '13 at 22:38

How to dynamically append JS/CSS files in order

2 Answers2