Bootstrap Change button loading state _javascript Tips

Source: Internet
Author: User
Tags button type

When there is an activation button inside the bootstrap, the button becomes unusable;

According to the method introduced in the official website is to add a data-loading-text= "Loading ..." in button buttons. Properties, and then the JS overall code is like this:

Copy Code code as follows:

<button type= "button" id= "MyButton" data-loading-text= loading ... "class=" btn btn-primary "autocomplete=" Off ">
Loading State
</button>

<script>
$ (' #myButton '). On (' click ', function () {
var $btn = $ (this). Button (' Loading ')
Business logic ...
$btn. button (' Reset ')
})
</script>

Where the autocomplete= "off" property is for the FF browser after the page is loaded, the disabled state is not automatically released.
When I use the above code directly, I find that the loading state is not.
Then I changed it myself, and I wrote it, and it was OK.

Copy Code code as follows:

<script>
For smiling words Landing button and reviewing button to change button loading status
function Loag () {
var btn = $ ("#btn_login");
Btn.button (' loading ');
settimeout (function () {Btn.button (' reset ');},2000);
}
</script>
<button type= "button" class= "btn btn-default" data-loading-text= loading ... "autocomplete=" Off "onclick=" Loag () " Id= "Btn_login" > Login </button>

A bit to change can achieve our requirements, do not know whether the official this piece is not tested on the put up, here the solution recommended to small partners.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.