web-dev-qa-db-ja.com

AJAXリクエスト中にボタンを無効にする

ボタンをクリックした後、ボタンを無効にしようとしています。私が試してみました：

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

しかし、ボタンは無効になっていません。 $("#ajaxStart").attr("disabled", false);を削除すると、ボタンが無効になります。

これは期待どおりに機能しませんが、コードシーケンスは正しいと思います。任意の助けをいただければ幸いです。

ajaxjquery-uijquery
29
Adi Sembiring

$("#ajaxStart").attr("disabled", false);を成功関数内に配置します。

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

これにより、無効化がfalseに設定されますafterデータがロードされました...現在、同じクリック機能で、つまり同時にボタンを無効化および有効化しています。

37
Damien-Wright

コードでは、同じボタンクリックでボタンを無効化/有効化するだけです。

AJAX呼び出しの完了時に有効にする必要があります

このようなもの

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

2つの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();
};

最初の関数は、すべての上にレイヤーを作成します。レイヤーが白で完全に不透明である理由は、そうでない場合、IEでクリックスルーできるためです。

私のajaxをやっているとき、私はこれが好きです：

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

私はajaxのグローバル機能を使用してこれを解決しました

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

ここにドキュメントがあります link 。

2
صفي

$.ajax()呼び出しは「ブロックしません」-つまりすぐに戻り、すぐにボタンを有効にするため、ボタンは無効になりません。

completeを使用して、AJAXが成功した場合、エラーが発生した場合、または終了した場合にボタンを有効にできます。 http://api.jquery.com /jQuery.ajax/

complete（XMLHttpRequest、textStatus）

要求が完了したときに呼び出される関数（成功およびエラーコールバックが実行された後）。この関数には2つの引数が渡されます。XMLHttpRequestオブジェクトと、リクエストのステータスを分類する文字列（ "success"、 "notmodified"、 "error"、 "timeout"、または "parsererror"）。これはAjaxイベントです。

1
太極者無極而生