Message with a confirmation question before completing the click event

Asked

Viewed 188 times

0

I am developing a task management system in which changes are made to fields in the database depending on certain buttons we click (Via Ajax and PHP).

I would like, when clicking on a button, to open an Alert, a modal or something with a question like: "Do you really want to make this change ?". If it was clicked on the "YES" button, then that action would be completed. If it was clicked on the "NO" button, then nothing would be done and the event would not be called.

Follow my code below.

/* Função que cria as linhas da tabela com os botões dinamicamente */

function inserirFormulario(dados) {
  $.ajax({
    //dataType: "json",
    type: "POST",
    data: dados.serialize(),
    url: "../banco/banco-get/pagina-minhas-tarefas/interface-resultado-pesquisa.php",
    cache: false,


  }).done(function(data) {

    var atividades = "";

    $.each($.parseJSON(data), function(chave, valor) {

      //FUNÇÃO PARA FORMATAR AS DATAS QUE VEM DO PHP
      function dataAtualFormatada(parametro) {
        if (parametro == null) {
          parametro = "";
          return parametro;
        } else {
          var data = new Date(parametro),
            dia = data.getDate().toString(),
            diaF = (dia.length == 1) ? '0' + dia : dia,
            mes = (data.getMonth() + 1).toString(), //+1 pois no getMonth Janeiro começa com zero.
            mesF = (mes.length == 1) ? '0' + mes : mes,
            anoF = data.getFullYear();
          return diaF + "/" + mesF + "/" + anoF;
        }
      }


      var vencimento = dataAtualFormatada(valor.DT_VENCIMENTO);
      var inicio = dataAtualFormatada(valor.DT_INICIO);
      var fim = dataAtualFormatada(valor.DT_FIM);


      //CRIANDO AS LINHAS COM OS TD DA TABELA QUE SÃO O RESULTADO NA CONSULTA AO BANCO 

      atividades += '<tr class="' + valor.codigo + '" name="' + valor.STATUS + '">';
      //atividades += '<td>' + valor.codigo + '</td>';
      atividades += '<td class="th-ocultar-responsivo-tbody">' + valor.COD + '</td>';
      atividades += '<td>' + valor.EMPRESAS + '</td>';
      atividades += '<td class="th-ocultar-responsivo-tbody">' + valor.TRIBUTACAO + '</td>';
      atividades += '<td>' + valor.TIPO_ATIVIDADE + '</td>';
      atividades += '<td>' + vencimento + '</td>';
      //atividades += '<td class="th-ocultar-responsivo-tbody">' + inicio + '</td>';
      //atividades += '<td class="th-ocultar-responsivo-tbody">' + fim + '</td>';


      if (valor.STATUS == "INICIADO") {
        atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' reabriratividade  colocarstandby css-iniciado" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
      } else if (valor.STATUS == "CONCLUIDO") {
        atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' reabriratividade  colocarstandby css-concluido" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
      } else if (valor.STATUS == "CONCLUIDO_VENCIDO") {
        atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' reabriratividade  colocarstandby css-concluido-vencido" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
      } else if (valor.STATUS == "VENCIDO") {
        atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' reabriratividade  colocarstandby css-vencido" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
      } else if (valor.STATUS == "PENDENTE") {
        atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' reabriratividade  colocarstandby css-pendente" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
      } else if (valor.STATUS == "INICIADO_VENCIDO") {
        atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' reabriratividade colocarstandby css-iniciado-vencido" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
      }

      //botão stand_by do status
      else if (valor.STATUS == "STAND_BY") {
        atividades += '<td><button type="button" class="btn ' + valor.STATUS + ' css-stand-by" value="' + valor.codigo + '">' + valor.STATUS + '</button></td>';
      }

      //botão reabrir atividade coluna
      atividades += '<td class="th-ocultar-responsivo-tbody"><button type="button" class="btn css-reabrir reabrir-atividade-coluna" name="' + valor.STATUS + '" value="' + valor.codigo + '"><img src="../_imagens/reabrir.png"></button></td>';

      //botão stand by da coluna
      atividades += '<td class="th-ocultar-responsivo-tbody"><button type="button" class="btn btn-primary stand-by-coluna" data-toggle="modal" data-target="#inserir-stand-by" id="' + valor.codigo + '"  value="' + valor.COD + '"><img src="../_imagens/stand_by.png"></button></td>';

      //botão inserir detalhes
      atividades += '<td class="th-ocultar-responsivo-tbody"><button type="button" class="btn css-detalhes botao-detalhes" <a class="" href="#" data-toggle="modal" data-target="#modal-observacoes"><img src="../_imagens/historicotarefa.png"></a></button></td>';
      //botão inserir detalhes
      //atividades += '<td><a  class="btn btn-md btn-primary css-detalhes " href="#" data-toggle="modal" data-target="#modal-observacoes"><img src="_imagens/historicotarefa.png"></a></button></td>';


      atividades += '</tr>';


    });

    $('#registros-atividades').html(atividades);


  }).fail(function() {


  }).always(function() {


  });
}


