< Buzzing or vibrating the login form using jquery Posted On May 15, 2012 : 0 comments << >> Simple div slideshow using jquery Posted On May 9, 2012 : 0 comments << >> Copy mysql column in varchar to type date Posted On May 3, 2012 : 0 comments << >> Enter only numbers inside a input field of a form using javascript Posted On May 1, 2012 : 0 comments << >> Slide in and out animate div vertically using jquery Posted On April 25, 2012 : 1 comment << >> Tag cloud using php, mysql and ajax with filter Posted On April 24, 2012 : 0 comments << >> Change webpage font color or background color from the user side using javascript Posted On April 19, 2012 : 0 comments << >> A single link that cycles through several webpage background color using javascript Posted On April 17, 2012 : 0 comments << >> Simple webpage redirection using perl script Posted On April 10, 2012 : 0 comments << >> Get ipaddress using perl script Posted On April 4, 2012 : 0 comments << >>

Ajax and Jquery

This Tutorial Has Been Viewed 1,046 Times.
VN:F [1.9.17_1161]
Rating: 1.0/10 (1 vote cast)

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.17_1161]
Rating: 1.0/10 (1 vote cast)

Ajax and Jquery, 1.0 out of 10 based on 1 rating

Incoming search terms:





You will also be interested in ,

Tags: ,

2 Responses

  1. palaniswamy says:

    hi want to do zoomin zoomout when mouse over image control in ajax how to do this Or in odinary coding c#

    VA:F [1.9.17_1161]
    Rating: 0.0/5 (0 votes cast)

Leave a Reply

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