The $.load() method

The $.load is used to load content via AJAX and place it directly into a targeted element. When $.load is pointed at a HTML page it will copy the content inside of the <body> tags. The syntax for $.load is as follows:

$.load(url, [data], [callback]);

In the following example assume we have a HTML page with the following content in a file called ‘toLoad.html’.

<h1>The joy of coding</h1>
<p>Will it ever end.</p>
<p>The final paragraph.</p>

This can then be loaded into another file with jQuery and placed into a selected element. For example the following will load the HTML from the ‘toLoad.html’ file into the <div> of ID ‘newContent’.

$('div.newContent').load('toLoad.html');

See a working demo.

Sometimes you don’t want the whole of the HTML to be inserted. To do so simple amend the $.load with a selector indicating which part of the document you wish to load. For example the following will only load the paragraphs from the ‘toLoad.html’ file.

$('div.newContent').load('toLoad.html p');

See a working demo.

The $.getScript() method

The $.getScript() method allows Javascript files to be loaded programmatically. For example you may only want a script to be loaded based on some logic within your Javascript. I have found this useful when using Modernizr to detect support for the HTML5 <video> element, and then loading either some Javascript to support the HTML5 or some Javascript to load a Flash video fallback. For example:

if(Modernizr.video){
	$.getScript("five.js");
}else{
	$.getScript("swfobject.js");
}

The $.getScript() also supports a callback function ie:

$.getScript("five.js", function(){
    console.info('Ready to go!');
});

Leave a Comment