Ajax and Jquery

This Tutorial Has Been Viewed 711 Times.

This is a simple script which uses JQUERY to easily collect data from another webpage using asynchronous data collection method [AJAX].
Here the page loads another content without reloading the entire webpage. It loads data in to a div tag using AJAX.
Here is the script

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#data_call_display").ajaxStart(function(){
    $("#data_loading").css("display","block");
  });
  $("#data_call_display").ajaxComplete(function(){
    $("#data_loading").css("display","none");
  });
  $("[href='#']").click(function(){
    $("#data_call_display").load("rssreader.php");
  });
});
</script>
</head>
<body>
<a href="#">Get The Content</a>
<div id="data_call_display"><h2>Ajax Content Loads Here</h2></div>
<div id="data_loading" style="display:none;width:69px;height:89px;border:0px solid black;position:absolute;top:50%;left:45%;padding:2px;"><br /><img src="loading.gif"/></div>
</body>
</html>

DEMO

VN:F [1.9.14_1148]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.14_1148]
Rating: 0 (from 0 votes)

Incoming search terms:





You will also be interested in ,

Tags: ,

Leave a Reply

Proudly designed by Mistonline.in.
Affordable Seo PackagesSeo BlogEdu Backlinks