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 for

Answer 1

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