Karte spinner-Symbol auf Taste beim laden auf " Absenden

Ich versuche zu zeigen, spinner-auf-Taste beim laden auf " Absenden habe ich gesehen, ein paar Implementierungen und versucht in meiner Anwendung, aber es funktioniert nicht. Hier ist die fiddle das ich versuche zu beschreiben. Ich möchte erwähnen, eine andere Sache, dass dieser HTML-Code ist auf meiner sidebar und Hinzugefügt wird per javascript auf ajax-call

JS:

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');

})
            });
            })();

CSS:

   

 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 */
        }

HTML:

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>

InformationsquelleAutor Murali Krishna | 2014-09-17

4

Ich einige änderungen vorgenommen (änderung der Symbol und bearbeitet die CSS) geben Sie den code einfacher zu testen: http://jsfiddle.net/q1d06npq/4/

Statt $.ajax().done() die beste option, die Sie Fall ist die Verwendung der $.ajax().always() ausgeführt wird, auch wenn die ajax schlägt fehl.

Den code $(this) innerhalb der callback-Funktion wird nicht auf die Taste zu lösen, die Sie verwenden können, so etwas wie dieses: var elem = $(event.currentTarget);
- Dies scheint zu funktionieren, aber nur wenn ich debug in der Entwickler-tools ist, wenn ich Schritt für Schritt gehen.
- Ich habe aktualisiert die URL zu verwenden, die jsfiddle mock. Ich denke, dass Es jetzt funktioniert: jsfiddle.net/q1d06npq/4
InformationsquelleAutor Peruggia
1

Können Sie jQuery verwenden, um ersetzen Sie die Schaltfläche thext sobald der button geklickt wurde. Ich habe diese auf einem früheren Projekt:
```
jQuery(".submit-btn span").html('<i class="fa fa-refresh fa-lg fa-spin" style="color: #ffffff;"></i>');
```
Diese ersetzt die eigentliche button-text mit den sich drehenden Symbol... können Sie es ändern zurück zu den ursprünglichen text nach der Verarbeitung fertig ist...

InformationsquelleAutor swiss_blade
1

Fand ich heraus, das Problem in meiner Frage. Eigentlich war ich dabei
```
async:false in my AJAX call. 
```
weshalb 'hinzufügen der Klasse, bevor der ajax-Aufruf ausgeführt wird, nachdem der Anruf.

Fand ich heraus, das aus der folgenden Frage.

jquery ajax beforesend

InformationsquelleAutor Murali Krishna
0

das problem ist, dass Sie entfernen die active-Klasse, bevor der code innerhalb der $.ajax selbst führt.

Gibt es mehrere Möglichkeiten: im (in diesem) Objekt $.ajax-success-Funktion. 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');
        });

    });
})();
```
- Ich bin eigentlich die entfernen-Klasse nach dem Abschluss der ajax-call. Ich Bearbeiten meine Frage, Danke.
- Ich denke, dass ich bin das hinzufügen der "form" durch javascript später auf eine Schaltfläche klicken, kann er Sie nicht finden-senden-Schaltfläche für Manipulationen. Wenn das der Fall ist, haben Sie Anregungen?
- je nach Ihrer version von jQuery, aber ich gehe davon aus, dass mindestens 1,7, da Sie mit .on(), das wird befestigen, um das click-Ereignis, auch wenn ein element Hinzugefügt wird per js nach dem laden der Seite. Sie vielleicht überprüfen Sie Ihren code, um zu sehen, wenn Sie mehr als ein element mit dem #submitButton festgelegt-id. die id-Eigenschaft soll eindeutig sein, was in diesem Fall nicht unbedingt erforderlich, ändern Sie den Wahlschalter auf eine Klasse wie '.selectbutton'
InformationsquelleAutor Zombiesplat
0

Können Sie erreichen dies mit dem folgenden code:
```
var $loading = $('.spinner').hide();
$(document)
  .ajaxStart(function () {
    $loading.show();
  })
  .ajaxStop(function () {
    $loading.hide();
  });
```
- Ich habe es versucht aber es funktioniert nicht.
- Es sollte funktionieren. Haben Sie Fehler gefunden?
InformationsquelleAutor Gangadhar Jannu

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.