jquery ajax loader

Question

Je script comme ceci:

$("#addk").bind("click", function(event){ 
     //alert("here!"); 
     $("#loader-overlay").show(); 
     $.ajax({ 
      'async':"False", 
      'type': "POST", 
      'url': "http://url/feedback/", 
      'data': $("#form").serialize(), 
      'success': function(msg){ 
       $("#errors").html(msg); 
       }, 
      'error' : function(){ 
       $("#errors").html('<p>fail</p>'); 
      } 
     }); 
     $("#loader-overlay").hide(); 
     //return false; 
    }); 

Pour une raison quelconque l'écran du chargeur n'apparaît jamais, même si la ajax fonctionne pendant quelques secondes. Si j'écris

$("#loader-overlay").show(); 

dans la console, alors cela fonctionne très bien.

Son probablement quelque chose de très simple que je ne peux pas mettre le doigt sur.

Alan

Answer 1

Vous devriez probablement l'affichage et le masquage du chargement en callbacks dans la demande ajax. Départ: http://api.jquery.com/jQuery.ajax/#callback-functions

Alors, vous pourriez faire:...

$.ajax({..., beforeSend: function(){ /* show the loading thing */ }, 
    complete: function(){ /* hide the loader */ }}); 

Answer 2

Votre code est fondamentalement correct, vous essayez de faire un appel synchrone de sorte que le code après l'appel ajax doit être exécutée que lorsque le retour de l'appel ajax. Mais vous avez une petite erreur là-bas. Essayez ceci:

async: false 

En utilisant "false" équivaut à true car il est une chaîne de longueur non nulle, vous aurez donc un appel asynchrone et le chargeur est cachée immédiatement après l'appel ajax est lancé – il ne sera pas attendre l'appel à finir.

En outre, vous n'avez pas besoin de citer les clés, donc ce style travailleriez aussi:

$.ajax({ 
    async: false, 
    type: "POST", 
    url: "http://url/feedback/", 
    .... 

Mais pourquoi avez-vous besoin même de faire la synchronisation d'appel? Faire un appel synchrone va bloquer tous les autres processus pendant la durée de l'appel, donc cela peut être gênant. Si vous présentez l'élément de chargement avant l'appel ajax, puis le cacher à nouveau dans le gestionnaire success, il devrait fonctionner Allright:

$("#addk").click(function(event) { 
    $("#loader-overlay").show(); 
    $.ajax({ 
     type: 'POST', 
     url: 'http://url/feedback/', 
     data: $("#form").serialize(), 
     success: function(msg){ 
      $("#errors").html(msg); 
      $("#loader-overlay").hide(); 
     }, 
     error: function() { 
      $("#errors").html('<p>fail</p>'); 
     } 
    }); 
    return false; 
});