Include Button Loading - Bootstrap v4 - JSP

Question

Hi, I’m trying to change a button where when it’s clicked. Your content is changed to show a "loading" and after loading the page the button goes back to the previous state. I have tried several ways but without success, I do not know if it is conflict; they could help me by kindness?

The project front end is in JSP, we use bootstrap 4.4.

The code of the button I want to change is:

Research

/*Codigo que quero alterar*/

<div class="col-4 text-right">
    <button class="btn btn-sm btn-primary" name="Pesquisar" type="submit">Pesquisar</button>
</div>

I tried the way below to pass the data using ID in the DIV, because they have other class "button" in the page I do not want to include the Loading.

HTML:

Loading">Search

JS/JQ:

$('#load'). click(Function() { var btn = $(this) btn.button('loading') setTimeout(Function() { btn.button('reset') }, 9000) });

<script type="text/javascript"> 
/*codigo que tentei*/
    $('#load').click(function () {
            var btn = $(this)
            btn.button('loading')
            setTimeout(function () {
            btn.button('reset')
        }, 9000)
    }); 
</script>

/*codigo que tentei*/
<div class="col-4 text-right"> 
    <button type="submit" class="btn btn-sm
        btn-primary" id="load" data-loading-text="<i class='fa fa-spinner
        fa-spin'></i> Carregando">Pesquisar</button> 
</div>

Answer 1

Good afternoon, everyone,

In my case I was able to solve as below; my problem is that I use the bootstrap 4.0 project, and the effects I wanted to use on the "class='fa fa-spinner fa-spin" buttons for example, are only available in bootstrap 4.4. Since I can’t update the bootstrap version used in the project, I decided to find the CSS classes of the effects that are only in the version that I can’t use and include them in the project. in my case were the CSS’s below:

<script type="text/javascript">
$(document).ready(function() {
                $("#load").click(function() {
                  // disable button
                  $(this).prop("disabled", true);
                  // add spinner to button
                  $(this).html(
                    `<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Carregando`
                );
            });
        });
</script>

<style>
@keyframes spinner-border {
      to { transform: rotate(360deg); }
    } 
    .spinner-border{
        display: inline-block;
        width: 1rem;
        height: 2rem;
        vertical-align: text-bottom;
        border: .25em solid currentColor;
        border-right-color: transparent;
        border-radius: 50%;
        -webkit-animation: spinner-border .75s linear infinite;
        animation: spinner-border .75s linear infinite;
    }
    .spinner-border-sm{
        height: 1rem;
        border-width: .2em;
    }
</style>

<div class="col-4 text-right">
  <button type="submit" id="load" class="btn btn-sm btn-            primary">Pesquisar</button>
</div>