jQuery - anzeigen Ladesymbol beim Wechsel Option aus Dropdown

Question

ich das folgende Auswahlmenü habe:

<select name="period" id="stats-period"> 
     <option value="all">All time</option> 
     <option value="360">12 months</option> 
     <option value="270">9 months</option> 
     <option value="180">6 months</option> 
     <option value="90">3 months</option> 
     <option selected="selected" value="30">30 days</option> 
     <option value="7">7 days</option> 
    </select> 

Wenn ich eine Option aus dem Drop-Down wählen Sie einen Ajax-Aufruf, um aus ich die richtigen Datensätze zu erhalten Datenbank, so ist dies mein Skript:

function timePeriod(changePeriod) { 

       var url = '<?= admin_url('reports/change_period') ?>'; 

       $.post(url, {period: changePeriod}, function (response) { 

        var json = $.parseJSON(response); 

        if (json.error == true) { 
         $('#reports').hide(); 
         $('#no-reports').show(); 
        } 
        else { 
         $('#reports').show(); 
         $('#no-reports').hide(); 

         $('#numprojects').text(json.projects); 
         $('#average-cost').text(json.average_cost.toFixed(2)); 
         $('#over-budget').text(json.over_budget); 
         $('#average-client-flags').text(json.average_client_flags); 
         $('#average-delayed').text(json.average_delayed.toFixed(1)); 
        } 
       }); 
      } 

      $('#stats-period').on('change', function(){ 
       var selected = $(this).val(); 
       timePeriod(selected); 
      }); 

Was wan't ich zu tun, ist ein Ladesymbol zu zeigen, wenn der ausgewählte Wert der Drop-Down-Wechsel, bis die ajax-Aufruf abgeschlossen ist, wie kann ich das tun?

Answer 1

gif Ihren Laden Unter der Annahme ist in einem div mit ID = #myDiv

function timePeriod(changePeriod) { 

    var url = '<?= admin_url('reports/change_period') ?>'; 

    $('#myDiv').show(); 

    $.post(url, {period: changePeriod}, function (response) { 

     $('#myDiv').hide(); 

     var json = $.parseJSON(response); 

     >SNIP< 

Answer 2

Zeigen Sie das Ladesymbol am Anfang der Funktion an, die den Ajax-Aufruf durchführt. Und entfernen Sie das Ladesymbol innerhalb der success: des Ajax-Aufrufs.

Answer 3

können Sie das Ladeelement erstellen, wenn es noch nicht vorhanden ist, zeigt Position relativ zu Ihrer Option wählen. Sobald Sie die Antwort vom Server erhalten, können Sie es ausblenden: