UJS + Bootstrap 按钮加载

Question

我正在使用带有 Rails Unobtrusive JavaScript 的 Twitter Bootstrap 的按钮加载状态 http://twitter.github.com/bootstrap/javascript.html#buttons

表单元素使用data-remote="true" 选项并返回一个.js 文件。 提交按钮调用.button("loading")，使用如下JS：

$(document).on("click", ".btn-loading", function() {
  var btn;
  btn = $(this);
  btn.button("loading");
});

有没有办法检测 Ajax 成功和错误条件并重置按钮状态？

我尝试执行类似下面的操作，但在触发此功能后，我无法弄清楚如何访问处于活动状态的.btn-loading 元素

$(document).on("ajax:success", function(evt, data, status, xhr) {
  var btn;
  btn = $(this);  //how to access .btn-loading() that's active?
  btn.button("reset");
  btn.button("toggle");
});

关于如何在 ajax 请求后重置按钮有什么建议吗？

另外，如何检测 HTML5 错误并重置按钮状态？

更新：2012 年 8 月 14 日

我发现你可以通过以下方式监听事件并触发按钮：

$(document).on("ajax:success", "form[data-remote]", function(evt, data, status, xhr) {
  var el;
  el = $(this).find('.btn-loading');
  el.button("reset");
  el.button("toggle");
});

查看此维基：https://github.com/rails/jquery-ujs/wiki/ajax

但是，错误捕获部分不起作用，有人成功了吗？

$("form").live("ajax:aborted:required", function(evt, elements) {
  var el;
  el = $(this).find('.btn-loading');
  el.button("reset");
  el.button("toggle");
});

Answer 1

如果您查看 jquery docs on bind（通常用于事件处理），他们会注意到处理函数中的 this 指的是 handler 所在的 DOM 元素绑定到，而不是引发事件的元素。所以最简单的做法是给所有加载按钮一个公共类（在这个例子中我们称之为“ajax-button”），将你的成功处理程序绑定到那个，然后你将在你的处理函数。

如果您使用的是 jquery（假设您有一些函数 resetButton 可以执行您想要执行的任何重置操作），您只需使用类似以下的内容来执行重置。

$(".ajax-button").bind("ajax:success", function() { 
     $(this).button("reset").button("toggle");})

This tutorial on Unobtrusive Javascript 有一些特定于 Rails 的很好的附加信息

Answer 2

这应该可行。基本上将click()事件绑定到你的button，它会立即显示加载状态。然后使用您的 URL、HTTP 方法（POST 或 GET）和 DataType（在这种情况下，我使用JSON)。 jQuery 在 AJAX 设置中提供了success 和error 函数。在按钮或相应部分中适用的任何其他内容上执行您的应用特定逻辑。

参考：http://api.jquery.com/jQuery.ajax/

$("#yourbutton",).on("click", function() {
   var btn;
   btn = $(this);
   btn.button("loading");
$.ajax({
    url: yoururl,
    type: 'GET',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    error: function(jqXHR, textStatus, errorThrown){
     *perform error here*
    btn.button("failure");
    }
    success: function (data, textStatus, jqXHR) {
    *perform success here - for you it seems to be*
    btn.button("reset");
    btn.button("toggle");
    }
});    
});

如果您想将其分解为对任何按下的按钮都是通用的，那么您可以试试这个。

$(document).on("click", ".btn-loading", function() {
doSomething($(this));
});
function doSomething(btn){
$.ajax({
    url: yoururl,
    type: 'GET',
    dataType: 'json',
    contentType: 'application/json; charset=utf-8',
    error: function(jqXHR, textStatus, errorThrown){
     *perform error here* 
    btn.button("failure");
    }
    success: function (data, textStatus, jqXHR) {
    *perform success here - for you it seems to be*
    btn.button("reset");
    btn.button("toggle");
    }
});
}

Answer 3

以下内容无需任何 JavaScript 即可工作

<form ... data-remote="true">
   ...
   <input class="btn" data-disable-with="Disabling text" name="commit" type="submit" value="Initial text">
</form>