Need to load javascript library or just wait for it to load?

Question

I load a javascript library when a user clicks a button:

if (mylib.myfunction) {
    mylib.myfunction();
} else {
    var jsElt = document.createElement("script");
    body.head.appendChild(jsElt);
    jsElt.onload = function() { mylib.myfunction(); }
    jsElt.src = MYLIB_URL;
}

That works, of course, but there is a problem: If the user clicks a second time before the onload event the else-part will be executed again. What is the best way to avoid this? A local variable? Something else?

UPDATE: I want to thanks @Suman Bogati and @usernid for their suggestion to disable the button that was clicked. However that solution is too limited for me because it assumes that you have access to the button from the code loading the new library. That is not always the case, of course.

In my case I can't use this solution so I will use a global variable instead. If no one has a better idea. ;-)

Disabled the button until your `script` is loaded, – Suman Bogati Mar 08 '14 at 13:49 — Suman Bogati, Mar 08 '14 at 13:49

score 1 · Answer 1 · answered Mar 08 '14 at 13:52

try

to disable button from script

document.getElementById("btnId").disabled = true;

to enable button from script

document.getElementById("btnId").disabled = false;

and in your code...

function methodName()
{

  document.getElementById("btnId").disabled = true; 
  if (mylib.myfunction) {
      mylib.myfunction();
      document.getElementById("btnId").disabled = false; 
  } else {
      var jsElt = document.createElement("script");
      body.head.appendChild(jsElt);
      jsElt.onload = function() { mylib.myfunction(); }
      jsElt.src = MYLIB_URL;
      document.getElementById("btnId").disabled = false; 
  }
}

html

<input type="button" id="btnId" value="CLICK" onclick="methodName()">

It is useful sometimes, but it does not fit my problem here. — Leo, Mar 12 '14 at 12:07

score 0 · Answer 2 · answered Mar 08 '14 at 14:01

Disabled the button until your script is loaded, something like this

DEMO

<button onclick="loadJavascript()" id="myButton">Load js</button>

<script>
function loadJavascript(){
    var myButton = document.getElementById('myButton');
    myButton.disabled = true;
    var jsElt = document.createElement("script");
    document.head.appendChild(jsElt);
    jsElt.onload = function() { 
        myButton.disabled = false;
        //mylib.myfunction(); call your function here
    }
    //here your src for js file, this is just testing purpose
    jsElt.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js";
}
</script>

Brian McGinity · Accepted Answer · 2014-03-09T18:31:29.560

0

This might work, I have not tested:

if (mylib.myfunction) {
    mylib.myfunction();
} 
else {
   if (!document.getElementById("scriptTag") ) {
      var jsElt = document.createElement("script");
      jsElt.onload = function() { mylib.myfunction(); }
      jsElt.setAttribute("id", "scriptTag");       }
      jsElt.setAttribute("src", MYLIB_URL);
      body.head.appendChild(jsElt);
}

edited Mar 09 '14 at 18:31

answered Mar 09 '14 at 02:17

Brian McGinity

5,777
5
36
46

If you just pur src after onload it will work. (But id on script is nonstandard AFAIK.) – Leo Mar 09 '14 at 15:57
Hey wow cool! Thanks for the update. It appears that the id in the script tag is ok: http://stackoverflow.com/questions/2741441/giving-the-script-tag-an-id and http://stackoverflow.com/questions/1219851/why-would-i-put-an-id-on-a-script-tag – Brian McGinity Mar 09 '14 at 18:19
I was wrong. "id" is a "global attribute" in HTML5 and allowed on all elements: http://www.w3.org/TR/html-markup/global-attributes.html – Leo Mar 10 '14 at 10:31
This is a cleaner solution than the global variable route. If this answers your question, accept it so it goes into the 'answered' bucket. – Brian McGinity Mar 10 '14 at 12:48
Yes, @Brian, it is working well. Before posting the question I wondered if this was the best way, but since I now realize that "id" is a global attribute it seems to be the easiest and best way. You can add "onerror" to this solution, but I have not looked into that very much. If you want better error handling (I am not sure I need it, actually) then XMLHttpRequest might be better. – Leo Mar 11 '14 at 20:49
Ok great, thanks for the update... I will use this approach too :) – Brian McGinity Mar 12 '14 at 00:29

Need to load javascript library or just wait for it to load?

3 Answers3