jQuery Load

Sponsored Links

jQuery Load

Here we look at jQuery's Load method(s).

There are actually 2 different methods called Load in jQuery, so I'd better cover both of them!

jQuery Load 1 (Load external file contents into element)

jQuery Load is a method which basically loads an external document or file and places the contents of the file into the selected element. So for instance you may have a text (.txt) file, a HTML file or even an .aspx page. Whatever it is, jQuery's Load will take the returned HTML and place it into the element.

jQuery Load 1 Example 1

So in this short example, we find an element with the ID of 'updateHere', and we then call jQuery's Load method passing in the URL of our file. Once the file has loaded, the text contents of the file called 'ajax-content.txt' are used as the HTML for the element with the ID of 'updateHere'.


jQuery Load 1 Example 2 with Callback

Here we supply a callback function to jQuery Load. What will happen here is that once the file has been loaded and had it's contents inserted into the element with ID 'updateHere', then the callback function will execute, in this case, marking an element with ID of 'withCallback' change it's HTML to show the text 'Loaded'.

$('#updateHere').load("ajax-content.txt", function () {

This request is sent as a GET request.

jQuery Load 1 Example 3 with jQuery Selector

We can use a jQuery selector on the contents of the file to only select a portion of the returned data, for instance if our file is a HTML document, we specify a jQuery selector to select only that selected part of the document, and use this as the contents to be displayed in our element called 'targetted'. So, in this example, we load the file 'ajax-content.htm', which contains many divs, and we select the element with id 'showThis'. The textual contents of 'show' are then used for the HTML of element 'targetted'. Scripts are stripped out when using Load in this way. To avoid scripts being stripped out, you can't use the jQuery selector to retrieve a sub-part of the returned data.

$('#targetted').load("ajax-content.htm #showThis");

jQuery Load 1 Example 4 GET Request with Parameters

One more option is that you can specify parameters to be sent in the request made from the Load method. In the below example, an aspx page is requested and the Load method appends the parameter to the QueryString, ie. ?name=test. This is made using a GET request.

$('#aspxData').load("ajax-content.aspx", "name=test", function () {

jQuery Load 1 Example 5 POST Request with Parameters

Additionally, the previous example can be changed to make a POST request by passing an object instead of a string:

$('#aspxPost').load("ajax-content.aspx", {'planet' : 'Mars', 'diameterKM' : '6792'}, function () {

jQuery Load 2 (Event Handler shortcut)

jQuery Load also serves a 2nd purpose, it's a event handler for the Javascript 'load' event, and is a shortcut for .bind('load', handler)

jQuery Load 2 Example 1

Here we hook up the Javascript Alert method to fire when the Window object has finished loading.

$(window).load(function () {alert('hi')});