title: Show loading gif while waiting for ajax response
body: <p>I have a seat chart. When i click a seat, i want to show a loading gif. Seat chart comes from svg document. Seats are svg elements. When ajax response returned, i want to hide loading gif. I wrote code below but it doesnt work. </p>
  
  <pre><code>&lt;section&gt;
      &lt;div class="parent" style="text-align: center;"&gt;      
          &lt;div class="panzoom" style="width: 500px; height:375px;"&gt;  
          &lt;div class="loading" style="display:none" id="loading"&gt;&lt;img src="../../Scripts/spinner.jpg" style="width:200px; padding-left:175px;"/&gt;&lt;/div&gt;     
          &lt;/div&gt;   
     &lt;/div&gt;
     &lt;div class="seperator"&gt;&lt;/div&gt;
     &lt;div class="buttons" style="text-align:center;"&gt;
          &lt;input type="range" class="zoom-range"&gt;
          &lt;a class="button reset"&gt;Sıfırla&lt;/a&gt;
     &lt;/div&gt;   
      &lt;script&gt;
              $(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 &gt;= 0; i--) 
                      {
                          if (uintArray[i] &gt; 0) 
                          {
                              for (var j = 0; j &lt; 8; j++) 
                              {
                                  if ((uintArray[i] &amp; 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 &lt; queuedSeats.length; i++) 
                      {
                          if (queuedSeats[i] != ""){                            
                              seats[queuedSeats[i]].status = "queued";
                          }
                      }
                      drawSeats();
                  }    
              });            
          }
  
          function drawSeats(){
              for (var i = 0; i &lt; 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();
                  }                                      
              });   
           }
      &lt;/script&gt;
  &lt;/section&gt;
  </code></pre>