//Código que realiza o evento quando clicamos no botão do modal

$(document).on("click", ".transformar-atividade-para-stand-by", function(e) {
  e.preventDefault();


  if (!$(this).closest("tr").find(".STAND_BY").length) //Não vai executar a ação se número de classes STAND_BY na linha for maior que ZERO
  {

    var tipo_ativ = 'STAND_BY'; /*$(this).attr('class')*/
    //andrews//////////////////////////////
    $(this).css('background-color', '#424242');
    $(this).css('border', '1px solid gray');
    $(this).css('color', 'white');
    $(this).css('font-weight', 'bold');
    $(this).css('border-radius', '5px');
    //andrews//////////////////////////////
    var codigo_emp = $(this).attr('id');
    var cod_emp = $(this).val();
    var estado_anterior_do_campo = $("tr." + codigo_emp + " button.colocarstandby").html();

    $("tr." + codigo_emp + " button.colocarstandby").html("STAND_BY");
    $("tr." + codigo_emp + " button.colocarstandby").css('background-color', 'black');



    //VERIFICANDO O STATUS DO CAMPO QUE RECEBERÁ O NOVO STATUS (STAND_BY)

    if (estado_anterior_do_campo == "PENDENTE") {
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('css-pendente');
      $("tr." + codigo_emp + " button.reabriratividade").addClass('css-stand-by');

      $("tr." + codigo_emp + " button.reabriratividade").addClass('STAND_BY');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('PENDENTE');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('colocarstandby');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('reabriratividade');

      $("tr." + codigo_emp + " button.reabrir-atividade-coluna").attr('name', 'STAND_BY');
      $(this).parent().parent().attr('name', 'STAND_BY');

    } else if (estado_anterior_do_campo == "INICIADO") {
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('css-iniciado');
      $("tr." + codigo_emp + " button.reabriratividade").addClass('css-stand-by');

      $("tr." + codigo_emp + " button.reabriratividade").addClass('STAND_BY');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('INICIADO');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('colocarstandby');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('reabriratividade');


      $("tr." + codigo_emp + " button.reabrir-atividade-coluna").attr('name', 'STAND_BY');
      $(this).parent().parent().attr('name', 'STAND_BY');
    } else if (estado_anterior_do_campo == "CONCLUIDO") {
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('css-concluido');
      $("tr." + codigo_emp + " button.reabriratividade").addClass('css-stand-by');

      $("tr." + codigo_emp + " button.reabriratividade").addClass('STAND_BY');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('CONCLUIDO');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('colocarstandby');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('reabriratividade');

      $("tr." + codigo_emp + " button.reabrir-atividade-coluna").attr('name', 'STAND_BY');
      $(this).parent().parent().attr('name', 'STAND_BY');
    } else if (estado_anterior_do_campo == "VENCIDO") {
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('css-vencido');
      $("tr." + codigo_emp + " button.reabriratividade").addClass('css-stand-by');

      $("tr." + codigo_emp + " button.reabriratividade").addClass('STAND_BY');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('VENCIDO');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('colocarstandby');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('reabriratividade');

      $("tr." + codigo_emp + " button.reabrir-atividade-coluna").attr('name', 'STAND_BY');
      $(this).parent().parent().attr('name', 'STAND_BY');
    } else if (estado_anterior_do_campo == "INICIADO_VENCIDO") {
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('css-iniciado-vencido');
      $("tr." + codigo_emp + " button.reabriratividade").addClass('css-stand-by');

      $("tr." + codigo_emp + " button.reabriratividade").addClass('STAND_BY');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('INICIADO_VENCIDO');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('colocarstandby');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('reabriratividade');

      $("tr." + codigo_emp + " button.reabrir-atividade-coluna").attr('name', 'STAND_BY');
      $(this).parent().parent().attr('name', 'STAND_BY');
    } else if (estado_anterior_do_campo == "CONCLUIDO_VENCIDO") {
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('css-concluido-vencido');
      $("tr." + codigo_emp + " button.reabriratividade").addClass('css-stand-by');

      $("tr." + codigo_emp + " button.reabriratividade").addClass('STAND_BY');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('CONCLUIDO_VENCIDO');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('colocarstandby');
      $("tr." + codigo_emp + " button.reabriratividade").removeClass('reabriratividade');


      $("tr." + codigo_emp + " button.reabrir-atividade-coluna").attr('name', 'STAND_BY');
      $(this).parent().parent().attr('name', 'STAND_BY');
    }

    //CHAMANDO FUNÇÃO QUE UTILIZA O AJAX PARA ALTERAR O STATUS PARA STAND_BY NO BANCO DE DADOS

    var alterarstandby = transformarStandBy(tipo_ativ, codigo_emp, cod_emp);

    tipo_ativ = "";
  }

});
<!-- Modal que é aberto quando clicamos no botão -->

