UJS + Bootstrap button loading

Question

I'm using Twitter Bootstrap's button loading state with Rails Unobtrusive JavaScript http://twitter.github.com/bootstrap/javascript.html#buttons

The form element uses data-remote="true" option and returns a .js file. The submit button calls .button("loading") , using the following JS:

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

Is there a way to detect Ajax Success & Error conditions and reset the button state?

I tried to do something like below, but after this function is triggered, I can't figure out how to access the .btn-loading element that's active

$(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");
});

Any suggestions on how to reset the button after ajax request?

Also, how do I detect HTML5 error and reset the button state?

UPDATE: Aug 14, 2012

I turns out you can listen to the event and trigger the button via:

$(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");
});

See this wiki: https://github.com/rails/jquery-ujs/wiki/ajax

However, the error catching portion isn't working, anyone had success on this?

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

Answer 1

If you look at the jquery docs on bind (which go for event handling in general), they note that this in the handler function refers to the DOM element that the handler was bound to , NOT the element that originated the event. So the easiest thing to do is to give all the loading buttons a common class (let's call it "ajax-button" for this example), bind your success handler to that and then you'll have the appropriate this available within your handler function.

If you were using jquery (assuming you have some function resetButton that does whatever resetting you want to do), you would just use something like the following to do the resetting.

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

This tutorial on Unobtrusive Javascript has some good additional information specific to Rails

Answer 2

This should work. Basically bind the click() event to your button , and it will immediately show the loading state. Then put the AJAX request together using your URL , HTTP method ( POST or GET ) and the DataType (in this case I used JSON ). jQuery provides success and error functions in the AJAX settings. Perform your app-specific logic on the button or whatever else applicable in the appropriate section.

Reference: 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");
    }
});    
});

If you want to break it down to be generic for any button pressed, then you may try this.

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

The following works without any JavaScript

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