The jQuery Load() ajax method supports HTML and Text
type responses sent by the server.
The Load method can selectively load only a specific element from the the HTML response by passing the ID of the element to be loaded in the Query string of the request URL.
In this post we shall see on how to load only a specific element from the HTML data returned from the server using the jQuery Load() method.
The Load method can selectively load only a specific element from the the HTML response by passing the ID of the element to be loaded in the Query string of the request URL.
In this post we shall see on how to load only a specific element from the HTML data returned from the server using the jQuery Load() method.
The syntax for receiving and displaying
a specific element from the HTML response is as follows.
$("#<Target HTML element ID>").load("<Server URL #Element ID>");
The following example receives a HTML format data from the server and displays only the element with the ID tbl2 from the response data in a DIV tag in the browser.
$("#<Target HTML element ID>").load("<Server URL #Element ID>");
The following example receives a HTML format data from the server and displays only the element with the ID tbl2 from the response data in a DIV tag in the browser.
.aspx Page (Client Side)
<html xmlns="http://www.w3.org/1999/xhtml"
>
<head runat="server">
<title>jQuery
Ajax Load</title>
<script type="text/javascript" src="JavaScript/jquery-1.7.2.js"></script>
<script
type="text/javascript"
language="javascript">
$(document).ready(function() {
//
// Get
Partial HTML Response data from the Server
$('#btnGetPartialHTML').click(function(event) {
event.preventDefault();
$("#divPartialHTML").load("AjaxData.html #tbl2");
});
});
</script>
</head>
<body>
<form id="frmAjax" runat="server">
<table border="1">
<tr>
<td><b>Action</b></td>
<td><b>Response</b></td>
</tr>
<tr valign="middle">
<td>
<asp:Button
ID="btnGetPartialHTML"
runat="server"
Text="Partical HTML" />
</td>
<td align="center">
<br /><div
id="divParticalHTML"></div>
id="divParticalHTML"></div>
</td>
</tr>
</table>
</form>
</body>
</html>
.AjaxData.html
(Server Side)
<table border="1" id="tbl1">
<table border="1" id="tbl1">
<tr>
<td><b>Name</b></td>
<td><b>Age</b></td>
<td><b>Address</b></td>
</tr>
<tr>
<td>John</td>
<td>35</td>
<td>125.
E.Spring Creeks, OH</td>
</tr>
<tr>
<td>Harry</td>
<td>23</td>
<td>121
Highway, Plano TX</td>
</tr>
</table>
<br /><br />
<table border="1" id="tbl2">
<tr>
<td><b>Name</b></td>
<td><b>Age</b></td>
<td><b>Address</b></td>
</tr>
<tr>
<td>Bill</td>
<td>23</td>
<td>125.
E.Spring Creeks, OH</td>
</tr>
<tr>
<td>Steve</td>
<td>32</td>
<td>121
Highway, Plano TX</td>
</tr>
