Bootstrap - could anyone give me any example, how to set up JS buttons?

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?

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

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

Comments

[user984621]

thank you for the example, but gosh... I don't know, what I have wrong... when I try the example what you put on JSFiddle and put into the function alert, so the alert message is displayed, but the text loading into the button no... all Bootstrap files I have loaded...

[wloescher]

Great solution! My inherited code includes a mix of anchor tags and input buttons, so my JQuery select statement is simply "[data-loading-text]". Also, for standards compliance and clarity, please add semi-colons to the end of your lines.

[Jeromy French]

@wloescher: The semicolons aren't included only because I copied the code verbatim from Bootstrap's code. Some linters will complain about "excess" seimcolons, so I'm guessing that's why they don't include them. I put them in my own code, for the same reasons you suggest them.

[Jeromy French]

@wloescher: PS--consider using this selector: $('a, :input').find('[data-loading-text]')...