jQuery ajaxstart ajaxstop

Displaying Ajax started element using JQuery ajaxstart,ajaxstop

jQuery is most famous javascript library compared to its concurrents. One of importent functionality in jQuery is its Ajax handling. It has very flexible methods for Ajax.We seen how to handle the Ajax Errors in my previous Article.Here we concentrate on jQuery ajaxstart,ajaxstop default methods to handle globally.

Present it is very common to use ajax for every functionality,while querying externel resources with ajax we have to show the end user there is something happening behind the page.Some novice users don’t know about this functionality. So we must intimate the end user we are working on back end. Some times Ajax calls takes more time to respond with some reason. in that case most users confused about it may be stopped working . so here we take one example and tutorial.

ajaxStart

This method is called globally by jQuery while before starting any ajax call starts.

ajaxstop

This method called after stopping the Ajax stopped successfully or Ajax call cancelled.

These methods called on $.getJSON,$.get,$.post,$().load,$.getScript function.

Example

1
2
3
4
5
6
7
8

jQuery().ready(function(){ //Dom ready
$('#loadimg').ajaxStart(function(){$(this).show();});//this method for ajax start
$('#loadimg').ajaxStop(function(){$(this).hide();});//this method for ajax stop
$('#loadjson').click(function(){
$.getJSON('ajax.js',function(d){alert(d.name);});//$.getJSON method
});
$('#loadelement').click(function(){$(this).load('loadsnippet.html')});//load method
});

Try more examples

Demo Download