trying to show a spinner whenever a link with remote true is being clicked, tried both ways using turbolinks:events and ajaxStart/ajaxStop events. turboinks:load event is successfully fired, but :click isn't. both ajaxStart and ajaxStop do not work.
Using rails 6, turbolinks 5, webpacker. links are being generated in a very normal way example:
<%=link_to 'Documents', documents_path, remote: true %>
this code is placed in <head> </head> of application.html.erb
<script type="text/javascript">
$(document).on("turbolinks:load", function(){
alert('turbolinks load works');
//$(".sk-cube-grid").hide();
});
$(document).on("turbolinks:click", function(){
alert('this doesnt work');
//$(".sk-cube-grid").show();
});
</script>
code using ajaxStart/ajaxStop alternatively placed also in application.html.erb
$(document).ajaxStart(function(){
alert('started ajax - doesnt work');
});
$(document).ajaxStop(function(){
alert('stopped ajax - doesnt work');
})
EDIT
changed the event handling to the following:
var page_loaded = function() {
$(".sk-cube-grid").hide();
};
$(document).on("read page:load", page_loaded);
$(document).on("ajax:send", "a", function(xhr){
$('.sk-cube-grid ').show()
}).on("ajax:complete", "a", function(data, status, xhr) {
$(".sk-cube-grid").hide();
});
This code shows() the .sk-cube-grid when ajax:starts but not hidden when :complete nor when :success.
Setting the
remote: trueoption tells Rails to use UJS (unobtrusive javascript) to handle the ajax. This is not handled by Turbolinks so the Turbolinks event you are listening to isn't fired. You have two options: use UJS as you are but listen to the correct event:ajax:successor remove theremote: trueand let Turbolinks handle it (and listen toturbolinks:loadas you are doing now)