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()函数将所有东西都恢复回来。