0

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

form 元素使用data-remote="true"option 并返回一个 .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");
});
4

3 回答 3

2

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

如果您使用的是 jquery（假设您有一些功能resetButton可以执行您想做的任何重置），您只需使用类似以下的内容来进行重置。

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

这个关于 Unobtrusive Javascript 的教程有一些关于 Rails 的很好的附加信息

于 2012-08-14T17:12:12.573 回答
0

这应该有效。基本上将click()事件绑定到你的button，它会立即显示加载状态。然后使用您的URL、HTTP 方法（POST或GET）和DataType（在本例中我使用）将 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");
    }
});
}
于 2012-08-13T15:32:13.310 回答
0

以下作品无需任何 JavaScript

<form ... data-remote="true">
   ...
   <input class="btn" data-disable-with="Disabling text" name="commit" type="submit" value="Initial text">
</form>
于 2012-08-17T19:07:44.843 回答