webentwicklung-frage-antwort-db.com.de

Spinner-Symbol beim Laden beim Senden anzeigen

Ich versuche, beim Laden beim Senden den Drehknopf auf der Schaltfläche anzuzeigen. Ich habe einige Implementierungen gesehen und in meiner Anwendung versucht, aber es funktioniert nicht. Hier ist die Geige , die ich zu beschreiben versuche. Ich möchte noch eine andere Sache erwähnen, dass dieser HTML-Code in meiner Seitenleiste steht und über Javascript bei einem Ajax-Aufruf hinzugefügt wird

My JS

        (function () {
            $(document).on("click","#submitbutton", function (event) {
                $(this).addClass('active');
                var formdata = $("#filterdata").serializeArray();
                var url1 = "/SelectUnit";
                $.ajax({url: url1, data: formdata, type: 'GET', async:false .....}).done(function(){
    $(this).removeClass('active');

})
            });
            })();
   

 My CSS
    

.spinner {
          display: inline-block;
          opacity: 0;
          max-width: 0;
    
          -webkit-transition: opacity 0.25s, max-width 0.45s; 
          -moz-transition: opacity 0.25s, max-width 0.45s;
          -o-transition: opacity 0.25s, max-width 0.45s;
          transition: opacity 0.25s, max-width 0.45s; /* Duration fixed since we animate additional hidden width */
        }
    
        .has-spinner.active {
          cursor:progress;
        }
    
        .has-spinner.active .spinner {
          opacity: 1;
          max-width: 50px; /* More than it will ever come, notice that this affects on animation duration */
        }
My HTML
<div class="formbuttons">
            <button type="button" id="submitbutton" class="btn buttoncolor has-spinner">
                  <span class="spinner"><i class="icon-spin icon-refresh"></i></span>Select</button>
            <button type="button" class="btn buttoncolor" onclick="clearFilter();">Clear</button>
</div>
4
Murali Krishna

Ich habe einige Änderungen in Ihrem Code vorgenommen (das Symbol wurde geändert und das CSS bearbeitet), um den Test zu vereinfachen: http://jsfiddle.net/q1d06npq/4/

Anstelle von $.ajax().done() ist es in Ihrem Fall die beste Option, die $.ajax().always() zu verwenden, die ausgeführt wird, selbst wenn die Ajax fehlschlägt.

Der Code $(this) in der Rückruffunktion zeigt nicht auf die Schaltfläche, um zu lösen, dass Sie so etwas verwenden können: var elem = $(event.currentTarget);

4
Peruggia

Ich habe das Problem in meiner Frage herausgefunden. Eigentlich war ich dabei

async:false in my AJAX call. 

aus diesem Grund wird das Hinzufügen der Klasse vor dem Ajax-Aufruf nach dem Aufruf ausgeführt.

Das habe ich aus der folgenden Frage herausgefunden.

jquery ajax beforeesend

1
Murali Krishna

Sie können jQuery verwenden, um die Schaltfläche thext zu ersetzen, sobald Sie auf die Schaltfläche geklickt haben. Ich habe dies bei einem früheren Projekt verwendet:

jQuery(".submit-btn span").html('<i class="fa fa-refresh fa-lg fa-spin" style="color: #ffffff;"></i>');

Dadurch wurde der eigentliche Schaltflächentext durch das sich drehende Symbol ersetzt. Sie können ihn nach Abschluss der Verarbeitung wieder auf den ursprünglichen Text zurücksetzen.

1
swiss_blade

Sie erreichen dies mit folgendem Code:

var $loading = $('.spinner').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });
0
Gangadhar Jannu

das Problem ist, dass Sie die aktive Klasse entfernen, bevor der Code in $ .ajax überhaupt ausgeführt wird.

Es gibt verschiedene Möglichkeiten, das (this) -Objekt an Ihre Erfolgsfunktion $ .ajax zu übergeben. Hier ist eine.

(function () {
    $(document).on("click","#submitbutton", function (event) {
        $(this).addClass('active');
        var formdata = $("#filterdata").serializeArray();
        var url1 = "/SelectUnit";
        $.ajax({
            context: this,
            url: 'whatever.php'
        }).done(function(){
            $(this).removeClass('active');
        });

    });
})();
0
Zombiesplat