Tuesday, October 30, 2012

jQuery Load Specific HTML Element from Response Example


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 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.


.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> 
                </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>   

jQuery Load Partial HTML Response Example

The jQuery Load() ajax method supports HTML and Text type responses sent by the server. 
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.

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.


.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> 
                </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>   

jQuery Ajax Method

jQuery provides various methods like ajax, load, get, post, getJSON, getJSON etc  to make an Ajax call. In this post we shall see on how to use the Ajax() method to make an Ajax call.

The Ajax() method is core method used to perform ajax calls using jQuery, The ajax method supports GET & POST requests, it also supports the server data returned in the following formats.

HTML
XML
Text
JSON
Script

The Syntax for the Ajax() method is as follows.
$.ajax({
    url: "",     
   
 type: 'GET/POST',
    data: {},
   
 cache: <true/false>,
   
 dataType: "text/xml/html/json",
   
 success: function(result) {…});
   
 }
});

Related Post
jquery ajax method
jquery ajax get example
jquery ajax post example
jquery ajax html response example
jquery ajax xml response example
jquery ajax json response example
jquery ajax text response example