My favorites | Sign in
Project Logo
                
Search
for
Updated Sep 30, 2008 by alexanmtz
Labels: Featured, utilities, javascript
jQueryIncludePlugin  
Utility library to include JavaScript and / or CSS on demand.

Introduction

Insert new elementos (tag link and script) in the head of document and loads them. You can pass a file or a array of files mixed.

USAGE

$.include(String | Array url, Function callback);

Examples

You can pass a single javascript file

$.include('file.js');

You can pass a array of files

$.include(['file01.js','file02.js']);

You can specify the base path to be used in whole call of the plugin

$.ImportBasePath = '/foo/test/';

You can even mix the files

$.include(['file01.js','file02.css']);

The tool support callback too

$.include(['file01.js',function(){
   //code be executed when script loads
});

Still untested - The plugin can check if CSS is loaded too (tricky feature)

$.include(['file01.css',function(){
   //code be executed when css loads
});

Support

This plugin was tested in IE 6 and Firefox 2+ Jquery version 2.1+

Dependencies

Test page

no test page yet

Author

Alexandre Magno - http://www.alexandremagno.net/blog

License

http://www.opensource.org/licenses/mit-license.php


Comment by manalo.rommel, Oct 18, 2008

Very nice project, i must use this in my projects, But does this support for local caching of Javascript, because normal <script src="foo/test"></script>, as far as I know do some sort of caching in client browser.

Comment by manalo.rommel, Oct 18, 2008

Inline javascript does seems NOT to work fine. Here is my js code.

<script type="text/javascript">
$(document).ready(function() {
$.include([
'/content/Js/JQuery/Plugins/StarRating?/jquery.rating.js', '/content/Js/JQuery/Plugins/JqueryUI/jquery.ui.all.min.js', '/content/css/JQuery/flora/flora.all.css', '/content/css/JQuery/Plugins/StarRating?/jquery.rating.css' ]);

});

var tab = $('#infoTabs').tabs({
fx: { opacity: "toggle" }, selected: null
});

alert(tab);
</script>

Comment by manalo.rommel, Oct 18, 2008

I think its not working in Google Chrome Browser,

Comment by bagulhus, Oct 21, 2008

This make a lot of requets?

Comment by alexanmtz, Oct 23, 2008

@manalo: you can separate the css files in another call and js files with a callback calling the tabs. I didn´t tested in Google Chrome. I´m having a lot of trouble with it. One more browser to give us headache. @bagulhus: This plugins doesnt make request because they create on the fly script and link tags in head of the document. There´s no ajax request in this plugin.

Comment by grymmjack, Jan 15, 2009

the current version (1.0) does not support passing along URL get arguments in the script includes. i changed a few lines to accommodate this (starting at line 37 through line 61): `

m = data.match(/(^\/\\?+)\.(.)$/);
if (m) {
if (m2?.indexOf('js') !== -1) {
return {
filename: m1?, ext: m2?, tag: 'script'
};
} else
if (m2?.indexOf('css') !== -1) {
return {
filename: m1?, ext: m2?, tag: 'link'
};
} else {
return {
filename: m1?, ext: m2?, tag: null
};
}
}

` line 37 regex was modified to include any characters (not just word ones) then lines 39 and 47 were modified to use indexOf instead of == in the comparison to solve the problem.

thanks for the plugin :)

Comment by grymmjack, Jan 15, 2009

ie: so now /path/to/javascript.js?withargs=1&moreargs=2 works. before it did not.

Comment by craniumcomputing, Feb 01, 2009

I would love to see this script work with elements other than the head. Take a widget codes for example that need to be placed into a container. Where the <script> tag is placed will be where the widget will show up. I checking the source code, this looks like a very feasible task to have the code work like $('#myWidgetDiv').include(... or how it normally is $.include(...

if the latter, it would assume <head> otherwise use the jquery object as the element to appendTo.


Sign in to add a comment
Hosted by Google Code