2016-08-09 52 views
1

ich das folgende Auswahlmenü habe:jQuery - anzeigen Ladesymbol beim Wechsel Option aus Dropdown

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

+0

Zeigen Sie das Symbol, wenn der Benutzer Ihr Dropdown aktiviert, und verstecken Sie es im Ajax-Rückruf? – gcampbell

Antwort

0

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

Wie kann ich es über dem div setzen, um die Daten anzuzeigen? Ist es etwas, was ich mit jQuery machen kann, oder einfach css benutzen? – Lykos

+0

Reine CSS. Das sind ein paar Dinge: (1) 'position: absolute', so dass Sie den DIV mit' top: 88px' und 'left: 88px' sowie (2)' z-index: 99' positionieren können, um div zu platzieren über den anderen Elementen * (Hinweis: die Zahlen in diesen Beispielen sind Beispiele - machen Sie die Zahlen, was auch immer angebracht ist) * – gibberish

0

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.

0

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: