Désactiver le bouton pendant la requête AJAX

Question

Désactiver le bouton pendant la requête AJAX

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 désactivé.

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

26

ajax jquery jquery-ui

demandé sur Angelo C. IGITEGO 2011-01-07 07:23:23

5 réponses

score 35 · Answer 1

Mettez $("#ajaxStart").attr("disabled", false); dans la fonction de réussite:

$("#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 le chargement des données... Actuellement, vous désactivez et activez le bouton dans la même fonction de clic, à savoir en même temps.

score 5 · Answer 2

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

Vous devez l'activer dans l'achèvement de L'appel AJAX

Quelque chose comme ça

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

score 3 · 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 la couche est blanche et complètement opaque, c'est que sinon, IE vous permet de cliquer dessus.

Quand je fais mon ajax, j'aime ceci:

$("#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'          
   });      
});

score 2 · 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 de lien.

score 1 · Answer 5

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

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

Complet (XMLHttpRequest, textStatus)

Une fonction à être appelé lorsque la requête se termine (après le succès et les rappels d'erreur sont exécuter). La fonction est passée deux arguments: le XMLHttpRequest objet et une chaîne catégorisant le état de la demande (la"réussite", "notmodified", "erreur", "délai d'attente", ou "parsererror"). Ceci est un événement Ajax.

Las etiquetas más populares

Désactiver le bouton pendant la requête AJAX

5 réponses