Désactiver le bouton lorsque AJAX Request

Question

J'essaie de désactiver un bouton après avoir cliqué. J'ai essayé:

$("#ajaxStart").click(function() {
    $("#ajaxStart").attr("disabled", true);
    $.ajax({
      url: 'http://localhost:8080/jQueryTest/test.json',
      data: {
        action: 'viewRekonInfo'
      },
      type: 'post',
      success: function(response){
        //success process here                             
        $("#alertContainer").delay(1000).fadeOut(800);
       },
      error: errorhandler,
      dataType: 'json'
    });    
    $("#ajaxStart").attr("disabled", false);
});

mais le bouton n'est pas désactivé. Lorsque je supprime $("#ajaxStart").attr("disabled", false); le bouton est désactivé.

Bien que cela ne fonctionne pas comme prévu, je pense que la séquence de code est correcte. Toute aide serait appréciée.

Answer 1

Mettez $("#ajaxStart").attr("disabled", false); dans la fonction success:

$("#ajaxStart").click(function() {
    $("#ajaxStart").attr("disabled", true);
    $.ajax({
        url: 'http://localhost:8080/jQueryTest/test.json',
        data: { 
            action: 'viewRekonInfo'
        },
        type: 'post',
        success: function(response){
            //success process here
            $("#alertContainer").delay(1000).fadeOut(800);

            $("#ajaxStart").attr("disabled", false);
        },
        error: errorhandler,
        dataType: 'json'
    });
});

Cela garantira que disable est défini sur false après les données ont été chargées ... Actuellement, vous désactivez et activez le bouton dans la même fonction de clic, c'est-à-dire en même temps.

Answer 2

Dans votre code, il vous suffit de désactiver et d'activer le bouton sur le même clic de bouton ,.

Vous devez l'activer à la fin de AJAX call

quelque chose comme ça

           success: function(response){
                    $("#ajaxStart").attr("disabled", false); 
                       //success process here
                       $("#alertContainer").delay(1000).fadeOut(800);
                   },

Answer 3

J'ai résolu cela en définissant deux fonctions jquery:

var showDisableLayer = function() {
  $('<div id="loading" style="position:fixed; z-index: 2147483647; top:0; left:0; background-color: white; opacity:0.0;filter:alpha(opacity=0);"></div>').appendTo(document.body);
  $("#loading").height($(document).height());
  $("#loading").width($(document).width());
};

var hideDisableLayer = function() {
    $("#loading").remove();
};

La première fonction crée un calque au-dessus de tout. La raison pour laquelle le calque est blanc et complètement opaque, c'est que sinon, IE vous permet de cliquer dessus.

Quand je fais mon ajax, j'aime ça:

$("#ajaxStart").click(function() {          
   showDisableLayer(); // Show the layer of glass.
   $.ajax({              
      url: 'http://localhost:8080/jQueryTest/test.json',              
      data: {                   
          action: 'viewRekonInfo'              
      }, 
      type: 'post',              
      success: function(response){                  
         //success process here                  
         $("#alertContainer").delay(1000).fadeOut(800);                                     
         hideDisableLayer(); // Hides the layer of glass.
      },
      error: errorhandler,              
      dataType: 'json'          
   });      
}); 

Answer 4

J'ai résolu cela en utilisant la fonction globale d'ajax

            $(document).ajaxStart(function () {
            $("#btnSubmit").attr("disabled", true);
        });
        $(document).ajaxComplete(function () {
            $("#btnSubmit").attr("disabled", false);
        });

voici la documentation lien .

Answer 5

L'appel $.ajax() "ne bloquera pas" - cela signifie qu'il reviendra immédiatement, puis vous activez le bouton immédiatement, de sorte que le bouton n'est pas désactivé.

Vous pouvez activer le bouton lorsque AJAX réussit, a une erreur ou est terminé, en utilisant complete: http://api.jquery.com /jQuery.ajax/

complete (XMLHttpRequest, textStatus)

Une fonction à appeler à la fin de la demande (après l'exécution des rappels de réussite et d'erreur). La fonction obtient deux arguments: l'objet XMLHttpRequest et une chaîne catégorisant l'état de la demande ("succès", "non modifié", "erreur", "délai d'attente" ou "analyseur syntaxique"). Il s'agit d'un événement Ajax.