How do I make a button locked when clicked?

Navigation
0

I have inside this bootbox, two buttons, the first one that is written "Send Error Report" I wanted it when the person clicked it it would type a glyphicon indicating that it is processing the sending and it precludes the person from clicking again. Below 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 inserting this there in that context?

    
asked by anonymous 01.02.2018 / 12:57

1 answer

1

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

$(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><scriptsrc="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><linkhref="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" />
    
01.02.2018 / 13:56
What best practice to send authorization via HTTP header [closed] How to Make a Rule in the JavaScript According to the DIV [closed]