[JQUERY] No sabe el valor de la variable si no la utilizo en un alert

[sumolari]

Hola a todos.

Veréis, estoy haciendo un pequeño script para cargar con AJAX la imagen que corresponde a un elemento de un sortable. Ya está todo listo y funciona correctamente todo menos la parte que muestra la imagen.

Código Javascript:

jQuery(function($){
        
        var temp_order = '';
        var temp_pre_response = new Array();
        
        $("#items_in_carousel .item").each(function (index) {
            $("input#order", this).val(index);
            temp_order = 'action=getItemThumbnail&item_id=' + $("#category_id", this).val() + '&item_type=' + $("input#type", this).val();
            $.post($("#current_url_get_js").attr("href"), temp_order, function(theTempResponse){
                temp_pre_response = theTempResponse.split('<p style="display:none;"></p>');
            });
            alert(temp_pre_response[1]); /* OJO A ESTE ALERT, MÁS ADELANTE EXPLICO POR QUÉ LO PONGO */
            $(".item_thumbnail", this).css("background-image", "url(" + temp_pre_response[1] + ")");
        });
        
    });
 

El funcionamiento es el siguiente: Se recorren todos los elementos del sortable y se carga vía AJAX una página que devuelve siempre la cadena "<p style="display:none;"></p>" seguida de la URL de la imagen. Tras cargar la página, divido la cadena en dos a partir de "<p style="display:none;"></p>", de modo que la primera parte no tiene nada y la segunda debería de tener la URL de la imagen.

La página siempre devuelve algo después de la cadena. Si no encuentra una imagen para el elemento, devuelve la URL a la imagen que tenía el div antes (una imgen con un pequeño degradado, pero eso da igual).

El problema es que cada vez que pruebo tengo el mismo error: la primera iteración del bucle siempre devuelve "undefined" como URL de imagen, y no entiendo por qué, porque siempre debería haber algo. Además sólo pasa con la primera iteración, las siguientes funcionan correctamente.

Además hay otro problema y es que si no pongo el alert que hay en la función (tiene un comentario al lado, así que lo distinguiréis fácilmente), la imagen no se carga. De hecho lo que hace es eliminar la imagen de fondo y dejar tan sólo el color de fondo que hay en el CSS (en el CSS se define como imagen de fondo la imagen que he comentado antes del degradado, así que si no se hubiera encontrado ninguna imagen, debería cargarse la imagen de fondo con el degradado, no eliminarse el fondo).

Tengo la impresión de que lo que hace es reemplazar la URL de la imagen de fondo por "undefined", de ahí que no haya imagen de fondo, sin embargo no sé dónde está el fallo.

Tampoco sé demasiado de Javascript. He intentado detectar si la variable tenía de valor undefined para evitar usar la variable en ese caso, pero no he conseguido hacerlo. Además, aunque deje el alert, la primera iteración no funciona en ninguna ocasión, así que tampoco soluciona el problema.

¿Se os ocurre alguna cosa?

Gracias por todo.

Edito: Estoy trasteando un poco más y y cambio el alert por alert('A') (por ejemplo), se muestran las imágenes correctamente, sin embargo, si elimino el alert, no se muestra ninguna. Además es curioso que a pesar de que en la primera iteración devuelve undefined, la imagen se carga correctamente (la imagen se carga en la siguiente línea, y podéis comprobar que se trata de la misma variable).

Edito 2: Todo lo que he comentado antes me sucede en Firefox, al probar en Chrome todos los elementos devuelven undefined (en Firefox a partir del segundo elemento los valores eran correctos, y las imágenes se mostraban bien) y las imágenes nunca se muestran.

[David]

Porque el cambio en el estilo debería estar dentro de la función callback:

Código Javascript:

$.post($("#current_url_get_js").attr("href"), temp_order, function(theTempResponse){
    temp_pre_response = theTempResponse.split('<p style="display:none;"></p>');
    $(".item_thumbnail", this).css("background-image", "url(" + temp_pre_response[1] + ")");
});
 

[sumolari]

¡Gracias! Con esto siempre recibo la URL correcta, sin embargo no consigo aplicar el cambio en el CSS.

Parece que dentro de la función this no apunta al elemento actual del bucle. Supongo que debe de haber algún modo de clonar el valor de this antes de ejecutar la función y cargar el valor de esta variable dentro de la función, pero realmente soy un novato en Javascript, así que no tengo ni idea de cómo hacerlo.

¿Podríais hecharme una manita? ¿Se os ocurre algún método mejor que el que se me ha ocurrido?

[David]

Puedes asignarlo a una variable:

Código Javascript:

var variable = this;
 

Y luego usar esa variable dentro de la función callback.

[sumolari]

Había probado antes a hacer algo similar sólo que definiendo la variable fuera del bucle y asignándole el valor dentro del bucle, lo cual no funciona. Sin embargo lo que comentas va perfectamente.

¡¡Muchas gracias!! Seguramente el problema era una estupidez pero estaba totalmente atascado.