jQuery loading remote/external javascript files using getScript()
Posted by: Stephen Gray on: 22 September, 2008
I’ve been working over the weekend on a site and I got to the part of writing the client side MVC using jQuery (because I love the idea now!).
I found out that jQuery has a nice little method for loading external scripts into the page at run time called getScript(). It basically gets the contents of the external file using an AJAX request and then eval()s the code at runtime, which seems like a perfect way of doing it. I reckon it’s much better than appending new <script> tags to the <head> tag as well.
The only issue is that it can take some time to load an external file so you can’t always run functions from within that file straight away. Thankfully there is a workaround for this using another jQuery method. You basically set all AJAX request to be synchronous before you run getScript() and then set AJAX requests to be asynchronous again after the script is loaded. If you end up loading like 20 files at the beginning of a page load this could take a while but hopefully you won’t be doing that 
$.ajaxSetup({async: false});
$.getScript(MVCRoot+fileName+'.js');
$.ajaxSetup({async: true});
4 Responses to "jQuery loading remote/external javascript files using getScript()"
2 | Dynamically Load JavaScript With jQuery « dreamsincode
22 March, 2009 at 1:41 am
[...] Dynamically Load JavaScript With jQuery Another wordpress blogger, Stephen at colourgrey.wordpress.com has an excellent article on dynamically loading javascript with jQuery. [...]
4 April, 2009 at 4:11 pm
That’s what the callback function is for:
$.getsScript('myscript.js', function() {
// Call functions from myscript.js here
});
24 April, 2009 at 10:03 am
Hi Michael,
Thanks for the tip. As always the jQuery devs had thought this one through and unfortunately I’d not thought about using the callback!
Cheers,
Stephen.
Leave a Reply
Search
- Flex 3 DataGrid double click event
- jQuery wildcard selectors
- jQuery loading remote/external javascript files using getScript()
- Flex getting selected RadioButton value
- Flex Processing XML response from HTTPService
- jQuery wildcard selectors - update
- Flex save changes from an AdvancedDataGrid using itemEditEnd
- Magento create a custom payment method
- Symfony "Database "" does not exist." error
- symfony Unable to parse default value as date/time value: '0000-00-00 00:00:00'
- Stephen Gray: Hi Patrick, That first error is my fault. I had the method name for the refund() method as void() as I had copied the code from the other method!
- Patrick: Hi Stephen, thanks for sharing your knowledge about creating a custom payment module. I need an extension for magento to handle a credit card payme
- shjeel ahmed: I am recruiting for PHP Developers for a number of exciting businesses in South East. Working on exciting Next Generation search engine, IPTV solution
Categories
- Dev thoughts (3)
- Tutorials (16)
13 January, 2009 at 8:18 pm
Great yet simple. Very helpful. Thanks!