Cómo mostrar un ícono animado durante el procesamiento de solicitud Ajax - Rails 3

Question

Estoy tratando de mostrar un indicador de carga para cada solicitud de ajax, estoy trabajando en una aplicación de 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: que he colocado en Assest/javascript/

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

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

Mis application.js se ve así:

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

Se dosent trabajo y no aparece nada. Cualquier ayuda sería apreciada.

Answer 1

que suelen tener este pedazo de código guardado en situaciones como estas:

$(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. 
    }); 
}); 

--- --- EDITAR

Esto no funcionará con las últimas versiones de jQuery. A partir de jQuery 1.8, el método .ajaxStart() solo debe adjuntarse al document. El código, por tanto, debe buscar la manera siguiente:

$(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

El problema estaba en la etiqueta de estilo CSS y la posición css

que lo fijan al hacer esto:

HTML:

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

CSS:

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

Answer 3

Técnicamente no puede usar el mismo "id" dos veces para dos elementos diferentes en el mismo documento. es decir, está asignando id = "indicador de carga" a las etiquetas div e img; esto podría estar causando errores de selección y manipulación de JS DOM.