Bootstrap - could anyone give me any example, how to set up JS buttons? Bootstrap - could anyone give me any example, how to set up JS buttons? jquery jquery

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