-1

Olá, estou tentando alterar um botão onde, quando for clicado. Seu conteúdo seja alterado para mostrar um "loading" e apos o carregamento da pagina o botão volte ao estado anterior. Já tentei de varias formas mas sem sucesso, não sei se é conflito; poderiam me ajudar por gentileza?

O front end do projeto é em JSP, usamos bootstrap 4.4.

O codigo do botão que quero alterar é:

Pesquisar

/*Codigo que quero alterar*/

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

Eu tentei da forma abaixo passar os dados usando ID na DIV, pq possuem outros class "button" na pagina que não quero incluir o Loading.

HTML:

Carregando">Pesquisar

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>

1
  • não coloque imagens de código, coloque o próprio código para que podemos testar (use o JsFiddle) no caso
    – user152996
    Commented 9/09/2020 às 19:32

1 Resposta 1

0

Boa tarde pessoal,

No meu caso consegui resolver conforme abaixo; meu problema é que utilizo no projeto bootstrap 4.0, e os o efeitos que queria utilizar nos botões "class='fa fa-spinner fa-spin" por exemplo, estão disponíveis apenas no bootstrap 4.4. Como não posso atualizar a versão do bootstrap utilizado no projeto, resolvi achando as classes CSS dos efeitos que estão apenas na versão que não posso usar e inclui os mesmo no projeto. no meu caso foram os CSS's abaixo:

<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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .