jquery自動加載gif和按鈕禁用提交點擊

Question

是否有可能自動顯示/隱藏ajax加載gif，並同時禁用/啓用提交按鈕？

$("#save_button_id").click(function() { 
     if ($('#save_button_id').hasClass('ui-state-disabled')) return false; 
     Save(); 
}); 

function Save() { 
StartAjax($("#save_button_id")); 
$.ajax({ 
     success: function (data) { 
      EndAjax($("#save_button_id")); 
      // etc... 
     }, 
     error: function (xhr, status, error) { 
      EndAjax($("#save_button_id")); 
      // etc ... 
     } 
}); 
} 

function StartAjax(button) { 
    DisableButtonClick(button); 
    $("#ajaxLoad").show(); 
} 

function EndAjax(button) { 
    EnableButtonClick(button); 
    $("#ajaxLoad").hide(); 
} 

我見過幾個地方說說如何使用.ajaxStart：提交時，我這樣做（當提交按鈕是一個風格<一>不是輸入類型=提交）

目前（）自動顯示加載gif，但是是否也可以找到對被點擊的按鈕（樣式爲< a>標籤）的引用，並自動禁用/啓用它？

這樣做的關鍵在於不必每次都手動輸入Start/EndAjax，並確保應用程序在任何地方都一致。

編輯

無答案爲止提供自動化的 - 任何解決方案（如我上面的電流之一），你必須之前和之後的每一個$就（手動輸入開始/結束）導致維修問題：它很容易忘記將開始/結束放在一些$ .ajax（）調用旁邊，如果您想稍後改變它的工作方式，則需要通過每一個來完成更改。

EDIT 2 - 澄清地點Re .delegate（）建議

你說：「你可以將你的事件處理程序任何元素」 - 但我想它附加到每按鈕元素（ DRY）：所以我已經修改了你的建議的第1部分是：

$('div#buttons a.ui-icon').each(function(index) { 
    $(this).ajaxStart(function() { 
     $("#ajaxLoad").show(); 
    }); 
}); 

這解決了第一個問題，那就是如何顯示加載.gif注意任何按鍵，而無需重複輸入「 $（「＃ajaxLoad」）。show（）「無處不存在$ .ajax（）調用。

下一部分是如何禁用任何按鈕，當它被點擊（再次沒有重複的代碼） - 你建議.delegate（）。但在你的例子中，每個按鈕點擊都會調用Save（）方法。 （我改變了選擇，以配合我的HTML）

$('div#buttons a.ui-icon').delegate('button:not(.ui-state-disabled)', 'click', function() { 
    $(this).toggleClass('ui-state-disabled'); 
    Save(); // this line needs replacing with a call to $(this).something 
}); 

的問題，這是$（本）並不總是保存按鈕（選擇返回所有的按鈕），這可能是刪除按鈕或取消按鈕等等。所以調用$（this）.toggleClass很好，但是調用Save（）意味着你調用了錯誤的函數。所有這些按鈕已經有了。點擊方法：

$("#SaveButton").click(function() { 
    Save(); 
}); 

$("#DeleteButton").click(function() { 
    Delete(); 
}); 

因此，這是一個需要被稱爲原始點擊功能，它說：$（本）以上.something。在這一點上，它應該叫做原始點擊 - 或者說更準確的說它應該會泡到最初的.click。 .delegate必須更通用，原始的.click將提供具體的實現。

Answer 1

它實際上被證明是非常簡單的：我包括這在我的helper.js文件時運行的每一頁：

$(document).ready(function() { 
    $('div#buttons a.fm-button').each(function (index) { 
     $(this).ajaxStart(function() { 
      $("#ajaxLoad").show(); 
      DisableButtonClick($(this)); 
     }); 
     $(this).ajaxStop(function() { 
      $("#ajaxLoad").hide(); 
      EnableButtonClick($(this)); 
     }); 
    }); 
}); 

現在，只要任何一個AJAX-Y按鈕被點擊任何頁面，按鈕被禁用，並顯示ajax加載gif。當ajax通話結束時，它們返回到正常狀態。並且每次都重複輸入代碼完成.ajax（）被調用。

Answer 2

$("#save_button_id").click(function() { 
    if ($('#save_button_id').hasClass('ui-state-disabled')) { 
    return false; 
    } else { 
    // add disabled class 
    $('#save_button_id').addClass('ui-state-disabled'); 

    // optionally disable the button if it's an input button 
    $('#save_button_id').attr('disabled','disabled'); 

    // show ajax loader 
    $("#ajaxLoad").show(); 

    $.ajax({ 
     url: 'ajax/stuff.html', 
     success: function(data) { 
     // do stuff 

     // re-enable button 
     $('#save_button_id').removeClass('ui-state-disabled'); 

     // optionally re-enable the button if it's an input button 
     $('#save_button_id').attr('disabled',''); 

     // hide ajax loader 
     $("#ajaxLoad").hide(); 
     }, 
     error: function (xhr, status, error) { 
     // do stuff 

     // re-enable button 
     $('#save_button_id').removeClass('ui-state-disabled'); 

     // optionally re-enable the button if it's an input button 
     $('#save_button_id').attr('disabled',''); 

     // hide ajax loader 
     $("#ajaxLoad").hide(); 
     }); 
    } 

    // prevent default action, if any 
    return false; 
});

編輯：並把那些在功能：

function processing(status) { 
    if (status == 1) { 
    // add disabled class 
    $('#save_button_id').addClass('ui-state-disabled'); 

    // optionally disable the button if it's an input button 
    $('#save_button_id').attr('disabled','disabled'); 

    // show ajax loader 
    $("#ajaxLoad").show(); 
    } else { 
    // re-enable button 
    $('#save_button_id').removeClass('ui-state-disabled'); 

    // optionally re-enable the button if it's an input button 
    $('#save_button_id').attr('disabled',''); 

    // hide ajax loader 
    $("#ajaxLoad").hide(); 
    } 
}

，然後在該函數調用：

$("#save_button_id").click(function() { 
    if ($('#save_button_id').hasClass('ui-state-disabled')) { 
    return false; 
    } else { 
    processing(1); 

    $.ajax({ 
     url: 'ajax/stuff.html', 
     success: function(data) { 
     // do stuff 

     processing(0); 
     }, 
     error: function (xhr, status, error) { 
     // do stuff 

     processing(0); 
     }); 
    } 

    // prevent default action, if any 
    return false; 
});

Answer 3

您可以將您的事件處理程序的任何元素;所以對於您的保存按鈕：

$(this).ajaxStart(function() { 
    $("#ajaxLoad").show(); 
}); 

現在，你可以聽你的頁面上的每個按鈕的Click事件，並從該元素調用Ajax的功能：

$('div').delegate('button:not(.ui-state-disabled)', 'click', function() { 
    $(this).toggleClass('ui-state-disabled'); 
    Save(); 
}); 

的$.delegate()功能監聽點擊每個元素沒有.ui-state-disabled類的事件。當事件被觸發時，它會將該按鈕的類切換到禁用狀態，調用Save函數並觸發$ .ajaxStart（）事件。該事件將顯示您的動畫ajax gif。

我假設你的按鈕都包含在一個div爲例。你很多人想修改代碼，以便實際指定你的按鈕的包含元素。我也假設你正在使用jQuery 1.4.2。

你應該可以使用$.ajaxStop()函數將所有東西都恢復回來。