jQuery Load

InterServer Web Hosting and VPS
Sony Playstation PS4 Pro Custom Build NVMe SSD Drive - Enclosure case and Crucial NVMe SSD
PS4 Pro Custom External SSD NVMe Drive

How I built a PS4 Pro Custom External SSD NVMe Drive...

NUC8i7BEH with memory
Intel NUC8I7BEH Review and Custom Build

This is my review of the Intel NUC8i7BEH and a summary of my build...

Card image cap
Asus M5A88-M EVO Review

This is my review of the Asus M5A88-M EVO motherboard...

Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit
Corsair Vengeance Blue Review

This is my review of the Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit memory...

Robotic Arm with USB PC Interface Review
Robotic Arm with USB PC Interface Review

This is my review of the Robotic Arm with USB PC Interface...

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

Sponsored Links
SolarSystem - AngularJS Demo
SolarSystem - Angular JS Demo

Check out my first Angular JS demo hosted in Azure, it helped win my first Angular contract. Put the sound on.