Bootstrap - could anyone give me any example, how to set up JS buttons?
You need to explicitly set that the button is in the loading state. Something like this:
// Set up the buttons$(button).button(); $(button).click(function() { $(this).button('loading'); // Then whatever you actually want to do i.e. submit form // After that has finished, reset the button state using // $(this).button('reset');}
I've created a working JSFiddle example.
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/.
You don't need bootstrap-buttons.js. That's is HTM5, use the custom attributes. This sample does not depends of click event, it is a form submit
var btn = $(this).find("input[type=submit]:focus");// loadingvar loadingText = btn.data('loadingText');if (typeof loadingText != 'undefined') { btn.attr("value", loadingText);}else { btn.attr("value", "Loading...");}btn.attr("disabled", true);$.ajax({// long task complete: function () { // reset.. the same});