jQuery / Twitter Bootstrap data-loading-text button with delay

Question

I\'m trying to get this exact example working on my website:

http://getbootstrap.com/2.3.2/javascript.html#buttons

However, simply including this HTML:

Answer 1

just put a small js

onclick="$(this).button('loading');"

Answer 2

In the documentation page, there is a file being loaded called application.js. http://twitter.github.com/bootstrap/assets/js/application.js

// button state demo
$('#fat-btn')
    .click(function () {
        var btn = $(this)
        btn.button('loading')
        setTimeout(function () {
            btn.button('reset')
        }, 3000)
    });

Answer 3

Or just add this so it picks up the Twitter Bootstrap attribute.

$('button[data-loading-text]').click(function () {
    $(this).button('loading');
});

Answer 4

also, jquery has .delay() method which may be easier to work with than setTimeout.

Answer 5

My Button

<button type="submit" id="upgrade-subscription" class="btn btn-primary btn-subscribe" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> Payment Processing">upgrade</button>

JQ

$('#upgrade-subscription').click(function () {
    $(this).button('loading');
});

Answer 6

Make a note of how the accepted answer converted the jQuery button object to a js var before running button('loading') on it because, while this works, button('loading') will not work when used directly on the jQuery button object.