jQuery addClass() ne fonctionne pas avant jQuery.ajax()

Question

J'essaie d'avoir un bouton qui onclick va appliquer une classe loading (place le curseur sur "wait") au corps, avant de faire une série de requêtes ajax.

code

est:

$('#addSelected').click(function(){ 
    $('body').addClass('loading'); 

    var products = $(':checkbox[id^=add_]:checked'); 
    products.each(function(){ 
     var prodID = $(this).attr('id').replace('add_', ''); 
     var qty = $('#qty_' + prodID).val(); 
     if($('#prep_' + prodID).val()) 
     { 
      prodID += ':' + $('#prep_' + prodID).val(); 
     } 
     // Have to use .ajax rather than .get so we can use async:false, otherwise 
     // product adds happen in parallel, causing data to be lost. 
     $.ajax({ 
      url: '<?=base_url()?>basket/update/' + prodID + '/' + qty, 
      async: false, 
      beforeSend: function(){ 
       $('body').addClass('loading'); 
      } 
     }); 
    }); 
}); 

J'ai essayé de faire

$('body').addClass('loading'); 

avant les demandes, et comme un rappel beforeSend, mais il n'y a pas de différence.

Dans firebug je peux voir que body n'atteint pas la classe loading jusqu'à ce que les demandes sont terminées.

Des idées? Je n'ai pas ce tri d'une manière que je considère comme propre, mais j'ai trouvé une solution.

Si j'ajoute setTimeout(function(){ ci-dessus var products... et }, 1); en dessous de la fin du bloc products.each, ce morceau est en retard, donc addClass arrive en premier.

Answer 1

Jetez un coup d'œil au .ajaxStart jquery event.

Il ressemblerait à quelque chose comme ça

$('#addSelected').ajaxStart(function() { 
    $('body').addClass('loading'); 
}); 

EDIT: Je pris un coup d'œil à la documentation jquery et a constaté que la mise en async = false verrouille le navigateur d'autres actions. De la documentation jquery:

asyncBoolean Par défaut: true

Par défaut, toutes les demandes sont envoyées asynchrones (à savoir ce paramètre est réglé sur true par défaut). Si vous avez besoin de requêtes synchrones, définissez cette option sur false. Notez que les requêtes synchrones peuvent verrouiller temporairement le navigateur, en désactivant toutes les actions pendant que la demande est active.

Cela peut-il causer le problème? Essayez de vous connecter à la console dans l'événement ajaxStart et voyez s'il se déclenche.

Answer 2

Quelle version de jQuery utilisez-vous? Je fais des fonctionnalités très similaires et mes appels ont toujours lieu avant l'appel ajax. J'utilise la version 1.4.2 de jQuery, alors peut-être que votre problème est une version plus ancienne? En outre, étant donné que vous effectuez une boucle "each()", vous devez absolument appeler addClass avant l'appel .ajax.