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>   

Search Flipkart Products:
Flipkart.com

No comments: