bootstrap button loading state

Question

I am trying to make it so that when someone click on the button it goes from normal button to toggled button with text changed to Loading...

so I included this button

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

but nothing happens when I click on the button.

I also have this at the bottom of the body.

<script>
        $(function() {
          var btn = $('#fat-btn').click(function () {
            btn.button('loading')
            setTimeout(function () {
              btn.button('reset')
            }, 3000)
          })
        })
</script>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

Here is the website I am trying to include the button(its at the bottom of the screen) http://www.ticketmachine.x10.mx/

Solution 1

I have visited the link you provided. I opened firebug it logs JS error given below.

Uncaught ReferenceError: $ is not defined

You wrote some JavaScript which used jQuery but it was added before including the jQuery library.

You should move the script tag after the jQuery link.

Solution 2

Once you've sorted your jQuery issue, you should update your click function as follows:

$(function(){
    var $btn = $('#fat-btn');
    $btn.click(function(){
        var $this = $(this);
        $this.attr('disabled', 'disabled').html("Loading...");
        setTimeout(function () {
            $this.removeAttr('disabled').html('Hello');
        }, 3000)
    });
})

Fiddle: http://jsfiddle.net/RJDgG/1/

Comments

[Admin]

His code is correct when using Bootstrap's buttons.