How-To: Load Javascript and CSS dynamically with jQuery

tobyhede

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.


12 Responses to “How-To: Load Javascript and CSS dynamically with jQuery”

  • Luis Aveiga Says:

    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

  • 網站製作學習誌 » [Web] 連結分享 Says:

    [...] How-To: Load Javascript and CSS dynamically with jQuery [...]

  • thegreatdao Says:

    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

  • gr8karma Says:

    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’
    });

  • gr8karma Says:

    whoops, there should be a <link> in side the jquery selector…

    $(<link>)

  • Justin Says:

    Check out the jQuery docs, getScript supports a callback, so you cna put your .wysiwyg function inside of that callback

  • Matthew D Says:

    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.

  • Flu Says:

    The Attributes can be set directly:
    $(”, {
    rel: ‘stylesheet’,
    type: ‘text/css’,
    href: ‘/javascripts/jwysiwyg/jquery.wysiwyg.css’
    }).appendTo(‘head’);

  • Flu Says:

    Hmm… same problem gr8karma had… the <link> is missing at the beginning.

  • Peter Says:

    solution from Stackoverflow:

    $(“”, {
    rel: “stylesheet”,
    type: “text/css”,
    href: “[URL].css”
    }).appendTo(“head”);

  • Jakob Sternberg Says:

    Thanks!, i’d use:
    setTimeout(init_wysiwyg_editor,250);

Leave a Reply