How-To: Load Javascript and CSS dynamically with jQuery
I’ve been working on a new project for Inspire Digital.
The project is going to allow site members to produce their own content.
Members have a WYSIWYG editor (using jquery.wysiwyg) for creating content with some basic HTML. I wanted to come up with a way for only those who need the files to download the files.
Previously in this sort of situation I have simply included the script and css files within the form, but this is not valid HTML.
So … Loading Javascript and CSS dynamically with jQuery to the rescue!
Loading JavaScript is built-in to jQuery, but you need to create CSS elements yourself.
The approach places a class on the text area we want to be WYSIWYG, then we detect that class, load the CSS and JavaScript and initialise the editor. Easy!
$(document).ready( function() {
if ($('.wysiwyg_editor')) {
$("head").append("<link>");
css = $("head").children(":last");
css.attr({
rel: "stylesheet",
type: "text/css",
href: "/javascripts/jwysiwyg/jquery.wysiwyg.css"
});
$.getScript("/javascripts/jwysiwyg/jquery.wysiwyg.js", function(){
//wait before initialising to prevent intermittent load error
setTimeout("init_wysiwyg_editor()",250);
});
}
});
function init_wysiwyg_editor() {
$(".wysiwyg_editor").wysiwyg();
}
The only gotcha I found was that calling $(“.wysiwyg_editor”).wysiwyg(); would occasionally error with an undefined method unless I put a momentary timeout in before calling. I think this was the result of the browser making the call while still interpreting the freshly loaded script.
September 19th, 2009 at 7:30 am
Hi! Thanks for the post…
I’m trying to load CSS dynamically depending on resolution. Probably your code will help me.
I’ll try it now. Thanks!
Luis
September 22nd, 2009 at 2:06 pm
[...] How-To: Load Javascript and CSS dynamically with jQuery [...]
October 5th, 2009 at 7:36 pm
i dig it
October 28th, 2009 at 5:50 am
you should omit the parenthesis in the code of setting timer which should result in setTimeout(“init_wysiwyg_editor”,250);
then you won’t get that errror
December 16th, 2009 at 3:53 am
You can simplify the element creation a bit using the power of jquery chaining. Try the appendTo method, instead of append:
$(”).appendTo(‘head’).attr({
rel: ‘stylesheet’,
type: ‘text/css’,
href: ‘/javascripts/jwysiwyg/jquery.wysiwyg.css’
});
December 16th, 2009 at 3:55 am
whoops, there should be a <link> in side the jquery selector…
$(<link>)
March 25th, 2010 at 4:18 am
Check out the jQuery docs, getScript supports a callback, so you cna put your .wysiwyg function inside of that callback
July 22nd, 2010 at 8:34 am
As for setting a Timeout its a little sketch, as the request/processing of the js may take longer than 250.
I ran across a similar situation, a chose instead to use a non-asynchronous ajax call.
$.ajax({
url: ‘path/to/js.js’,
dataType: ‘script’,
async: false
});
Then place your function call after that. That way it will only run after the js has been retrieved and loaded.
October 27th, 2010 at 6:04 am
The Attributes can be set directly:
$(”, {
rel: ‘stylesheet’,
type: ‘text/css’,
href: ‘/javascripts/jwysiwyg/jquery.wysiwyg.css’
}).appendTo(‘head’);
October 27th, 2010 at 6:05 am
Hmm… same problem gr8karma had… the <link> is missing at the beginning.
October 20th, 2011 at 10:56 pm
solution from Stackoverflow:
$(“”, {
rel: “stylesheet”,
type: “text/css”,
href: “[URL].css”
}).appendTo(“head”);
October 5th, 2012 at 11:30 pm
Thanks!, i’d use:
setTimeout(init_wysiwyg_editor,250);