jQuery meilleur moyen de bloquer tout autre processus en attendant l'achèvement Ajax

Question

Il est jQuery.

J'ai un formulaire d'inscription. Dans le champ textbox du domaine, les gens remplissent le domaine, puis onblur Ajax appel à l'API registar pour validation sur la disponibilité du domaine.

La validation peut prendre jusqu'à 15 secondes en fonction de la vitesse du réseau.

Dans cette période d'attente, si l'utilisateur va cliquer sur le bouton Soumettre, comment bloquer?

Mon idée est simple: Avant que tout appel Ajax ne finisse le chargement, je ne veux pas permettre aux gens de cliquer sur Envoyer.

Je peux penser à un moyen, mais je ne suis pas sûr que ce soit un bon moyen. J'ai besoin de conseils.

beforeSend: function(){ 
    $("#btnSubmit").attr("disabled", "disabled"); 
}, 

complete: function(){ 
    $("#btnSubmit").attr("disabled", ""); 
} 

<input type="button" name="btnSubmit" id="btnSubmit" value="my button" /> 

Answer 1

La définition de async à false peut fonctionner mais cela peut bloquer complètement le navigateur pendant 15 secondes. Votre meilleur pari est de désactiver le soumettre élément et empêcher le soumettre à d'autres façons d'utiliser une variable où vous stockez si la validation est en cours:

var validating = false; 

$(function() { 

    $('form').submit(function() { 
     if(validating) return false; 
     var button = $(this).find('input:submit, input:button'); 

     button.attr('disabled', 'disabled'); 
     validating = true; 

     $.ajax({ 
      url: 'validator.php', 
      data: $(this).serialize(), 
      success: function() { 
       validating = false; 
       button.removeAttr('disabled'); 
      } 
     }); 
    }); 
}); 

De cette façon, l'utilisateur ne peut pas soumettre le formulaire dans tout autre moyen. Si vous ne désactivez que le bouton "Envoyer", il est possible de soumettre le formulaire avec la touche Entrée (pas sûr). L'utilisation d'une variable qui indique si la validation est en cours est un moyen sûr d'empêcher les soumissions accidentelles.

Answer 2

Peu importe comment vous le faites à la fin, assurez-vous d'afficher un indicateur de progression pendant votre validation.

Si l'utilisateur remplit tous les éléments de formulaire et ne peut pas appuyer sur le bouton submit par la suite (car le processus de validation est toujours en cours), il devient très confus.

15 secondes est une longue période, assurez-vous que l'utilisateur sait ce qui se passe.

Answer 3

Quoi que vous fassiez ne pas utilisez async: false sur vos appels AJAX, en particulier parce que votre demande est si longue durée (15 secondes). Il désactive tous les Javascript jusqu'à la fin de l'appel AJAX.

Votre façon de le faire est bien. Vous pouvez le généraliser en utilisant le global AJAX event handlers de jQuery. Donnez à chaque contrôle d'entrée correspondant d'une classe de marqueur approprié comme « ajax »:

<input type="button" class="ajax" value="Register Domain"> 

avec:

$(document).ajaxStart(function() { 
    $(".ajax").attr("disabled", true); 
}).ajaxComplete(function() { 
    $(".ajax").removeAttr("disabled"); 
}); 

Alors ce que vous faites ici est à l'écoute des événements mondiaux AJAX et pendant qu'ils sont en cours vous Désactivez tous les contrôles que vous ne souhaitez pas cliquer lorsque l'appel AJAX est en cours.

Answer 4

J'ai moi-même vécu cette situation. Mon approche ouvrait une petite fenêtre modale avec un GIF wainting et un texte explicatif.

Lorsque l'appel Ajax se termine, je ferme la fenêtre modale.

J'espère que ça aide.

Answer 5

bouton d'entrée:

 
<input typ="submit" value="Register" onsubmit="return ajaxCheck();" /> 

Code Js:

 
var onAjax = false; 
function ajaxCheck(){ 
    if(onAjax) 
    return false; 
    else 
    return true; 
} 


$("element").onblur(function(){ 
    onAjax = true; 
    //whatever you need to do here 
    $.ajax({ 
    //standard params 
    success: function(){ 
     onAjax = false; 
    }, 
    failure: function(){ 
     onAjax = false; 
    } 
    }); 
}); 

Answer 6

Jetez un oeil à BlockUi.

Il est très facile à mettre en œuvre. Vous pouvez bloquer des éléments, ou même toute la page avec un message de type traitement, afin que l'utilisateur sache que quelque chose se passe. Ensuite, il vous suffit de le débloquer sur votre appel ajax terminé.

Un exemple comme je l'ai utilisé

$('#elementtobloack').block({ 
     centerY: 0, 
     message: 'Some useful message'  
    }); 

$.ajax(
      { 
       type: "POST", 
       url: "...", 
       data: "{}", 
       contentType: "application/json;charset=utf-8", 
       dataType: "json", 
       success: function(msg) { 
        //do something 
        //unblock your element 
        $('#elementtoblock').unblock(); 
       }, 
       error: function(msg) { 
        //do something on error -- alert(msg.responseText); 
        //unblock on failure as well or the element will remain blocked 
        $('#elementtobloak').unblock(); 
       } 
      });