Andrew
Andrew

Reputation: 4441

Bootstrap JQuery loading state auto disables button, how to get other states to do the same

$this.button('loading') auto adds disabled class to it while it's running, I want to create a second version of $this.button('loading'). So I can have 2 versions of text in a loading button.

If I use a custom entry such as continue or loading2, it applies the text but does not apply the disabled class during that timeframe

Example

http://www.bootply.com/129005#

I've tried just doing an attr add and changing the html of the button, which works. But the form actually won't ever complete, it just hangs on the second text.

The second portion of text needs to stay until the php page it calls gets completed (which works fine right now with the example above, besides the button is clickable during the continue portion.

Upvotes: 0

Views: 261

Answers (1)

Pero P.
Pero P.

Reputation: 26992

According to the bootstrap docs, the second invocation of btn.button(...) after the timeout will reset the button state:

$().button(string)

Resets button state - swaps text to any data defined text state.

Instead you just want to modify the text of the button in it's existing state, i.e:

setTimeout(function(){
    btn.prop('value', 'still going..')  
}, 1000);

http://www.bootply.com/129028

Upvotes: 1

Related Questions