Show loading gif während der Wartezeit für die ajax-Antwort

Habe ich eine Sitzplatz-Diagramm. Wenn ich auf einen Sitz, ich will zeigen, ein lade-gif. Sitz-chart kommt aus dem svg-Dokument. Sitze sind svg-Elemente. Wenn ajax-response zurück, ich ausblenden möchten, laden von gif. Schrieb ich folgenden code, aber es funktioniert nicht. 

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

InformationsquelleAutor ebruszl | 2013-10-11

  1. 7

    Können Sie nur binden, 2 Funktionen ajaxStart() und ajaxStop() bzw.

    .ajaxStart()

    Einen handler registrieren, der aufgerufen wird, wenn die ersten Ajax-request beginnt.
    Dies ist ein Ajax-Event.

    .ajaxStop()

    Einen handler registrieren, der aufgerufen wird, wenn alle Ajax-requests abgeschlossen haben.
    Dies ist ein Ajax-Event.

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

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

    Diese wird automatisch aufgerufen, wenn der Ajax-Anfragen, die beginnen oder enden.

    Wie kann ich Sie verwenden
    denken Sie daran zu befestigen Ereignis zu dokumentieren, api.jquery.com/ajaxStart
    Foo Genial, ich danke Ihnen sehr
    Nur eine kurze Notiz, um Menschen daran zu erinnern, die Sie benötigen, zu verbergen, die Ladeanzeige am Ende Ihren Erfolg & error-Anrufe als ajaxStop aufgerufen wird, bevor Sie fertig sind zu tun, was immer es ist, du machst bei Erfolg/Fehler

    InformationsquelleAutor Gung Foo

  2. 1

    versuchen Sie dieses 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>

    durch und bewahren Sie diese in Ihrem Formular

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

    und können Sie finden die plug-in - hier

    InformationsquelleAutor Hussain Akhtar Wahid 'Ghouri'

Schreibe einen Kommentar