CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap
kanarifugl
kanarifugl

Reputation: 9987

Loading state button in Bootstrap 3

I'm new to Bootstrap 3. Can't figure out how to activate the loading state button function. My code below is from the documents on getboostrap.com.

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

Dropdowns works fine so I guess the problem is somewhere else?

Upvotes: 52

Views: 123684

Answers (2)

SleX
SleX

Reputation: 149

If you have v4 or higher, you can do this: 🙅🏽‍♂️

$.loading = function(btn, action){
  if(action && !btn.data('old-html')){
    btn.data('old-html', btn.html()).prop("disabled", true).html(btn.data('loading-text') || 'Loading...');
    return
  }
  if(!btn.data('old-html')) return;
  btn.prop("disabled", false).html(btn.data('old-html')).data('old-html', false);
} 

$("button, .button").click(function() {
    var $btn = $(this);
    $.loading($btn, true)
    setTimeout(function () {
       $.loading($btn, false);
    }, 3000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button>salve</button>
<button
  data-loading-text="<i class='fa fa-spinner fa-spinn'></i> Loading..."
>salve</button>
<a href="#" class="button">salvar</a>
</html>

Upvotes: 1

Ionică Bizău
Ionică Bizău

Reputation: 113365

You need to detect the click from js side, your HTML remaining same. Note: this method is deprecated since v3.5.5 and removed in v4.

$("button").click(function() {
    var $btn = $(this);
    $btn.button('loading');
    // simulating a timeout
    setTimeout(function () {
        $btn.button('reset');
    }, 1000);
});

Also, don't forget to load jQuery and Bootstrap js (based on jQuery) file in your page.

JSFIDDLE

Official Documentation

Upvotes: 131

Related Questions