bootstrap data loading text not working

Question

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>

Solution

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.

Comments

[Phil]

Given that this is an almost exact copy of the Bootstrap example code, 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?

[Ryan Salmons]

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

[ℛⱥℐℰşℎ]

Try to change button type="submit" to type="button".... I think

[Brandon Clark]

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).

[JayhawksFan93]

Curious if you ever found a solution to this.

[wolfyuk]

According to the docs, this feature was deprecated in v3.3.5 and removed in v4.

[Mavelo]

Drop-in solution for BS4 from a similar question Show Loading.. using jquery in bootstrap 4 with data-loading-text