-1

So I have a web service I am working on, but I occasionally get an error "ReferenceError: $ is not defined". I know what you're thinking, wrong order of loading jquery. Well, here is my code below to load the scripts. Tooltip.js is the file containing the javascript/jquery, and where the error is being thrown.

    function loadjscssfile(filename, filetype, level){
    if (filetype=="js"){ //if filename is a external JavaScript file
        var fileref=document.createElement('script')
        fileref.setAttribute("type","text/javascript")
        fileref.setAttribute("src", filename)
    }   
    parent.document.getElementsByTagName(level)[0].appendChild(fileref)

}

window.onload = function() {
    loadjscssfile("//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", "js", "head"); 
    loadjscssfile("//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css", "css", "head");
    loadjscssfile("//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js", "js", "head"); 
    loadjscssfile("...tooltip.js", "js", "head");

}

Now in the following code is where the error is being thrown. It is being thrown on the like shown, where $(document)... is being called. The call is preceded by plain javascript and followed only by jQuery. This is in the tooltip.js.

//some javascript functions

$(document).ready(function() {
       ...
      //some jQuery functions
      ...
 }

I have tried all I can think of (which isn't much, being a beginner at both javascript and jQuery), and I have searched all over to find solutions, many of which appear to be ordering of the script loading.

The real kicker to me is that it sometimes works fine, but other times it seems jQuery doesn't load (hence the ReferenceError). Anyone have any ideas?

The alternative, of course, is to re-write the entire script in javascript, which is far from what I want to do. Please let me know if you need further info, code, or explanation.

Edit: So the problem was even though I was attaching the the js files in the order I want them loaded in, they were not being loaded in that order. The solution is to have an unload method for loading the query, and in that method I put loading the other files. and it seems to work.

Padge
  • 81
  • 6
  • `$(document).ready(function()` will not be called after `window.onload` even if jQuery works. And the problem is that `document.getElementsByTagName(level)[0].appendChild(fileref)` does not mean that scripts will be loaded one after another. It depends on the connection speed and filesize. So the small `tooltip.js` can be loaded and executed earlier. Add the depending scripts after the required scripts are loaded (for example - http://stackoverflow.com/a/3248500/1164491) – Cheery Nov 08 '14 at 02:12
  • @Cheery this worked. I will update my question to reflect the solution. If you make your comment an answer I will accept it. – Padge Nov 08 '14 at 14:24

1 Answers1

0

You are right about the order of jquery being loaded wrong. Here's why:

The ready event fires as soon as the HTML document is ready while the onload event waits and fires only after all the content (images, etc...) has loaded.

So your problem is due to onload sometimes firing after ready. Note that in theory, onload should always fire after ready.

I would put the JS libraries in the head of the page to make sure they are available. Some people might argue that all JS should be at the bottom of the page, but my take on this is that it's up to your own judgement to do so. Having all JS at the bottom has pros and cons, depending on the situation.

biko
  • 510
  • 6
  • 15