Menu
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="../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.
456
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>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
