Show Loading.. using jquery in bootstrap 4 with data-loading-text [duplicate]
I am trying to achieve a loading effect for a button, as demonstrated in codepen.
I am using bootstrap 4 (beta 2) Jquery 3.2.1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Group View</title>
<link rel="stylesheet" media="all" href="https://stackoverflow.com/questions/48240011/css/bootstrap.css" >
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap-bundle.js"></script>
</head>
<body>
<div>
<button type="button" class="btn btn-primary btn-lg">Submit Order</button>
</div>
<script>
$(document).ready(function() {
$('button').data('loading-text', 'loading...');
$('.btn').on('click', function() {
var $this = $(this);
$this.button('loading');
setTimeout(function() {
$this.button('reset');
}, 8000);
});
})
</script>
</body>
</html>
The above code does not display “loading…” when the button is clicked.
I’m not sure the .button() method in Bootstrap v4 has the options you are trying to use. The Codepen you link to uses Bootstrap v3.
Here is how you could replicate the same behavior with Bootstrap 4.
$(document).ready(function() {
$('.btn').on('click', function() {
var $this = $(this);
var loadingText="<i class="fa fa-circle-o-notch fa-spin"></i> loading...";
if ($(this).html() !== loadingText) {
$this.data('original-text', $(this).html());
$this.html(loadingText);
}
setTimeout(function() {
$this.html($this.data('original-text'));
}, 2000);
});
})<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
<div>
<button type="button" class="btn btn-primary btn-lg">Submit Order</button>
</div>This feature is deprecated since v3.3.5 and has been removed in v4. Source
Ran into this same issue a few days ago and nobody seems to have a solution. So here’s my jQuery plugin that seems to provide the same behavior in Boostrap 4.
(function($) {
$.fn.__bs4_btn = $.fn.button;
$.fn.button = function(action) {
if (action === 'loading' && this.data('loading-text')) {
this.data('original-text', this.html()).html(this.data('loading-text')).prop('disabled', true);
}
if (action === 'reset' && this.data('original-text')) {
this.html(this.data('original-text')).prop('disabled', false);
}
return this.__bs4_btn(action);
};
}(jQuery));
More details: How to Continue Using Buttons with “data-loading-text” in Bootstrap 4 with jQuery (my blog)
I’ve run into the same problem and tried the example uploaded by Mavelo above however it didn’t work on the queries like this:
$('button').button('reset')
which operates on multiple objects. Here’s a modified code that supports both single and multiple button queries:
(function($) {
$.fn.button = function(action) {
if (this.length > 0) {
this.each(function(){
if (action === 'loading' && $(this).data('loading-text')) {
$(this).data('original-text', $(this).html()).html($(this).data('loading-text')).prop('disabled', true);
} else if (action === 'reset' && $(this).data('original-text')) {
$(this).html($(this).data('original-text')).prop('disabled', false);
}
});
}
};
}(jQuery));
