Le fléau de chargement ne se déclenche pas pendant l'envoi d'un formulaire AJAX.

Question

J'ai un problème lors de la soumission du formulaire avec AJAX. J'utilise blockUI plugin pour bloquer l'interface utilisateur au cours des demandes AJAX et montrer le spinner de chargement avec "S'il vous plaît attendre ..." notification. Cela fonctionne parfaitement avec le type de requêtes UPDATE/INSERT INTO mais pendant SELECT, il n'apparaît même pas.

Au moment où je lié à beforeSend

beforeSend: function() { 
    $.blockUI({ message: '<img src="img/loading.gif"/> <br /> <h1>Please wait...</h1>' }); 
}, 

Je débloque sur le succès et je pense que c'est le problème parce que quand je l'ai vérifié sur le côté serveur, il prend soi-disant 0,0000 secondes pour exécuter cette requête encore Du côté de l'utilisateur, il y a un délai entre la soumission du formulaire et le remplissage de la div avec les résultats.

Y a-t-il un autre événement auquel je pourrais associer l'action de déblocage? J'ai essayé de le lier au document prêt mais puisque le contenu est généré avec AJAX cela ne fonctionne pas.

EDIT le code AJAX est la suivante

$("form#formID").submit(function(event){ 

     event.preventDefault(); 

     var formData = new FormData($(this)[0]); 

     var formURL = 'php/formURL.php'; 

     $.ajax({ 
      url: formURL, 
      type: 'POST', 
      data: formData, 
      async: false, 
      cache: false, 
      contentType: false, 
      processData: false, 
      beforeSend: function() { 
       $.blockUI({ message: '<img src="img/loading.gif"/> <br /> <h1>Please wait...</h1>' }); 
      }, 
      success: function (returndata) { 
       $.unblockUI(); 
       $("#div-result").html(returndata); 
      }, 
      error: function (returndata) { 
       $.unblockUI(); 
       $("#div-result").html(returndata); 
      }, 
     }); 

    return false; 
    }); 

Answer 1

Utilisez ceci: -

$("form#formID").submit(function(event){ 


    $.blockUI({ message: '<img src="img/loading.gif"/> <br /> <h1>Please wait...</h1>' }); 

      event.preventDefault(); 

      var formData = new FormData($(this)[0]); 

      var formURL = 'php/formURL.php'; 

      $.ajax({ 
       url: formURL, 
       type: 'POST', 
       data: formData, 
       async: false, 
       cache: false, 
       contentType: false, 
       processData: false, 
       success: function (returndata) { 
        $.unblockUI(); 
        $("#div-result").html(returndata); 
       }, 
       error: function (returndata) { 
        $.unblockUI(); 
        $("#div-result").html(returndata); 
       }, 
      }); 

     return false; 
     });