CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap
Snorlax
Snorlax

Reputation: 4735

Can't get Bootstrap Plugin to work

http://jsfiddle.net/jzhang172/s83yt1L6/

I'm having trouble getting the button to work. It should work like here on the bootstrap site:

http://getbootstrap.com/javascript/#buttons 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
    $(function(){
  $('#myButton').on('click', function () {
    var $btn = $(this).button('loading')
    // business logic...
    $btn.button('reset')
  });
    });
</script>

Upvotes: 0

Views: 61

Answers (1)

Omidam81
Omidam81

Reputation: 1917

you reset the button immediately after it changed to 'loading' so you can't see it changed. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
    $(function(){
  $('#myButton').on('click', function () {
   
    var $btn = $(this).button('loading');
    setTimeout(function(){$btn.button('reset');}, 1000);
    // business logic...
    
  });
    });
</script>

Upvotes: 2

Related Questions