How to make a button lock when clicking?

Asked

Viewed 65 times

0

I have inside this bootbox, two buttons, on the first one written "Send Error Report" I wanted when the person clicked it to show a glyphicon indicating that it is processing the sending and made it impossible for the person to click again. Down with my code:

   <script src="~/Scripts/bootbox.min.js"></script>
    <script>
        $(document).ready(function () {
            $.getJSON('@Url.Action("Ajax_Teste")', function (response) {
                alert("getJson sucesso");
            }).fail(function (data) {
                bootbox.confirm({
                    message: "Não foi possível processar a sua requisição",
                    buttons: {
                        confirm: {
                            label: '<span class="glyphicon glyphicon-envelope"></span> Enviar o relatório de Erro.',

                            className: 'btn-success',
                        },
                        cancel: {
                            label: 'Não enviar',

                            className: 'btn-danger',
                        }
                    },
                    callback: function (result) {
                        //aqui entrará meu código
                        if (result)
                            console.log("confirmou");
                        else
                            console.log("cancelou");
                    }

                })

            });
        });
    </script>

I know I should insert this here:

   $(document).ready(function(){
        $(".btn").click(function(){
            $(this).button('enviando');
        });   
    });

More like putting it there in that context?

javascript bootstrap

  • put your html code in question

  • There’s the code, my friend, in javascript if you write html the way above

  • Friend, when you click the button you make an ajax call? if yes put the code here

  • yes, I edited the question, take a look

  • I know I should use this $(Document). ready(Function(){ $(".btn").click(Function(){ $(this).button('sending'); }); }); The problem is how to insert this into the bootbox

  • The solution worked?

Show 1 more comment

1 answer

1


Here is the code. I assumed that you will send the error data to a script via ajax. To animate the button I used the Font Awesome. Note that in the modal success callback function I gave a return false, this so that the modal does not close until the AJAX call is complete. To close the modal I used the function bootbox.hideAll(). Now you just have to customize the code the way you want it.

$(document).ready(function() {
  $.getJSON('@Url.Action("Ajax_Teste")', function(response) {
    alert("getJson sucesso");
  }).fail(function(data) {
    bootbox.confirm({
      message: "Não foi possível processar a sua requisição",
      buttons: {
        confirm: {
          label: '<span class="glyphicon glyphicon-envelope"></span> Enviar o relatório de Erro.',
          className: 'btn-success',
        },
        cancel: {
          label: 'Não enviar',
          className: 'btn-danger',
        }
      },
      callback: function(result) {
        //aqui entrará meu código
        if (result) {

          $.ajax({
            url: 'script.php',
            method: 'post',
            data: {
              relatoria: 'Meu relatório de erro'
            },
            success: function(data, textStatus, jqXHR) {
              console.log(data);
            },
            beforeSend: function() {
              $('.btn-success').prop("disabled", true);
              $('.btn-success').html("<i class='fa fa-spin fa-spinner'></i> Enviando");

            },
            complete: function() {
              $('.btn-success').prop("disabled", false);
              $('.btn-success').html("<span class='glyphicon glyphicon-envelope'></span> Enviar o relatório de Erro.");
              bootbox.hideAll();
            }
          });
          return false;
        } else
          console.log("cancelou");
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

Browser other questions tagged javascript bootstrap

You are not signed in. Login or sign up in order to post.