Jak wyświetlić animowaną ikonę podczas przetwarzania żądania Ajax - Rails 3

Question

Próbuję wyświetlić wskaźnik ładowania dla każdego żądania ajax, pracuję w aplikacji rails 3.

HTML:

<div id="loading-indicator"> 
<%= image_tag("loading.gif", :id => "loading-indicator", :style => "display:none") %> 
</div> 

CSS:

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

loading.js: które umieszczone w assest/JavaScript/

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

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

Moi application.js wygląda następująco:

//= require jquery 
//= require jquery_ujs 
//= require bootstrap 
//= require_tree . 

To dosent praca, nic nie pokazuje się. Każda pomoc będzie doceniona.

Answer 1

zazwyczaj mam ten fragment kodu zapisanego na sytuacje takie jak:

$(function() { 
    $('#loading-indicator') 
    .hide() // hide it initially. 
    .ajaxStart(function() { 
     $(this).show(); // show on any Ajax event. 
    }) 
    .ajaxStop(function() { 
     $(this).hide(); // hide it when it is done. 
    }); 
}); 

--- EDIT ---

to nie będzie działać z najnowszymi wersjami jQuery. Od wersji jQuery 1.8, metoda .ajaxStart() powinna być dołączana tylko do document. Kod powinien zatem wyglądać następująco:

$(function() { 
    $('#loading-indicator').hide(); // hide it initially. 
    $(document) 
    .ajaxStart(function() { 
     $('#loading-indicator').show(); // show on any Ajax event. 
    }) 
    .ajaxStop(function() { 
     $('#loading-indicator').hide(); // hide it when it is done. 
    }); 
}); 

Answer 2

Problem był w znaczniku style css i pozycji css

to naprawić wykonując to:

HTML:

<div id="loading-indicator"> 
<%= image_tag("loading.gif", :id => "loading-indicator") %> 
</div> 

CSS:

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

Answer 3

Z technicznego punktu widzenia nie można użyć tego samego "identyfikatora" dwukrotnie dla dwóch różnych elementów w tym samym dokumencie. tj. przypisujesz id = "load-indicator" zarówno znacznikom div, jak i img; może to powodować wybór JS DOM i błędy manipulacji.