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>
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>
-
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? – Phil Commented Feb 5, 2014 at 5: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 Commented Feb 5, 2014 at 5:07
- Try to change button type="submit" to type="button".... I think – ℛⱥℐℰşℎ Commented Feb 5, 2014 at 5: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 Commented Dec 10, 2014 at 18:16 - 1 According to the docs, this feature was deprecated in v3.3.5 and removed in v4. – wolfyuk Commented Feb 28, 2018 at 14:08
2 Answers
Reset to default 4As you're using jQuery and bootstrap, you can follow this example on http://jsfiddle/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.
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./pamujimise/edit?html,output