jQuery plugin loading before jQuery

Question

I'm working within a platform that I do not have server side access to. That means I can't load javascript files directly into the head, only the body.

Here's how I'm doing my loads:

function loadjscssfile(filename, filetype){
//http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }
    else if (filetype=="css"){ //if filename is an external CSS file
        var fileref=document.createElement("link")
        fileref.setAttribute("rel", "stylesheet")
        fileref.setAttribute("type", "text/css")
        fileref.setAttribute("href", filename)
    }
    if (typeof fileref!="undefined")
        document.getElementsByTagName("head")[0].appendChild(fileref)
    }
}

loadjscssfile('https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js','js');
loadjscssfile('http://redacted.com/data.php?rand='+Math.random(),'js');

However, the third javascript file (a jQuery plugin) I load requires jQuery.

When I load the page I get this error (in Chrome)

Uncaught ReferenceError: jQuery is not defined

My inclination is that my plugin is loading before jQuery. Because if I refresh the page (when jQuery is cached) the error disappears. However, I need this to work even when jQuery is not cached. Thoughts?

I think I found similar question. Please see : http://stackoverflow.com/questions/756382/bookmarklet-wait-until-javascript-is-loaded — Andrei Orlov, Jun 19 '12 at 15:57

score 1 · Accepted Answer · answered Jun 19 '12 at 15:48

1

This is not an elegant solution but it works always for me: copy/paste the content of jquery.min.js file directly to your html page

    <script> ... </script>

answered Jun 19 '12 at 15:48

Vilius Gaidelis

430
5
14

It also prevents jQuery from caching. However, at least it works. – Tadeck Jun 19 '12 at 15:49
Wow, this is actually a great solution. Thanks! – A F Jun 19 '12 at 16:46

score 0 · Answer 2 · edited Jun 19 '12 at 15:45

0

What I do is this

if (typeof $ === 'undefined') {
    document.write("<script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'><\/script>");
    var timeout = 0;
    while (typeof $ === 'undefined' && timeout++ < 100);
}

This will wait until jquery is loaded before it moved on to do anything else. Then load your plugin.

edited Jun 19 '12 at 15:45

gen_Eric

223,194
41
299
337

answered Jun 19 '12 at 15:43

Sam Sussman

1,005
8
27

This is similar to what I've done in the past, but I was hoping for a much cleaner solution. – A F Jun 19 '12 at 15:48
3

a busy wait loop like that is a **really bad idea**. java is single threaded so it may cause the ui to become unresponsive, and its runtime will differ based on CPU executing it. use `setTimeout` instead – mkoryak Jun 19 '12 at 15:48
The reason I wrote this is for use in sharepoint :( when we had multiple Web Parts that use jquery and no access to the master page. Also, the entire page relied on jQuery to be loaded so it would have had to wait anyways. – Sam Sussman Jun 19 '12 at 15:50
just because you are using sharepoint doesnt mean you cant use `setTimeout` instead of that abomination. – mkoryak Jun 19 '12 at 15:51
The point was that other WebParts could be added anywhere at anytime and there was no way to know if jQuery was loaded or not, we would have had to check for it either way. If I was to use setTimeout on multiple webParts, jquery would be loaded multiple times and overwrite some of the plugins. – Sam Sussman Jun 19 '12 at 15:57

score 0 · Answer 3 · answered May 03 '13 at 02:43

As you're trying you have to load jQuery and run the other scripts after it loads. To do that you can use a loader library, like yepnope or headjs, remembering that as you cannot put scripts on your head you have to put the loader code along to the script.

Your code will be something like this:

yepnope( // or head.js
    'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js',
    'http://redacted.com/data.php?rand='+Math.random(),
    'https://raw.github.com/aakilfernandes/jquery.inject/master/jquery.inject.js?rand='+Math.random()
);

Another thing you can do is just put the jquery script on the body and load the other scripts after it:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    $.getScript('http://redacted.com/data.php?rand='+Math.random());
    $.getScript('https://raw.github.com/aakilfernandes/jquery.inject/master/jquery.inject.js?rand='+Math.random());
</script>

jQuery plugin loading before jQuery

3 Answers3