jQuery load(): load an external html into a div of our page

Sometimes we need to update a certain part of the page without having to refresh it, a function I often use is jQuery load().

Obsolete function

This function has been obsolete since jQuery version 1.8, if you need to load external content and send parameters you can use the get() and post() jQuery functions.

Sintax of jQuery load()

With load() we can load in a certain div an external file (php, html, asp…) in the moment we need or under request of the user by means of forms, buttons, links…

This external file to the script must be hosted in the same domain of the web.

Let’s see the syntax extracted from the official website:

1. url (required): Is the string containing the url to be loaded.
2. data: Parameters that we can pass to be treated by the destination of the url.
3. callback: Function invoked after processing the url.

This method is a simple way to obtain data from the server from the same HTML, it is quite similar to $.get(url, data, success), load() is a method and get() is a global function.

In the demos that I put below we are going to force this external load through the jQuery Click() function, which will be executed when the button is pressed.

Example 1 of jQuery load() giving the url as parameter

Let’s see the example 1 demo:

1. Line 5: Reference of jQuery library.
2. Script of line 8: When you click the button with id=button we will load the file ‘/examples/03-jquery-load01.php’ in the div with id=layer.
3. Line 17: Div that we will update with the new content, with id=layer.
4. Line 19: Button with id=button that will be the executor of the script.
5. The external file ‘/demos/03-jquery-load01.php’ contains the text ‘UPDATED TEXT!.

Example 2 of jQuery load() with parameters and callback

Let’s see the example 2 demo:

1. Line 10: When you click the button with id=button we will load the file ‘/examples/03-jquery-load03.php’ with 2 parameters in the div with id=layer.
2. Line 12: We ask if the file has been loaded correctly, if error ocurred we show a message.
3. Parameters: In the example you will see that I pass value1 and value2 parameters with its values sending variables with POST method. If we want to make a send by GET we would have to put the parameters in the url. Example:
   load(“/demos/03-jquery-load03.php?value1=first value&value2=second value”
4. Callback: Important, that the callback returns the status independently if the file exists or not… the script is executed.
5. 03-jquery-load03.php: The parameters are displayed:
   
   PHP

   echo $_POST['value1'] . ' ' . $_POST['value2'];

   1	echo $_POST['value1'] . ' ' . $_POST['value2'];

Example 3 of jQuery load() to get selected content from external html

Let’s see the example 3 demo:

1. Line 11: If we look after the url I have put #content, that will be the id of the content in the external html that we will inherit for our current page. The rest is ignored.
2. The external HTML code:
   
   XHTML

   <div id="content">YOU CAN SEE THIS CONTENT</div> <div id="no">YOU CAN´T SEE THIS CONTENT</div>

   1 2	<div id="content">YOU CAN SEE THIS CONTENT</div> <div id="no">YOU CAN´T SEE THIS CONTENT</div>

Load the external HTML by clicking on a text link

Another practical example in this new fourth demo to load an external html after clicking a text link, here the code:

• We load the content once clicked on the text with id=text

Avoid conflicts with other libraries

If you work with other libraries than jQuery I recommend you to use jQuery noConflict() in case of problems.