顯示載入圖片時等待阿賈克斯響應

我有一個座位圖。當我點擊一個座位時，我想顯示一個加載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>

來源

2013-10-11 ebruszl

您只需綁定2個功能ajaxStart()和ajaxStop()分別。

.ajaxStart（）

註冊一個處理程序中的第一Ajax請求開始時被調用。這是一個Ajax事件。

.ajaxStop（）

註冊一個處理當所有Ajax請求已經完成被調用。這是一個Ajax事件。

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

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

這些將在Ajax請求開始或結束被自動調用。

來源

2013-10-11 08:13:41

我將如何使用它們 – ebruszl

記得事件附加找到插件文檔https://api.jquery.com/ajaxStart/ – clod986

@Gung Foo真棒，非常感謝你 – whitesiroi

嘗試

<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

來源

2013-10-11 08:34:06

顯示載入圖片時等待阿賈克斯響應

回答

相關問題