The jQuery Load() ajax method supports HTML and Text
type responses sent by the server.
.aspx Page (Client Side)
<table border="1" id="tbl1">
The Load method can selectively load only part of the HTML response by passing
the ID of the element to element to be loaded in the Query string of the
request URL.
In this post we shall see on how to process only a part of the HTML data returned from the server using the jQuery Load() method.
In this post we shall see on how to process only a part of the HTML data returned from the server using the jQuery Load() method.
The syntax for receiving and
processing 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">
<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>
No comments:
Post a Comment