提交点击时,Jquery自动加载gif和按钮禁用

Question

是否可以自动显示/隐藏ajax加载gif,同时禁用/启用提交按钮？(当提交按钮是样式<a>而不是输入类型=提交时)

目前提交时我这样做:

$("#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()之前和之后手动键入开始/结束导致维护问题:很容易忘记放置开始/结束一些$ .ajax()调用旁边,如果你想稍后改变它的工作方式,你需要通过每一个来进行更改.

编辑2 - 澄清点.delegate()建议

你说"你可以将你的事件处理程序附加到任何元素" - 但我想将它附加到每个按钮元素(DRY!):所以我已经修改了你的建议的第一部分:

$('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)并不总是保存按钮(选择器返回所有按钮),它可能是删除按钮或取消按钮等.所以调用$(this).toggleClass很好,但是调用Save()意味着你正在调用错误的函数.所有这些按钮都有一个.click方法:

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

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

所以这是原始的点击功能,需要调用它所说的$(this).上面的东西.在这一点上它应该调用原始点击 - 或者说它应该冒泡到原始的.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()时重复输入代码完成的.