3

I am trying to create a twitter bootstrap button that changes to 'Loading...' when selected until the javascript loads. However I cannot get it to work...

Here is my html:

<button type="submit" id="sign-up" data-loading-text="Processing..." class="btn btn-sign-up">SIGN UP</button>

Javascript: 

<script>
$('#sign-up').click(function () {
    var btn = $(this);
    btn.button('loading');
    $.ajax(...).always(function () {
    btn.button('reset');
    });
});
</script>
Ryan Salmons
  • 1,429
  • 10
  • 21
  • 42
  • Given that this is an almost exact copy of the [Bootstrap example code](http://getbootstrap.com/javascript/#buttons), I'd say you're simply missing a resource (like jQuery or the Bootstrap JS file) or you've literally got `$.ajax(...)`. What does your error console say? – Phil Feb 05 '14 at 05:02
  • unexpected token which is to be expected. i am just trying to figure out what needs to be done to make this javascript element functional – Ryan Salmons Feb 05 '14 at 05:07
  • Try to change button type="submit" to type="button".... I think – ℛⱥℐℰşℎ Feb 05 '14 at 05:41
  • I don'u know if you ever solved this. If not you probly gave up by now but I am almost sure you need to add your quotes, it worked for me when it wasn't working(ie `$.ajax('...').always`). – Brandon Clark Dec 10 '14 at 18:16
  • Curious if you ever found a solution to this. – JayhawksFan93 Feb 14 '15 at 05:48
  • 1
    According to the [docs](https://getbootstrap.com/docs/3.3/javascript/#buttons), this feature was deprecated in v3.3.5 and removed in v4. – wolfyuk Feb 28 '18 at 14:08
  • Drop-in solution for BS4 from a similar question [Show Loading.. using jquery in bootstrap 4 with data-loading-text](https://stackoverflow.com/questions/48240011/show-loading-using-jquery-in-bootstrap-4-with-data-loading-text/#answer-53009288) – Mavelo Oct 26 '18 at 13:10

2 Answers2

4

As you're using jQuery and bootstrap, you can follow this example on http://jsfiddle.net/liuyl/RdpRw/1/

$('button[data-loading-text]')
.on('click', function () {
    var btn = $(this)
    btn.button('loading')
    setTimeout(function () {
        btn.button('reset')
    }, 3000)
});

OBS: see the full sample on the link. Notice the external libraries on the left menu on jsfiddle, you can't forget to reference them.

Ismael Sarmento
  • 844
  • 1
  • 11
  • 22
0

Not sure if you've already solved your problem. You should place you script inside $(document).ready() callback so that the $("#sign-up") is available when the click event is registered

$(document).ready(function() {
    $('#sign-up').click(function () {
        var btn = $(this);
        btn.button('loading');
        $.ajax(...).always(function () {
            btn.button('reset');
        });
    });
});

Let's try the updated code here http://jsbin.com/pamujimise/edit?html,output

Jermain Luong
  • 11
  • 1