0

I am very new to jquery and trying to figure out if I am able to add a spinner to use in conjunction with Kaminari

I have pagination of 200 Contacts with code below.

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

I can see that I need to use some code like this: 

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

my question is where do put this? - at the bottom of the the page - in a js.erb - somewhere else?

what do i need to do to get it to trigger with Kaminari?

many thanks.

Rob
  • 14,746
  • 28
  • 47
  • 65
user2970050
  • 307
  • 2
  • 16

1 Answers1

0

First of all you need a wrapper div for your loading spinner. 

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

At top of your page;

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

And at the end of your page;

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

You can find some loading spinners from loading.io.

Emre Bolat
  • 4,316
  • 5
  • 29
  • 32