Cargando imagen gif mientras jQuery ajax se está ejecutando

Question

Estoy tratando de mostrar una imagen de carga mientras se está ejecutando mi llamada ajax, sin embargo, usar el atributo beforeSend no cambia mi área de resultados.

$.ajax({ 
    url: "/answer_checker.php", 
    global: false, type: "POST", 
    data: ({...clipped...}), 
    cache: false, 
    beforeSend: function() { 
    $('#response').text('Loading...'); 
    }, 
    success: function(html) { 
    $('#response').html(html); 
    } 
} 

Gracias de antemano.

Answer 1

tengo una solución, puede que no sea la mejor manera de hacerlo pero tiene trabajado en este caso.

$('input').keyup(function() { 

    $('#response').text('loading...'); 

    $.ajax({ 
    url: "/answer_checker.php", 
    global: false, type: "POST", 
    data: ({...clipped...}), 
    cache: false, 
    success: function(html) { 
     $('#response').html(html); 
    } 
    }); 
}); 

Al establecer el contenido resonce antes de llamar a la función ajax permanece mostrando el texto de carga hasta que la llamada ajax actualiza el mismo contenido.

Gracias a todos los que se tomaron el tiempo para responder.

Alan

Answer 2

Usted está faltaban una coma después de cache: false

Answer 3

También puede utilizar el siguiente:

$('#tblLoading').ajaxStart(function() { $(this).show(); }); 
$('#tblLoading').ajaxComplete(function() { $(this).hide(); }); 

Answer 4

Tuve un problema similar. Para resolver mi problema, reemplacé .text, en la sección beforeSend, con .html y creé una etiqueta html para insertar en el elemento que contiene mi estado. La función de éxito no reemplazó el contenido creado por la función .text() sino que reemplazó el contenido creado por la función .html().

$.ajax({ 
    url: "/answer_checker.php", 
    global: false, type: "POST", 
    data: ({...clipped...}), 
    cache: false, 
    beforeSend: function() { 
    $('#response').html("<img src='/images/loading.gif' />"); 
    }, 
    success: function(html) { 
    $('#response').html(html); 
    } 
}