Create a loader with css and js included in partial - ruby-on-rails

Question

I am trying to show a animation when a page is loaded trough ajax with turbolinks.
I created a partial _loader.html.erb and added the code.
The js doesn't seem to fire on ajaxStart or ajaxStop.
I have also tried to wrap the js in $function and $(document) but cant get it to work.
What am I doing wrong?
<script>
// hide it first
$(".loading-indicator").hide();
alert("hide at first")
// when an ajax request starts, show spinner
$.ajaxStart(function(){
$(".loading-indicator").show();
alert("start")
});
// when an ajax request complets, hide spinner
$.ajaxStop(function(){
$(".loading-indicator").hide();
alert("stop")
});
</script>
<%= image_tag("loading.gif", :class => "loading-indicator", :style => "") %>
<style>
.loading-indicator {
}
</style>

Answer 1

Through ajaxStart() and ajaxStop() you're just registering handlers that get called when the first ajax request starts and all ajax requests are completed. You never do an ajax request, so they never get called. Use .ajax() to do the actual request.
You could also use the complete callback to hide your loading animation:
function request() {
$(".loading-indicator").show();
$.ajax({
...
complete: function() { $(".loading-indicator").hide(); }
});
}