Best IT Recipes

JQuery / Twitter Delayed boot text download button

I am trying to get this exact example working on my website:

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

However, simply by including this HTML:

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

Does not work. I am running jQuery 1.7.x and have downloaded Bootstrap JS files.

To be specific: I want the button to move to change the “loading” of the text for a slight delay, and then return to the plain text. It seems that there is no good example available online from my Googling (most of them ask for a constant state change or switch), and the Bootstrap site itself is not in the documentation.

+55
javascript jquery css twitter-bootstrap
Aug 25 2018-12-12T00:
source share
6 answers

On the documentation page, a file called application.js is loaded. 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) });
+99
Aug 25 2018-12-12T00:
source share

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

 $('button[data-loading-text]').click(function () { $(this).button('loading'); });
+20
Jun 19 '13 at 10:33
source share

Record how the accepted answer converted the jQuery button object to js var before running the button (“download”) on it, because although this works, the button (“download”) will not work if you use it directly on the jQuery button object.

+5
Nov 20
source share

just enable the bootstrap library:

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

That's 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>
+2
Jul 25 '13 at 18:05
source share

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

+1
Sep 19 '12 at 19:30
source share

just put a little js

 onclick="$(this).button('loading');"
-7
May 18 '13 at 16:48
source share


More articles:


All Articles