Lade gif auf link_to mit ajax rails 3.2

Question

Ich habe eine link_to, die langsam aufgrund der Analyse einer Menge von JSON-Daten in der Show rendert. Ich habe Probleme, ein Lade-GIF auf der Indexseite zu implementieren, während die Zielseite geladen ist. Es zeigt das Ladesymbol an, geht aber nicht auf die Show-Seite und beendet die Animation.

CSS

#loading-indicator { 
    position: absolute; 
    left: 10px; 
    top: 10px; 
} 

Index Ansicht

<img src="/images/loading.gif" id="loading-indicator" style="display:none" /> 
<% @list.each do |l| %> 
<%= link_to l.name, list_path(l), :remote => true %> 
<% end %> 

Skript

<script> 
$(document).ajaxSend(function(event, request, settings) { 
    $('#loading-indicator').show(); 
}); 

$(document).ajaxComplete(function(event, request, settings) { 
    $('#loading-indicator').hide(); 
}); 
</script> 

Answer 1

in Ihrem gemfile

gem 'blockuijs-rails', :git => 'https://github.com/BoTreeConsultingTeam/blockuijs-rails.git' 

in Ihrem js

applyLoader: function() { 
    $.blockUI({message: '<img src="/ring-alt.svg" width="75px" />', 
     css: { 
     border: 'none', 
     padding: '15px', 
     backgroundColor: 'transparent', 
     '-webkit-border-radius': '10px', 
     '-moz-border-radius': '10px', 
     opacity: .5, 
     color: '#fff' 
    }}); 
    }, 
    ajaxLoader: function() { 
    $(document).ajaxStart(function() { 
     applyLoader(); 
    }).ajaxStop(function() { 
     $.unblockUI(); 
    }); 
    },