jQuery: Load Remote Content into Current Page

The well-established javascript library jQuery comes bundled with a neat little function that handles loading remote content directly into the current page’s DOM model, namely the little Ajax load function.

Using load is particularly easy, simply bind it to the element you wish to apply it to and call it with an URL – that simple!

For example:

$('#elementtoupdate').load('texttoload.html');

will replace the elementtoupdate’s HTML content with that contained in the remote texttoload.html page, all done with a single, simple call.

Of course, you can expand upon this behaviour as the load function comes with two additional optional parameters, the first one being data which allows you to turn the ajax request into a POST request, while the second callback function allows you to perform certain actions once the ajax operation has completed, like fading in the new text for example.

Note, that it is important to pass extra random GET variables to your load URL as Internet Explorer caches loaded files which could of course completely mess with your dynamically generated content. Usually attaching something like the current timestamp at the end of the URL works wonders in this case. (e.g. texttoload.html?rand=20091227100515 should do the trick quite nicely).

The latest trick available to the load function is that of being able to pass along a selector in the load function and thus apply only matching elements in the HTML to load to the page being updated’s DOM. For more information on doing this though, check out the related link below which details the official documentation for the load function.

Related Link: http://docs.jquery.com/Ajax/load