使用Ajax加载图标

Question

I am trying to show ajax-loader.gif while data is loading, and after data is loaded completely, hide it.

Code update:

 $.ajax({
type: "POST",
dataType: 'json',
url: "api/Employee/GetData",
beforeSend: function () {
    // before send, show the loading gif
    $('#wait').show();
},
success: function (msg) {
    $.getJSON(uri).done(function (data) {

        $.each(msg, function (key, item) {
            // alert(item);
            $('<tr>', { html: formatItem(item) }).appendTo($("#tbdata"));
        });
    });
    /* or simply put here each statement inside callback like so          
     $.each( msg, function (key, item) {
      // alert(item);
      $('<tr>', { html: formatItem(item) }).appendTo($("#tbdata"));
     });
    */
    // or just hide here on success
    $('#wait').hide();
},
complete: function () {
    // or hide here
    // this callback called either success or failed
    $('#wait').hide();
}
}).done(function (data) {
$.each(data, function (key, item) {
    // alert(item);
    $('<tr>', { html: formatItem(item) }).appendTo($("#tbdata"));
});
});

According to some answers, Ajax has start and stop functions as shown here:

$('#wait').ajaxStart(function() {
$(this).show();
}).ajaxComplete(function() {
$(this).hide();
});

My question is how to combine both codes in order to show and hide ajax-loader.gif?

Answer 1

ajaxStart and ajaxComplete should be attached on document. Must be noted that, any ajax call will affected if you are using the global start and complete like you did. Anyway you can do like this :

  $(document).ajaxStart(function() {
     $('#wait').show();
  });
  $(document).ajaxComplete(function() {
    $('#wait').hide();
  });

Other than that you can use beforeSend and complete AJAX setting properties , IMHO latter code much more prefer than former since the latter code affected to it request only while former affected another ajax request if you have more than that :

$.ajax({
    type: "POST",
    dataType: 'json', 
    url: "api/Employee/GetData",
    beforeSend : function () {  
       // before send, show the loading gif
       $('#wait').show(); 
    },
    success: function ( msg ) { 
      /* or simply put here each statement inside callback like so          
       $.each( msg, function (key, item) {
        // alert(item);
        $('<tr>', { html: formatItem(item) }).appendTo($("#tbdata"));
       });
      */ 
      // or just hide here on success
       $('#wait').hide();
    },
    complete : function () { 
     // or hide here
     // this callback called either success or failed
     $('#wait').hide();
    }
}).done(function (data) {
    $.each(data, function (key, item) {
       // alert(item);
        $('<tr>', { html: formatItem(item) }).appendTo($("#tbdata"));
    });
});