loading image while call ajax show only once

Question

I am a beginner. I try to create loading image while getting data by this code.

$('#loading-image').ajaxStart(function () {
      $(this).fadeIn('fast');
      console.log("1st call");
}).ajaxStop(function () {
      $(this).stop().fadeOut('fast');
});

So I create image in

<div id="loading-image" style="display:none"><img src="img/loading_img.gif"></div>

The image just show only this ajax calling

 $('#select_company').change(function(){
        if(this.value!="")
        {                 
                    $.ajax({
                        url: "get_list.php",
                        async: true,
                        dataType: "json",
                        type: "post",
                        data: {
                            "select_company": $("#select_company").val(),
                            "get_list": "div"
                        },
                        success: function (data) {
                            $('#myTable').empty();
                            clear_list('div','Select Division');  

                            if(data!=null){                                 
                              $.each(data, function(key, value) {   
                                        $('#select_div')
                                       .append($("<option></option>")
                                       .attr("value",value)
                                       .text(key)); 
                              });

                            }
                        }
                    });

        }
        else
        {
          clear_list('div','Select Division');  

        } 
  });

But it don't show loading image when i calling data from this function

    function getSubData(prodId,stationID) {
    var data_return = null;

    $.ajax({
            url: "get_sub_data.php",
            async: false,
            type: "post",
            dataType: "json",
            data: {
                    "ProdID": prodId,
                    "StationID": stationID
                  },
                  success: function(res, textStatus, jqXHR) {
                      data_return = res;
                      console.log(data_return);

                  },

          });
    return data_return;
    }

What should i do. I tried another way to create image loading such add

$("#loading").show(); 

at the first line after function before call ajax and hide image after ajax success. It works only in the first function that i said.

Addition. Is it probably affect from my code calling ajax like this

function createTable(data,columnTable){

    var content = '<table border="1" cellspacing="0" class="table table-bordered"><thead><tr><th>No.</th><th>Job</th><th>Lot</th><th>จำนวน (Plan)</th><th>จำนวน (Actual)</th>';
    for(var i = 0 ; i< (columnTable.length) ; i++){

      if(i == (columnTable.length)-1){
        subColToExcel += columnTable[i];
      }else{
        subColToExcel += columnTable[i]+",";
      }

      content += '<th>'+columnTable[i]+'</th>';

    };

    content+= '</tr></thead><tbody>';

    for(var i = 0 ; i< (data.length) ; i++){
      var number = i+1;
      var strData = '';
      content += '<tr>';
      content += '<td align="center">'+number+'</td>';
      for (var j = 1; j < data[i].length ; j++){
          var item = data[i];      
          strData += item[j]+",";        
          content += '<td align="center">'+item[j]+'</td>';
      }


      var subData = getSubData(data[i][0],columnTable);

      for (var z=0; z < (columnTable.length) ; z++ ){

          if(z == (columnTable.length)-1){
            strData += subData[z];
          }else{
            strData += subData[z]+",";
          }

          if(subData[z]==' - '){
            content += '<td bgcolor="#808080" align="center">'+subData[z]+'</td>';
          }else{
            content += '<td align="center">'+subData[z]+'</td>';
          }

      }

      if(i == (data.length)-1){
        dataToExcel += strData;
      }
      else{
        dataToExcel += strData+"///"; 
      }

      content += '</tr>';
    }
    content += '</tbody></table>';
    // console.log(dataToExcel);
    document.getElementById("myTable").innerHTML = content;


  }

The table will create when user click button as follows

 function clickShowReport()
  {                       

      data_backup = getAjaxData();
      column_table = getColumn();

      if($("#select_div").val() == ''){
        alert("Please select division");
      }
      else{
        if(data_backup.length == 0||data_backup[0].length==0)
        {
            show_error();
            data_backup = null;

        } else 
        {

            createTable(data_backup,column_table);

        }  

      } 

  }

The image don't show while ajax call data in getSubData function, getAjaxData function and getColumnFunction.

Answer 1

You have to do two things in your code:

1. use global:false in jQuery.ajax() method and
2. $(document).ajaxStart()/.ajaxStop() you have to delegate to only to the document.

---

 $.ajax({
    url: "get_sub_data.php",
    async: false,
    global:false, //<-----use here to exclude
    type: "post",
 });

and this has to be changed like:

$(document).ajaxStart(function () {
      $('#loading-image').fadeIn('fast');
      console.log("1st call");
}).ajaxStop(function () {
      $('#loading-image').stop().fadeOut('fast');
});

---

Or there is another way like:

1.) Create two methods:

var app = app || {};

app.ajaxstart = function(){
    $('#loading-image').fadeIn('fast');
};
app.ajaxstop = function(){
    $('#loading-image').stop().fadeOut('fast');
};

2.) Now you can use these two methods wherever you need it:

$.ajax({
   url: "",
   type: "",
   beforeSend : app.ajaxstart, //<----use it here before execution
   success:function(){},
   error:function(){},
   complete:app.ajaxstop //<---use it here to remove whether ajax has success or error.
});

Answer 2

It should be $(document).ajaxStart instead of $('#loading-image')

$(document).ajaxStart(function () {
      $('#loading-image').fadeIn('fast');
      console.log("1st call");
}).ajaxStop(function () {
      $('#loading-image').stop().fadeOut('fast');
});

I strongly feel that .stop() is not needed. Just fadeIn and fadeOut are fine in your case. Try removing that once. May be irrelavent here