CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Michael B
Michael B

Reputation: 1763

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

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:

<button type="button" class="btn btn-primary" data-loading-text="Loading...">Loading state</button>

Does not work. I'm running jQuery 1.7.x and have loaded the Bootstrap JS files.

To be specific: I want the button to move to the "loading" text change for a slight delay, then go back to the regular text. There doesn't seem to be a good example available online from my Googling (most are asking for a permanent state change or toggle), and the Bootstrap site itself is lacking in documentation here.

Upvotes: 59

Views: 76778

Answers (7)

Manoj
Manoj

Reputation: 1

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');
});

Upvotes: 0

Diego Torres
Diego Torres

Reputation: 1223

just include the bootstrap library: 

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "></script>

This is an example:

<!DOCTYPE html>
<HTML>
<HEAD>
    <TITLE>Bootstrap Example</TITLE>
    <link type="text/css" rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css ">
<STYLE>
</STYLE>
</HEAD>
<BODY>
    <button type="button" class="btn btn-primary" id="btnD" data-loading-text="=)">hola!!!</button>


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js "></script>
    <script type="text/javascript">
        $(function(){
            $('#btnD').click(function(){
                  var btn = $(this); 
                  btn.button('loading');
            });
        });
    </script>
</BODY>
</HTML>

Upvotes: 2

Geoff Wells
Geoff Wells

Reputation: 361

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

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

Upvotes: 21

user2397297
user2397297

Reputation: 19

just put a small js

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

Upvotes: -7

user1837332
user1837332

Reputation: 91

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.

Upvotes: 6

dsd
dsd

Reputation: 11

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

Upvotes: 1

msc
msc

Reputation: 3800

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)
    });

Upvotes: 103

Related Questions