<div class="modal fade" id="inserir-stand-by" role="dialog">
  <div class="modal-dialog modal-md">

    <div class="modal-content">
      <div class="modal-body">
        <p>Você realmente deseja passar essa atividade para Stand By ?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary transformar-atividade-para-stand-by" id="transformar-em-stand-dy">Sim</button>
        <button type="button" data-dismiss="modal" class="btn btn-danger">Não</button>
      </div>
    </div>

  </div>
</div>

I will not post the code here because it is too long. I would just like a light how to do something like this. Preferably using jQuery. I’ll leave below a small example of the click on one of the modal buttons (".transform-activity-to-stand-by" button).. Since the jQuery code coming from this event is not happening.

Below is a system image.

inserir a descrição da imagem aqui

That is, when we click on the button of the column "STAND BY", it changes the status of the column "STATUS" to the status STAND_BY. This change also occurs in the database.

If anyone can help me...

javascript jquery
  • 2

    This solution can help you: https://stackoverflow.com/questions/3519861/yes-or-no-confirm-box-using-jquery

2 answers

1

Hello, Thiago.

You can use a lib call Bootbox.js, remember that the bootbox works next to the Bootstrap.

Example of what the code would look like:

bootbox.confirm({
    message: "Deseja mesmo realizar essa alteração?",
    buttons: {
        confirm: {
            label: 'Sim',
            className: 'btn-success'
        },
        cancel: {
            label: 'Não',
            className: 'btn-danger'
        }
    },
    callback: function (result) {
        if(result) {
            //CÓDIGO QUE EFETUA AS ALTERAÇÕES....
        }
    }
});

  • did and it didn’t work. I put this code of yours inside my click event. So I put the code that makes the changes in the location you mentioned. However, Alert (from lib) is even called, but does not execute my code changes.

  • Replace all $(this) with $(". STAND_BY")

  • I’ll change my code so you can see how it looks

  • The button is the ". stand-by-column".

  • Ahhh cool, you tweaked and it worked?

  • It only performs the change on the first button of the list. It is not doing it correctly.

  • I will go back to the old code to see if anyone has another solution. This way it is a little complex and I thought it was too heavy. But thank you, @André Luis.

Show 2 more comments

0

Hi, take a look at the link: https://sweetalert2.github.io/ It is a custom type for js POP-UP boxes, it already comes all customized with various types of messages.

Browser other questions tagged javascript jquery

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