Tener que pulsar dos veces para recibir datos AJAX jquery

[cluster28]

Hola,

Tengo esta función que funciona bien, sólo que debo pulsar dos veces sobre el botón para que cargue rellene el DIV con los datos recuperados.

También como el evento se dispara con los botones de clase "boton_ajax", si pulsas en uno y luego en otro sale el resultado del primer botón.

Alguién sabe por qué?

Código HTML:

<div class="busqueda_videos">
<table class="tabla_edicion">
<tr>
<td>Buscar mismo en <input class="boton_ajax" type="submit" value="Youtube" name="6"></input></td>
<td><input class="boton_ajax" type="submit" value="Mostrar" name="6"></input> discotecas vinculadas</td>
</tr>
</table>
</div>
					
<div class="resultado_busqueda_videos"></div> 

Código PHP:

  //Si pulsamos un botón que cargue datos con AJAX y el script cargarDatos.php
    $(".boton_ajax").click(function(e){
        $.ajax({
            type: "POST",
            url: "cargarDatos.php",
            data: "tipo="+$(this).attr("value")+"&id="+$(this).attr("name"),
            success: function(datos){
                resultado = datos;
            }
        });
        $("[name="+$(this).attr("name")+"] > .resultado_busqueda_videos").html(resultado);
        $("[name="+$(this).attr("name")+"] > .resultado_busqueda_videos").css("border", "3px solid #232651");
    }); 
   

[Dany_s]

pasa que la primera vez la variable "resultado" no va a estar definida porque la llamada ajax es asíncrona entonces no espera a recibir respuesta y continua, al llegar a la variable "resultado" no va a tener nada, si te fijas en la consola de firefox vas a ver

lo que tenes que haces es mostrar los resultados en la funcion de callback

Código Javascript:

success: function(datos){
     resultado = datos;
     $("[name="+$(this).attr("name")+"] > .resultado_busqueda_videos").html(resultado);
     $("[name="+$(this).attr("name")+"] > .resultado_busqueda_videos").css("border", "3px solid #232651");
 
            }
 

en vez de asignar datos a resultados usa la variable datos nomas

[cluster28]

Ya intenté ponerlo de esa manera pero dentro de esa función "[name="+$(this).attr("name")+"] > .resultado_busqueda_videos" está indefinida. Cómo que no se ha pasado a la función su valor.

Si añadimos un alert:

Código PHP:

  resultado = datos;
$("[name="+$(this).attr("name")+"] > .resultado_busqueda_videos").html(resultado);
$("[name="+$(this).attr("name")+"] > .resultado_busqueda_videos").css("border", "3px solid #232651");
alert("[name="+$(this).attr("name")+"] > .resultado_busqueda_videos"); 
   

El resultado es "[name=undefined] > .resultado_busqueda_videos".

A lo mejor se podría pasar el valor o la referencia del objeto pulsado, no?

[Dany_s]

claro, guardalo antes de ajax
el = $("[name="+$(this).attr("name")+"] > .resultado_busqueda_videos");

y despues hace

el.html(datos);

[cluster28]

Así funciona bien.

Muchas gracias.