Does jQuery's Ajax have anything like .NET's LoadingElementId

Question

.NET's Ajax helper has the LoadingElementId: String property, gets and sets the ID of the DOM element to be displayed for the time it takes to complete the request.

Looking for the easiest way to implement an 'In Process' spinner for forms submitted via jQuery's Ajax toolkit.

mny thx

Answer 1

jQuery has many ajaxEvents. You can tie the visibility of an element to these.

$.ajaxStart(function(){ showLoading(); });
$.ajaxComplete(function(){ hideLoading(); });

Answer 2

Use the beforeSubmit & complete events of .ajax.

If you wanted to do this for all ajax calls you could use the global ajaxStart and ajaxComplete events rather than declare this everytime.

$.ajax({
  url: "test.html",
  beforeSubmit : showSpinner,
  complete : hideSpinner,
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});

function showSpinner(){

  $('#someElement').show();

}

function hideSpinner(){

  $('#someElement').hide();

}


//Using global ajax events

$.ajaxStart( showSpinner );
$.ajaxComplete( hideSpinner );