jQuery Include

published: April 26th, 2007

For those of you who like jQuery but cannot find any sensible way of including external JavaScript files, here is a solution for you. I come up with this solution while developing Mashina, my browser based exploitation framework.

http://www.gnucitizen.org/static/blog/2007/04/jquery-include.js

In order to include JavaScript source files you have to do the following:

$.include('http://path/to/script1.js');
$.include('http://path/to/script2.js');

$(document).ready(function () {
  // the files are loaded, so now you can use them...
});

As you can see, everything is very jQuery like so you shouldn’t have any problems.

Download: jquery-include.js

» more | » comments | » comments rss | posted by pdp | syndication and integration ( )

Comments

wade responds:

For local files if you use async false then you don’t have to do the callback timer (js stops execution until the file is loaded). This has been working for me in IE6, FF2, & Safari:

$.ajax({
	url: "/path/to/script2.js",
	dataType: "script",
	async: false,
	success: function(js){if(jQuery.browser.safari){eval(js);}}
});

Arthur Bezner responds:

I have error (FireBug tested) reported near

document.body.appendChild(script);

'document.body has no properties'

how about changing to

document.getElementsByTagName('head').item(0).appendChild(script);

This should work fine.

Regards
Arthur Bezner

pdp responds:

yes, I will make the changes as soon as possible!

vlad responds:

I’ve added link from jQuery wiki to your script. Hope you don’t mind :)

pdp responds:

vlad, not really… go crazy… modify it if you want but just let me know about the changes since I make a heavy use of it. cheers

Jimmy Glass responds:

Hi,

I have been trying to implement a set of multi-level includes, but… It seems like the Ready event is firing prematurely. Any suggestions?

Thanks,
Jimmy G

pdp responds:

yeh, it is strange… I am not sure what the problem is but I will definitely look into it. thanks for the feedback.

ludoo responds:

Can you extend your plugin to integrate css stylesheets loading ?

Thanks
LudoO

rezn responds:

any progress with this? it’d be very useful. it does look like its in the 1.2 roadmap at least, but no word on timing: http://docs.jquery.com/JQuery_.....ript.28.29

pdp responds:

rezn, that would be very useful, at least I don’t have to support this plugin myself :)

Tobiasz Cudnik responds:

It doesnt work because that it dont really hijak ondomready event, which is attached via reference, not name.

I wrote similar plugin with working ondomready and dependency feauture:
http://meta20.net/.include_scr.....ery_plugin

Tested with jquery.forms. Hope you find it usefull.

wiz responds:

var test = 10; in a file test.js $include("test.js"); in another file alert(test) didn’t work on IE6

selim responds:

If you want that run in Internet Explorer, the property readyState is loaded and not complete.

saurabh responds:

Big problem in printing the polylines in firefox.

balex responds:

It is realy hard to debug when one application use more and more jquery components. Please insert this line (42) for another programmers:

if (this.readyState == 'loaded' || this.readyState == 'complete')

ZK@Web Marketing Blog responds:

Agree, JQuery is an amazing tool. Once I needed to write a huge web project with AJAX technologies while I knew almost nothing about AJAX then (i.e. I’ve never made AJAX sites). I found JQuery and it was a great help! Like you write Li, its wrapper-based syntax, principles and documentation were so simple to learn that I write a raw prototype for main site functions literally in a single day. Definitely recommended tool!

Richard responds:

There is a bug with this script in Google Chrome. The ready state changes and the document.ready function fires before the resources of the script are available to use. So if you include a script that defines myObject.myVar and then try to make a call to myObject.myVar in $(document).ready it will return a “cannot get property myVar of undefined” error.

pdp responds:

10x Richard. I am aware of this. Unfortunately, I cannot find time to update it and I think that there are already much better solutions than mine.

Moises Marquez responds:

I’ve added a method includeCSS to add CSS (obviously) too. It’s trivial but if anyone wants it I can send you.

pdp responds:

share the joy :)

GenericProdigy responds:

CSS already provides a capability to include using the @import directive. I’m not sure if I see a point in adding functionality for that when web standards already provide a method.

pdp responds:

GenericProdigy, this code has long been outdated. I doubt I will ever get back to this. :)

Respond

GNUCITIZEN Products

	Blogsecurify is a division of GNUCITIZEN. The initiative was established to provide social media security services through our free automated testing engine. The Blogsecurify team is also engaged to deliver quality content on issues concerning social media technologies.
	Netsecurify is a division of GNUCITIZEN. The initiative was established to provide network security services through our free automated testing engine. The service is still in private-beta.
	Websecurify is a division of GNUCITIZEN. The initiative was established to provide a free web application security framework for automated and manual penetration testing. The service is still in private-beta.
	Secapps serves as an application directory of all online tools which the GNUCITIZEN team has built over the years.
	Securls serves as an information security intelligence tool, combining news and articles from the best information security resources online.