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 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.