Показать загрузку gif в ожидании ответа ajax

Question

У меня есть таблица мест. Когда я нажимаю сиденье, я хочу показать загрузку gif. Схема сидений берется из документа svg. Сиденья - это элементы svg. Когда возвращается ответ ajax, я хочу скрыть загрузку gif. Я написал код ниже, но он не работает.

<section> 
    <div class="parent" style="text-align: center;">  
     <div class="panzoom" style="width: 500px; height:375px;"> 
     <div class="loading" style="display:none" id="loading"><img src="../../Scripts/spinner.jpg" style="width:200px; padding-left:175px;"/></div>  
     </div> 
    </div> 
    <div class="seperator"></div> 
    <div class="buttons" style="text-align:center;"> 
     <input type="range" class="zoom-range"> 
     <a class="button reset">Sıfırla</a> 
    </div> 
    <script> 
      $(function() { 
      var $section = $('section').first(); 
      $section.find(".panzoom").svg({ 
       loadURL: "https://resources-biletino.s3.amazonaws.com/content/venue/17/seatChart-01.svg",onLoad:function(){ 
        initAll(); 
       } 
      }); 

      $section.find(".panzoom").panzoom({ 
       $zoomRange: $section.find(".zoom-range"), 
       $reset: $section.find(".reset"), 
       cursor: "auto", 
       increment: 0.6 
      }); 
     }); 

     function seatObject(id, label, status, token){ 
      this.id = id; 
      this.label = label; 
      this.status = status; 
      this.token = token; 
     } 

     var seats = []; 

     function initAll(){    
      $(".seatObj").each(function(){ 
       var id = $(this).attr("id"); 
       var temp = new seatObject("#" + id, "label" + id, "available", ""); 
       seats[id] = temp;      
       $(this).click(function() {                 
       var currentSeat = $(this).attr("id"); 
       $("#loading").show();         
        if (seats[currentSeat].status == "selected") 
        { 
         dequeueSeat(currentSeat); 
        } 
        else 
        { 
         enqueueSeat(currentSeat);             
         //alert($(this).attr("inkscape:label"));      
        } 
       }); 
      }); 

      $.ajax({      
       type: "GET", 
       url : "@Url.Action("GetFullSeats","Event")", 
       data:{layoutID:'@Model.LayoutID'}, 
       dataType : "json", 
       success:function(result) 
       {    
        var uintArray = Base64Binary.decode(result); 
        for (var i = uintArray.length - 1; i >= 0; i--) 
        { 
         if (uintArray[i] > 0) 
         { 
          for (var j = 0; j < 8; j++) 
          { 
           if ((uintArray[i] & Math.pow(2, j)) == Math.pow(2, j)) 
           { 
            seats[(((2047 - i) * 8) + j)].status = "sold"; 
           } 
          } 
         } 
        }   
        drawSeats(); 
       }      
      });  

      $.ajax({      
       type: "GET", 
       url : "@Url.Action("GetQueuedSeats", "Event")", 
       data:{ 
        layoutID:'@Model.LayoutID' 
       }, 
       dataType : "json",        
       success:function(result){    
       var queuedSeats = result.split(","); 
       $("#loading").hide(); 
        for (var i = 0; i < queuedSeats.length; i++) 
        { 
         if (queuedSeats[i] != ""){        
          seats[queuedSeats[i]].status = "queued"; 
         } 
        } 
        drawSeats(); 
       }  
      });    
     } 

     function drawSeats(){ 
      for (var i = 0; i < seats.length; i++) 
      { 
       if (seats[i].status == "available") 
       { 
        $(seats[i].id).css('fill','#888888'); 
       } 
       if (seats[i].status == "sold") 
       { 
        $(seats[i].id).css('fill','#ff4848'); 
       } 
       if (seats[i].status == "queued") 
       { 
        $(seats[i].id).css('fill','#F0B702'); 
       } 
        if (seats[i].status == "selected") 
       { 
        $(seats[i].id).css('fill','#00c865'); 
       } 
      } 
     } 

     function enqueueSeat(currentSeat){ 
      $.ajax({ 
       type: "GET", 
       url: "@Url.Action("EnqueueSeat", "Event")", 
       data:{ 
        selectionGUID:"@(selectionGUID)", 
        seatID: currentSeat, 
        layoutID:'@(Model.LayoutID)' 
       }, 
       dataType:"json",     
       success:function(data){     
        if(data != "") 
        { 
         seats[currentSeat].status = "selected"; 
         seats[currentSeat].token = data;       
        } 
        drawSeats(); 
       }          
      }); 
     } 

     function dequeueSeat(currentSeat){ 
      $.ajax({ 
       type: "GET", 
       url: "@Url.Action("DequeueSeat", "Event")", 
       data:{ 
        reservationToken:seats[currentSeat].token 
       }, 
       dataType:"json",     
       success:function(data){ 
        if(data) 
        { 
         seats[currentSeat].status = "available"; 
         seats[currentSeat].token = ""; 
        } 
        drawSeats(); 
       }          
      }); 
     } 
    </script> 
</section> 

Answer 1

Вы можете просто связать 2 функции ajaxStart() и ajaxStop() соответственно.

.ajaxStart()

Зарегистрировать обработчик вызывается, когда начинается первый запрос Ajax. Это событие Ajax.

.ajaxStop()

Зарегистрировать обработчик вызывается, когда все запросы Ajax завершения. Это событие Ajax.

$.ajaxStart(function() { 
    $('#loading').show(); // show loading indicator 
}); 

$.ajaxStop(function() 
{ 
    $('#loading').hide(); // hide loading indicator 
}); 

Они будут автоматически вызывается, когда Ajax запросы начинаются или заканчиваются.

Answer 2

попробовать этот плагин в

<script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() 
    { 
     // bind 'myForm' and provide a simple callback function 
     $("#tempForm").ajaxForm({ 
     url:'../calling action or servlet', 
     type:'post', 
     beforeSend:function() 
     { 
     alert("perform action before making the ajax call like showing spinner image"); 
     }, 
     success:function(e){ 
     alert("data is"+e); 
      alert("now do whatever you want with the data"); 
     } 
     }); 
    }); 
</script> 

и держать это внутри формы

<form id="tempForm" enctype="multipart/form-data"> 
<input type="file" name="" id="" /> 
</form> 

и вы можете найти вилку в here