Extract particular part (of html) from server response using jQuery AJAX request

by Jagadish Pulakhandam on 10/31/2012 3:15:30 PM
Rated 0 from 0 votes
Brief: Demonstrates on extracting information from a particular HTML tag from a jQuery AJAX response.
Posted to: Ajax programming using JQuery - Tutorials/Videos
Add to DiggAdd to del.icio.usAdd to FURLAdd to RedditAdd to YahooAdd to BlinklistAdd to GoogleAdd to ma.gnoliaAdd to ShadowsAdd to Technorati

Attached source code/video demonstrates the following:
  • How to use (jQuery) "load" method to send an AJAX request
  • How to extract (fetch/load) part of HTML (or server) response using jQuery AJAX
  • How to fetch server response and place it into an element (using jQuery AJAX)
  • How to disable browser caching jQuery AJAX responses.
Source Code:

Following .htm contains jQuery to fetch data from ASP.NET page:

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03.<head>
04.    <title></title>
05.    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
06.    <script type="text/javascript">
07. 
08.        //disable cache
09.        $.ajaxSetup({
10.            cache: false
11.        });
12. 
13.        function GetServerPageContent() {
14.            //fetches the result for the first time and caches it unless we force it to not to cache
15.            $("#results").load("/ServerDateTime.aspx #lblServerDateTime");
16.        }
17. 
18.    </script>
19.</head>
20.<body>
21.    <input type="button" value="Show Server Content" onclick="GetServerPageContent();" /><br>
22.    <div id="results"></div>
23.</body>
24.</html>

ServerDateTime.aspx - The page which is being used by above script

01.<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ServerDateTime.aspx.vb" Inherits="SampleWebSite.ServerDateTime" %>
02. 
03.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04. 
06.<head runat="server">
07.    <title></title>
08.</head>
09.<body>
10.    <form id="form1" runat="server">
11.    <div id="MainDiv">
12.        Current time: <asp:Label ID="lblServerDateTime" runat="server" Text=""></asp:Label>
13.    </div>
14.    </form>
15.</body>
16.</html>

ServerDateTime.aspx.vb - Code-behind for the above page

1.Public Class ServerDateTime
2.    Inherits System.Web.UI.Page
3. 
4.    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
5.        lblServerDateTime.Text = Date.Now.ToString()
6.    End Sub
7. 
8.End Class


Rated 0 from 0 votes ( login  to rate)
DotnetKicks DotnetKicksDe DotNetShoutout

Attachments / Source Code
You need to Login or Join for FREE to download the following


Discussion
No comments yet!