C# Guide - C#, Asp.Net, MVC, LINQ, jQuery and SharePoint Resources

Showing posts with label ajaxStart. Show all posts

Tuesday, October 16, 2012

jQuery ajaxStart

The jQuery ajaxStart event gets fired when the first Ajax requests is initialed in a page, it does not fire when every individual request starts but gets fired only when the first request is fired in the page.

This event can be typically used to show / hide Loading.. Indicators in a page which has multiple Ajax request executing simultaneously.

The ajaxStart event handler can be used to show the Loading.. Indicator and the ajaxStop handler can be used to hide the Loading.. Indicator.

The syntax for the ajaxStart event handler is as follows.

ajaxStart(function())

Example
$("#divLoading").ajaxStart(function(){

$(this).show();

});

$("#divLoading").ajaxStop(function(){

$(this).hide();

});

Friday, October 12, 2012

jQuery Ajax request progress events Example

jQuery provides 2 events ajaxStart and ajaxEnd, which will get fired when an Ajax request starts and when the request Ends, these events can be used to display a loading information to the user.

In this post we shall see on how to use the jQuery Ajax progress indicator events ajaxStart and ajaxEnd to display the status of an Ajax request.

We will make a call to the server which will be time consuming and see on how these events show a loading message till the request is completed.

Add the following code to a page, and click on the Show Progress button.

<title>Ajax Handlers</title>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

// Load Data

$('#btnProgress').click(function(event) {

event.preventDefault();

var nameList = "";

$.ajax({

url: "AjaxData.aspx",

data: { ID: "2" },

cache: false,

dataType: "xml",

success: function(result) {

$(result).find("Name").each(function() {

nameList = nameList + $(this).text() + "<br />";

});

$("#divProgress").html(nameList);

}

});

// Progress Indiator

$("#divProgress").ajaxStart(function() {

$("#divProgress").html("Loading.. Please wait");

});

$("#divProgress").ajaxStop(function() {

});

</script>

</head>

<body>

<tr>

<td><b>Action</b></td>

<td><b>Response</b></td>

</tr>

<td>

<asp:Button

ID="btnProgress"

runat="server"

Text="Show Progress" />

</td>

</td>

</tr>

</table>

</form>

</body>

</html>

We will mandate a delay in the server side, to see the loading indicator, on clicking the Show progress button the ajaxStart event gets fired and sets a loading message in the DIV tag, once the request is processed the loading message is replaced with the data from the server.

Related Post

jQuery Ajax request progress indicator events

Ajax requests are handled in 2 parts, the client makes the request to the server, processing happens at the server and the result in sent back to the client, the client decodes the data sent by the server and displays it in the browser.

If the processing activity at the server end is a time consuming one, the user will not be able to guess on what is happening and how long will it take to process the request, since the page does not post back the browser’s progress bar will also be idle.

To provide an indication of the request under progress jquery provides 2 events ajaxStart abd ajaxEnd, as the name indicated these events will get fired when an Ajax request starts and when the request Ends, these events can be used to display a loading information to the user.

The syntax for these events are as follows.

ajaxStart(function())
ajaxStop(function())

These functions are common to all the Ajax request in the page and will get fired when any of the Ajax requests in the page starts or Stops.

Related Post

jquery ajax Error Handling
jquery ajax Error Handling Example
jQuery Ajax request progress indicator events
jQuery Ajax request progress events Example
jquery ajaxStart
jquery ajaxStop
jquery ajaxComplete
jquery ajaxSuccess
jquery ajaxSuccess vs ajaxComplete
jquery ajaxStop vs ajaxComplete
jquery ajaxStop vs ajaxSuccess