Chargement de l'image gif pendant que jQuery ajax est en cours d'exécution

Question

J'essaie d'afficher une image de chargement pendant l'exécution de mon appel ajax, mais l'utilisation de l'attribut beforeSend ne change pas ma zone de résultats.

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

Merci d'avance.

Answer 1

J'ai une solution, il ne peut pas être la meilleure façon de le faire, mais il a travaillé dans ce cas.

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

En définissant le contenu de resonce avant d'appeler la fonction ajax il reste montrant le texte de chargement jusqu'à ce que l'appel ajax met à jour le même contenu.

Merci à tous ceux qui ont pris le temps de répondre.

Alan

Answer 2

Vous êtes rataient une bonne virgule après cache: false

Answer 3

Vous pouvez également utiliser les éléments suivants:

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

Answer 4

J'ai eu un problème similaire. Pour résoudre mon problème, j'ai remplacé le .text, dans la section beforeSend, par .html et créé une balise html à insérer dans l'élément qui contient mon statut. La fonction de réussite n'a pas remplacé le contenu créé par la fonction .text(), mais elle a remplacé le contenu créé par la fonction .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); 
    } 
}