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/
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/
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With