Question

115

Show Loading.. using jquery in bootstrap 4 with data-loading-text

rated 0 times [ 122] [ 7] / answers: 1 / hits: 46631 / 7 Years ago, sat, january 13, 2018, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alfonsok

Add To Favorites

Follow

Total Points: 386

Total Questions: 101

Total Answers: 90

Location: Puerto Rico

Member since Sun, Jun 27, 2021

3 Years ago

alfonsok questions

1 Why am I getting an error saying that expressJwt is not a function?

Sun, Apr 24, 22, 00:00, 2 Years ago

1 ReferenceError: Cannot access module before initialization

Sat, Jun 5, 21, 00:00, 3 Years ago

1 Line 4:13: 'React' is not defined no-undef

Wed, Jun 2, 21, 00:00, 3 Years ago

1 How to detect when a user leaves a voice channel in Discord with discord.js V12

Mon, Nov 16, 20, 00:00, 4 Years ago

1 discord.js v12 Mute command

Mon, Oct 5, 20, 00:00, 4 Years ago

View All

answered 7 Years ago ariel · Accepted Answer

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>