Ajax/load

« Back to Ajax

[edit]

load( url, [data], [callback] )

Overview
Options
Examples
Discuss

Load HTML from a remote file and inject it into the DOM.

A GET request will be performed by default - but if you pass in any extra parameters in the form of an Object/Map (key/value pairs) then a POST will occur. Extra parameters passed as a string will still use a GET request.

Note: Keep in mind that Internet Explorer caches the loaded file, so you should pass some extra random GET parameter to prevent caching if you plan to call this function more than once

In jQuery 1.2 you can now specify a jQuery selector in the URL. Doing so will filter the incoming HTML document, only injecting the elements that match the selector. The syntax looks something like "url #some > selector". Default selector "body>*" always applies. If the URL contains a space it should be escape()d. See the examples for more information.

Arguments:

url	String
The URL of the HTML page to load.
data (Optional)	Map,String
Key/value pairs that will be sent to the server. As of jQuery 1.3 a data string can be passed in instead. When using a string, the request is made as a GET. When using an object/map (key/value pairs), the request is made as a POST.
callback (Optional)	Callback
The function called when the ajax request is complete (not necessarily success). function (responseText, textStatus, XMLHttpRequest) { this; // dom element }

Examples:

Demo
View Source

Load a piece of the documentation sidebar navigation into a custom unordered list.

$("#links").load("/Main_Page #jq-p-Getting-Started li");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="/img/spacer.gif">

Code
Results

Load the feeds.html file into the div with the ID of feeds.

$("#feeds").load("feeds.html");

<div id="feeds"><b>45</b> feeds found.</div>

Code

pass arrays of data to the server.

$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );

Code

Same as above, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.

 $("#feeds").load("feeds.php", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });

Name	Type

Documentation

Getting Started

API Reference

Plugins

Support

About jQuery

Wiki: Navigation

Wiki: Toolbox

Wiki: Namespaces

Wiki: Actions

Personal tools

load( url, [data], [callback] )