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

Showing posts with label ajaxStop. Show all posts

Tuesday, October 16, 2012

jquery ajaxStop vs ajaxSuccess

The events ajaxStop fires only when all the Ajax requests in the page complete their execution, while the ajaxSuccess get fired for every individual Ajax request which executes succesfully.

The ajaxStop event handler does not provide any parameters since it gets fired only after all the Ajax requests in the page get completed, whereas the ajaxSuccess event handler provides the request object and a set of settings as parameters which can be used to identify the request for which the ajaxSuccess event got fired.

The syntax for the ajaxSuccess event handler is as follows.

ajaxSuccess (function(objEvent, objXHR, objSettings))

objEvent        – The event Object
objXHR          - The XMLHttpRequest Object
objSettings    - Options used to make the Ajax Request

The syntax for the ajaxStop event handler is as follows.

ajaxStop(function())

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

jquery ajaxStop vs ajaxComplete

The events ajaxStop fires only when all the ajax requests in the page complete their execution, while the ajaxComplete get fired for every individual Ajax request.

The ajaxStop event handler does not provide any parameters since it gets fired only after all the Ajax requests in the page get completed, whereas the ajaxComplete event handler provides the request object and a set of settings as parameters which can be used to identify the request for which the ajaxComplete event got fired.

The syntax for the ajaxComplete event handler is as follows.

ajaxComplete(function(objEvent, objXHR, objSettings))

objEvent        – The event Object
objXHR          - The XMLHttpRequest Object
objSettings    - Options used to make the Ajax Request

The syntax for the ajaxStop event handler is as follows.

ajaxStop(function())

Related Post

jQuery ajaxStop

The jQuery ajaxStop event gets fired when all the Ajax requests in the page have completed, it does not fire when an individual request gets completed but waits for all the ajax request in the page to get completed.

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 ajaxStop event handler is as follows.

ajaxStop(function())

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

$(this).show();

});

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

$(this).hide();

});

Related Post

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