提交点击时，Jquery自动加载gif和按钮禁用 [英] Jquery automatic loading gif and button disable on submit click

问题描述

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

Is it possible to automate the showing/hiding of a ajax loading gif, and the disabling/enabling of the submit button at the same time? (when the submit button is a styled < a > not a input type=submit)

目前提交时我这样做：

$("#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>标签）的引用，并自动禁用/启用它？

I've seen a few places talk about how to use .ajaxStart() to automatically show the loading gif, but is it possible to also find a reference to the button (a styled < a > tag) that was clicked, and automatically disable/enable that as well?

这一点是不必每次都手动输入Start / EndAjax，并确保应用程序在任何地方都是一致的。

The point of this is to not have to manually type in Start/EndAjax every time, and to make sure the app is consistent everywhere.

编辑

到目前为止，没有一个答案提供自动化 - 任何解决方案（如我上面的当前一个）你必须在每个$ .ajax之前和之后手动输入start / end （）导致维护问题：很容易忘记将开始/结束放在一些$ .ajax（）调用旁边，如果你想稍后改变它的工作方式，你需要经历每一个来进行更改。

None of the answers so far offer automation - any solution (like my current one above) where you have to manually type start/end before and after every single $.ajax() causes a maintenance problem: Its easy to forget to place the start/end next to some $.ajax() calls, and if you want to change how it works later you need to go through every single one to make the change.

编辑2 - 澄清点.delegate（）建议

EDIT 2 - to clarify point re the .delegate() suggestion

你说你可以附上你的任何元素的事件处理程序 - 但我想将它附加到每个按钮元素（DRY！）：所以我修改了你的建议的第一部分：

You said "You can attach your event handler to any element" - but I want to attach it to every button element (DRY!): so I've modified the 1st part of your suggestion to be:

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

这解决了第一个问题，即如何显示任何按钮的加载.gif，而不是重复输入$（＃ajaxLoad）。show（）到处都有$ .ajax（）调用。

This solves the first problem, which is how to show the loading .gif for any button, without having to repetitively type "$("#ajaxLoad").show()" everywhere there is an $.ajax() call.

下一部分是如何禁用任何单击按钮（再次没有重复代码） - 你建议.delegate（）。但在您的示例中，每次单击按钮都会调用Save（）方法。 （我更改了选择器以匹配我的html）

The next part is how to disable any button when it is clicked (again with no repetitive code) - you suggested .delegate(). But in your example every button click will call the Save() method. (I changed the selector to match my 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）并不总是保存按钮（选择器返回ALL）按钮），它可能是删除按钮或取消按钮等。所以调用$（this）.toggleClass很好，但调用Save（）意味着你正在调用错误的函数。所有这些按钮都有一个.click方法：

The problem with this is that $(this) is not always the save button (the selector returns ALL the buttons), it might be the delete button or the cancel button or etc. So calling $(this).toggleClass is fine, but calling Save() means you are calling the wrong function. All these buttons already have a .click method:

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

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

所以这是需要调用的原始点击函数，它表示$（this）.something以上。在这一点上它应该调用原始点击 - 或者说它应该冒泡到原始的.click更正确。 .delegate必须更通用，原始的.click将提供特定的实现。

So this is the original click function that needs to be called where it says $(this).something above. At this point it should be calling the original click - or perhaps it is more correct to say it should then bubble up to the original .click. The .delegate must be more generic, and the original .click will provide the specific implementation.

推荐答案

它实际上是非常简单：我已将此包含在我的每个页面运行的helper.js文件中：

It actually turned out to be very straightforward: I've included this in my helper.js file that is run for every page:

$(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 loading gif。当ajax呼叫结束时，它们将返回正常状态。每次调用.ajax（）时都会重复输入代码。

Now whenever any of the ajax-y buttons are clicked on any page, the buttons are disabled and the ajax loading gif is shown. When the ajax call ends they are returned to their normal state. And all done with out repetitively typing code every time .ajax() is called.

这篇关于提交点击时，Jquery自动加载gif和按钮禁用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！