Insert script at end of page via jQuery
Here's the situation: I have a web page that does some stuff with jQuery. On the same page, I want to call another script that loads a tracking device from another site. This tracking device needs to be called at the end of the page.
The problem? jQuery's document.ready means that none of the jQuery stuff can be done until this script is loaded (which might take awhile). So, what I want to do is have jQuery insert the JavaScript link. Currently I am doing this:
<script type="text/javascript" >
$(document).ready(function(){
$("#tabs").tabs();
$.getScript("http://svr04.mapsurface.com/api/1.0/mapsurface.js");
});
</script>Which doesn't work - I guess that's inserting the script in the <head> section but I'm not sure. Does anyone know of a way to view source with generated JavaScript? There used to be a "View generated source" option in the Opera web developer toolbar but that's gone now. The one in firefox doesn't seem to process the jQuery stuff.
Is there a way for jQuery to just write the script line to the end of the page?
Abhishek Reddy posted this at 20:21 — 5th August 2009.
He has: 3,348 posts
Joined: Jul 2001
I'm not sure how you'd view generated source. But it seems like mapsurface.js initializes a variable called _ms that you could test for in a Firebug console.
Also try passing a function to getScript as a second parameter, to check if loading succeeded.
I just tried an isolated test case that was at least able to load the script successfully, and initialize _ms. It's not obvious why it might be failing for you. Could you provide a live demo to look at?
webwiz posted this at 23:39 — 5th August 2009.
He has: 629 posts
Joined: May 2007
Are you sure about this? AFAIK document.ready fires the moment the DOM is loaded. It's true that any scripts placed high in the document - in the
<head>for example - get interpreted before the parser moves on to load the rest of the page. That's due to the expectation that a script might issue a 'document.write' that changes the DOM.That's why, with few exceptions, scripts should be placed just before the closing tag. The DOM has been loaded by this time; the jQuery 'document.ready' fires; and you are in business.
If the tracking script takes significant time to load, there's something amiss. All browsers have made significant improvements to their implementation of JS over the last couple of years, loading and running orders of magnitude faster than a few years ago... I suggest you check your page loading profile in a tool such as Safari's Web Inspector (under Resources) or YSlow for Firefox.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
jamespvee posted this at 07:37 — 6th August 2009.
They have: 15 posts
Joined: Aug 2009
I've had the same problems with a similar setup, but only because I was loading another javascript not through jQuery. jQuery would load but the other won't, and I get an error. But you are calling the other script vai jQuery so it should work in theory.
Megan posted this at 14:20 — 6th August 2009.
She has: 11,421 posts
Joined: Jun 1999
Well, I'm not sure exactly how the document.ready worked, but when I had the script just called at the end of the page the jquery stuff would take forever to render.
Now that I'm calling it through document.ready using getScript it just doesn't work the way it's supposed to. But I can't see where it's being called to find out if there's anything I can do about it. Maybe getScript is putting the script call at the end of the page and it's still not working right??
Here's the page in question:
http://www.uwaterloo.ca/facultystaff/
Press alt-X in a native browser (I think it only works in IE/Win and Safari/Mac) to see what it does. This is a really old legacy script that I don't think is being maintained anymore but at the moment we don't have a better way of tracking clicks on external links.
Megan
Connect with us on Facebook!
Abhishek Reddy posted this at 20:20 — 6th August 2009.
He has: 3,348 posts
Joined: Jul 2001
Can you describe what isn't working correctly, and how it is supposed to work? I'm not sure I've understood this script right. Using Firefox 3.5 on GNU/Linux, most things appear to load and render more or less normally. The only data that wouldn't display were the Links and Searches detailed views, but that looks more like a server-side issue.
Megan posted this at 20:29 — 6th August 2009.
She has: 11,421 posts
Joined: Jun 1999
Well, what do you know, it does work in FF/Linux. I didn't know that it did that. The map view isn't working right in IE or Safari but Firefox is okay.
I guess there's no problem after all, but in case others are looking for this it would be good to have an answer as to how the getScript is inserting the link and how you can view source with javascript modification.
Megan
Connect with us on Facebook!
Abhishek Reddy posted this at 21:49 — 6th August 2009.
He has: 3,348 posts
Joined: Jul 2001
The jQuery source reveals that
getScriptinserts ascriptelement intohead, whosesrcattribute is set to the given URL.Lines 253-278 of ajax.js [v1.3.2]:
var head = document.getElementsByTagName("head")[0];var script = document.createElement("script");
script.src = s.url;
...
// Handle Script loading
...
head.appendChild(script);
(Note: a newer version of this code in svn uses
insertBeforeto add the generatedscriptelement as the first child ofhead, instead ofappendChildas above in the current release.)As for viewing generated source, there are some Firefox extensions that can help. Web Developer has a "View Generated Source" function, and View Source Chart shows modified DOM data. I'm not sure how reliably they work. I've yet to find them useful.
webwiz posted this at 23:43 — 12th August 2009.
He has: 629 posts
Joined: May 2007
Your 'mapsurface.js' is triggered by the dcument.load event. I suspect that the load event has, on occasion, already occurred by the time the script has returned to your page.
Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;
Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.