UJS + Bootstrap按钮加载

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成功和错误条件并重置按钮状态？

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

如果你看看bind上的jquery文档 （通常用于事件处理），他们会注意到处理函数中的this是指处理程序绑定的DOM元素，而不是引发事件的元素。 所以，最容易做的事情是让所有的载按钮的普通类（姑且称之为“Ajax的按钮，”在这个例子中），您的成功处理程序绑定到这一点，那么你就必须适当this处理程序函数中使用。

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

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

这篇关于Unobtrusive Javascript的教程有一些特定于Rails的附加信息

Answer 2

这应该工作。 基本上将click()事件绑定到您的button ，它将立即显示加载状态。 然后使用您的URL ， HTTP方法 （ 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");
    }
});
}

Answer 3

以下工作没有任何JavaScript

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