Tengo lo que parece un problema simple en mi aplicación Rails 3.1:
Tengo una serie de divs con un nombre de clase de "feed-row":
<% @feeds.each do |feed| %>
<div class="feed-row" data-feedid="<%= feed.id %>">
</div>
<div class="clear">
</div>
<% end %>
La idea es esta:
Reuniré todos los divs en una colección, recorreré cada elemento, pasaré su etiqueta de datos a una página que devuelve un fragmento html y luego agregaré ese fragmento al div apropiado.
El javascript que tengo para extraer los datos se ve así:
<script type="text/javascript" charset="utf-8">
$(".feed-row").each(function(){
$.get("/retrieve/" + $(this).attr("data-feedid"), function(d) {
$(this).append(d);
});
});
</script>
Mirando las solicitudes en el inspector de Chrome, puedo ver que la llamada sale bien y devuelve el fragmento HTML que pretendo:
Entonces, con este fragmento HTML, quiero inyectarlo en el corriente fila en mi bucle.
El problema es este
Ninguno de mis fragmentos HTML aparece en mi página; simplemente faltan los datos extraídos a través del método jQuery .get ().
Cuando inspecciono los elementos DOM, parece que no se ha inyectado nada dentro de los elementos:
<div class="feed-row" data-feedid="5"></div>
Estoy seguro de que me falta algo simple aquí: ¿por qué los datos que extraigo a través de jQuery nunca llegan a mis elementos DOM?
Gracias por cualquier ayuda!
Respuestas
3 para la respuesta № 1Porque this en el $.get la devolución de llamada no es lo mismo que en el .each() llamar de vuelta.
$(".feed-row").each(function(){
var self = this;
$.get("/retrieve/" + $(this).attr("data-feedid"), function(d) {
$(self).append(d);
});
});
Lo que hice fue hacer referencia al elemento usando el self variable, luego usó esa variable en el $.get devolución de llamada para hacer referencia al elemento.
Entonces cada iteración de .each() tendrá un único self variable, así como un único $.get devolución de llamada que hace referencia a que el único self variable en su alcance.