Bootstrap - could anyone give me any example, how

Question

I am playing with Bootstrap's stateful buttons - specifically with Loading state, but still can't find the right set up to get it working. I have a simple form based on AJAX, something like that:

<%=form_tag '/comments', :remote => true do %>
  <div><%=text_area_tag 'comment[text_comment]'%></div>
  <div><button class="btn btn-primary" data-loading-text="loading stuff..." >Post</button></div>
<%end%>

But still when I click on the POST button, so the form is sending, but the button effect (loading stuff...) is not displayed, like the example on Bootstrap's page.

Could anyone gives me a tip on how to fix it?

Answer 1

You don't need bootstrap-buttons.js. That's is HTM5, use the custom attributes. This sample does not depends of click event, it is a form submit

var btn = $(this).find("input[type=submit]:focus");
// loading
var loadingText = btn.data('loadingText');

if (typeof loadingText != 'undefined') {
    btn.attr("value", loadingText);
}
else {
    btn.attr("value", "Loading...");
}
btn.attr("disabled", true);

$.ajax({// long task
   complete: function () {
    // reset.. the same
});

Answer 2

In the Bootstrap documentation, the first mention of stateful buttons gave me the impression that all I need to enable the stateful button is to provide the data-loading-text attribute:

Add data-loading-text="Loading..." to use a loading state on a button.

If you are looking for this behaviour (and also expect it to work on submit, input type="submit", etc), this jQuery selector should do the trick for you:

$(':input[data-loading-text]')

But you'll still need to attach your desired behaviour through an event handler, like .click(). This is the jQuery for the stateful button in the documentation (look for "fat-btn" in that javascript file):

.click(function () {
    var btn = $(this)
    btn.button('loading')
    setTimeout(function () {
        btn.button('reset')
    }, 3000)
})

So, putting that all together, we can do this:

$(':input[data-loading-text]').click(function () {
    var btn = $(this)
    btn.button('loading')
    setTimeout(function () {
        btn.button('reset')
    }, 3000)
})

I have a working jsfiddle at http://jsfiddle.net/jhfrench/n7n4w/.

Answer 3

You need to explicitly set that the button is in the loading state. Something like this:

// Set up the buttons
$(button).button();    
$(button).click(function() {
    $(this).button('loading');
    // Then whatever you actually want to do i.e. submit form
    // After that has finished, reset the button state using
    // $(this).button('reset');
}

I've created a working JSFiddle example.