Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript Load Order

I am working with both amq.js (ActiveMQ) and Google Maps. I load my scripts in this order

<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <title>AMQ & Maps Demo</title>

    <!-- Stylesheet -->
    <link rel="stylesheet" type="text/css" href="style.css"></link>

    <!-- Google APIs -->
    <script type="text/javascript" src="http://www.google.com/jsapi?key=abcdefg"></script>

    <!-- Active MQ -->
    <script type="text/javascript" src="amq/amq.js"></script>
    <script type="text/javascript">amq.uri='amq';</script>

    <!-- Application -->
    <script type="text/javascript" src="application.js"></script>
</head>

However in my application.js it loads Maps fine but I get an error when trying to subscribe to a Topic with AMQ. AMQ depends on prototype which the error console in Firefox says object is not defined. I think I have a problem with using the amq object before the script is finished loading. Is there a way to make sure both scripts load before I use them in my application.js?

Google has this nice function call google.setOnLoadCallback(initialize); which works great. I'm not sure amq.js has something like this.

like image 832
Bernie Perez Avatar asked Aug 20 '08 22:08

Bernie Perez


People also ask

In what order does JavaScript execute?

JavaScript is synchronous. This means that it will execute your code block by order after hoisting. Before the code executes, var and function declarations are “hoisted” to the top of their scope.

How do I load a JS file into a sequence?

The solution is to have a main. js script file to load all the dynamic scripts and catch the onload event of the last script file. Since these scripts are loaded in order, in the onload event of the last script file, all previous script files should be loaded and ready to use.

Does script order matter JavaScript?

If I'm understanding your question I think you're asking if it matters where in a file a function/method is defined, and the answer is no, you can define them anywhere in a single source file. The JavaScript parser will read in all symbols before trying to run the code.


6 Answers

cross-domain scripts are loaded after scripts of site itself, this is why you get errors. interestingly, nobody knows this here.

like image 50
John Doe Avatar answered Sep 29 '22 10:09

John Doe


AMQ depends on prototype which the error console in FireFox says object is not defined.

Do you mean that AMQ depends on the Prototype library? I can't see an import for that library in the code you've provided.

like image 38
Walter Rumsby Avatar answered Sep 29 '22 09:09

Walter Rumsby


in jquery you can use:

$(document).ready(function(){/*do stuff here*/});

which makes sure the javascript is loaded and the dom is ready before doing your stuff.

in prototype it looks like this might work

document.observe("dom:loaded", function() {/*do stuff here*/});

If I understand your problem correctly.. I think that may help..

If you don't want to rely on a lib to do this... I think this might work:

<script>
   function doIt() {/*do stuff here*/}
</script>
<body onLoad="doIt();"></body>
like image 33
danb Avatar answered Sep 29 '22 10:09

danb


I had a similar problem to this, only with a single script. The solution I came up with was to use addEventListener("load",fn,false) to a script object created using document.createElement('script') Here is the final function which loads any standard JS file and lets you add a "post load" script.

function addJavaScript( js, onload ) {
   var head, ref;
   head = document.getElementsByTagName('head')[0];
   if (!head) { return; }
   script = document.createElement('script');
   script.type = 'text/javascript';
   script.src = js;
   script.addEventListener( "load", onload, false );
   head.appendChild(script);
}

I hope this may help someone in the future.

like image 35
cmcginty Avatar answered Sep 29 '22 10:09

cmcginty


Is there a way to make sure both scripts load before I use them?

Yes.

Put the code you want loaded last (your application.js stuff) into prototype's document.observe. This should ensure that the code will load only after prototype + other stuff is finished and ready. (If you are familiar with jQuery, this function is similar to jQuery's $(document).ready )

like image 22
maxsilver Avatar answered Sep 29 '22 10:09

maxsilver


Do you mean that AMQ depends on the Prototype library? I can't see an import for that library in the code you've provided.

Yes for ActiveMQ's javascript (amq.js) does depend on Prototype. In the amq.js it loads 3 scripts, _amq.js, behaviour.js and prototype.js.

Thanks you for your help on the JavaScript load order wrumsby. This tells me that my bug is in another castle :(

I guess I have a different problem. I also checked the js files from ActiveMQ 5.0 to 5.1 and noticed they were the same as well. Something has changed in 5.0 to 5.1 that requires a refresh for the topics to subscribe. I'll keep looking, but thanks for eliminating this possible cause.

like image 22
Bernie Perez Avatar answered Sep 29 '22 08:09

Bernie Perez