Kann/Wie füge ich ein Spinner Animation während des Ajax-Request

Question

Ich bin sehr neu in Jquery und versuchen, herauszufinden, ob ich in der Lage bin ein Spinner hinzuzufügen in Verbindung mit Kaminari

Ich habe Paginierung von 200 zu verwenden, Kontakte mit dem Code unten.

<%= paginate contacts, remote: true, params: { :controller => "contacts", :action => "index" } %>` 

Ich kann sehen, dass ich einige Code wie folgt verwenden müssen:

var $loading = $('#loadingDiv').hide(); 
$(document) 
    .ajaxStart(function() { 
    $loading.show(); 
    }) 
    .ajaxStop(function() { 
    $loading.hide(); 
    }); 

meine Frage wo diese setzen? - am Ende der Seite - in einem js.erb - woanders?

Was muss ich tun, um es mit Kaminari auszulösen?

vielen dank.

Answer 1

Zuerst benötigen Sie einen Wrapper div für Ihre Lade Spinner.

<div class="loadingDiv">your_loading_spinner</div> 

Oben auf Ihrer Seite;

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 

Und am Ende Ihrer Seite;

<script> 
var $loading = $('#loadingDiv').hide(); 
$(document) 
    .ajaxStart(function() { 
    $loading.show(); 
}) 
    .ajaxStop(function() { 
    $loading.hide(); 
}); 
</script> 

Sie können einige Läden Spinner aus loading.io finden.