Question

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

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

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

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

我尝试做类似下面的事情，但在触发此功能后，我无法弄清楚如何访问活跃的.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");
});

请参阅此wiki：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是指 DOM元素处理程序< / strong>被绑定到，而不是发起事件的元素。因此，最简单的方法是给所有加载按钮一个公共类（在本例中让我们称之为“ajax-button”），将成功处理程序绑定到该类，然后您将拥有适当的this可用在你的处理函数中。

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

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

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

Answer 2

这应该有效。基本上将click()事件绑定到您的button，它会立即显示加载状态。然后使用网址， HTTP方法（POST或GET）和数据类型将AJAX请求放在一起（在这种情况下，我使用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>

UJS + Bootstrap按钮加载

3 个答案: