UJS + Bootstrap按钮加载

Question

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

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

$(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

以下代码在没有任何JavaScript的情况下工作

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

Answer 2

如果您查看jquery docs on bind (通常用于事件处理)，他们会注意到处理程序函数中的this引用处理程序绑定到的DOM元素，而不是引发事件的元素。因此，最简单的做法是为所有加载按钮提供一个公共类(在本例中，我们将其称为“ajax- this”)，将成功处理程序绑定到该类，然后在处理程序函数中提供相应的按钮。

如果您使用的是jquery (假设您有一些函数resetButton可以执行您想要执行的任何重置操作)，则只需使用如下代码进行重置即可。

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

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

Answer 3

这应该是可行的。基本上，将click()事件绑定到您的button，它将立即显示加载状态。然后使用您的URL、HTTP method (POST或GET)和DataType (在本例中使用JSON)将AJAX请求组合在一起。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");
    }
});
}