代码之家 › 专栏 › 技术社区 › JK.

Jquery自动加载gif并在提交时单击禁用按钮

jquery javascript

JK. · 技术社区 · 14 年前

当前提交时,我执行以下操作:

$("#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()之前和之后手动键入start/end,这会导致维护问题:很容易忘记将start/end放在一些$.ajax()调用旁边,如果你想在以后改变它的工作方式,你需要仔细检查每一项来做出改变。

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

任何 每一个

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

这解决了第一个问题,即如何显示任何按钮的loading.gif,而不必在$.ajax()调用的任何地方重复键入“$(“#ajaxLoad”).show()”。

下一部分是如何在单击任何按钮时禁用它(同样没有重复代码)-您建议的.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
});

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

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

这是最初的click函数,需要在上面写$(this)的地方调用。在这一点上,它应该调用原始的click,或者说它应该跳转到原始的click更正确。.delegate必须更通用,而原始的.click将提供具体的实现。

3 回复 | 直到 14 年前

JK. 14 年前

事实证明,这非常简单:我在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()都不需要重复输入代码。

Phil.Wheeler 14 年前

您可以将事件处理程序附加到任何元素;因此,对于“保存”按钮:

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

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

这个 $.delegate() 函数侦听每个没有 .ui-state-disabled 班级。当触发事件时,它会将该按钮的类切换为disabled,调用Save函数并触发$.ajaxStart()事件。该事件将显示您的动画ajaxgif。

对于本例,我假设您的按钮都包含在一个div中。您需要修改代码以便 $('div').delegate... 实际指定按钮的包含元素。我还假设您使用的是jquery1.4.2。

你应该能够使用 $.ajaxStop() 函数以再次还原所有内容。

Alec 14 年前

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