jQuery / Twitter Bootstrap data-loading-text button with delay
JavascriptJqueryCssTwitter BootstrapJavascript Problem Overview
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.
Javascript Solutions
Solution 1 - Javascript
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)
});
Solution 2 - Javascript
Or just add this so it picks up the Twitter Bootstrap attribute.
$('button[data-loading-text]').click(function () {
$(this).button('loading');
});
Solution 3 - Javascript
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.
Solution 4 - Javascript
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>
Solution 5 - Javascript
also, jquery has .delay() method which may be easier to work with than setTimeout.
Solution 6 - Javascript
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');
});
Solution 7 - Javascript
just put a small js
onclick="$(this).button('loading');"