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

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 );