Show loading gif while waiting for ajax response

Question

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.

<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

You can just bind 2 functions to ajaxStart() and ajaxStop() respectively.

.ajaxStart()

Register a handler to be called when the first Ajax request begins. This is an Ajax Event.

.ajaxStop()

Register a handler to be called when all Ajax requests have completed. This is an Ajax Event.

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

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

These will be automatically called when Ajax requests begin or end.

Answer 2

try this plug in

<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>

and keep this inside your form

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

and you can find the plug in here