1

Tenho dois botões na minha tabela, o botão de editar e de delete:

<td><button type="button" name="edit" id="<?php echo $produto2["Id"]; ?>" data-target="#add_data_Modal2" class="btn btn-warning btn-sm edit_data2" ><span class="glyphicon glyphicon-pencil"></span></button></td>
<td><button type="button" id="<?php echo $produto2["Id"]; ?>" class="btn btn-dander btn-sm delete2" onsubmit="remove(this)"><span class="glyphicon glyphicon-trash"></span></button></td>

Com o botão editar chamo o modal que tem o botão gravar, como mostro no código:

<button type="button" class="btn btn-success" onclick="inserir_registo2();">Gravar</button>

O problema é se abrir o modal e voltar a fechar sem clicar no botão de gravar o botão delete funciona correctamente. Mas a partir do momento que abro o modal para editar e clico no botão gravar, o botão delete não funciona mais até atualizar a página.

Deixo aqui a função inserir_registo:

function inserir_registo2()
{  

    var dadosajax = {
        'Id' : $("#Id2").val(),
        'DataTermino' : $("#DataTermino").val(),
        'Tratamento' : $("#Tratamento").val(),
        'Estado' : $("#Estado2").val(),
        'Prestador' : $("#Prestador").val()
    };
    $.ajax({
        url: './resolucaomanutencao',
        type: 'POST',
        cache: false,
        data: dadosajax,
        error: function(){
          $(".error_message").removeClass('hide');
        },
        success: function(result)
        { 
        $("#add_data_Modal2").modal("hide");
        $("#spoiler2").load(" #spoiler2 > *");
        }   
    });
}

função delete:

 remove = function(item) {

    var tr = $(item).closest('tr');

    tr.fadeOut(400, function() {
      tr.remove();  
    });

    return false;
  }

$(".delete2").click(function(){
        var id = this.id;
        if(confirm('Tem certeza de que deseja excluir a requisição?'))
        {
        $.ajax({ 
            url: "./deleterequisicao2", 
            type: "get",
            cache: false,           
            data: {id: id}, 
        error: function() {
                  alert('Algo está errado!');
               },
        success: function(data) {

                    $("#"+id).remove();
                    alert("Requisição removida com sucesso");
                    $("#spoiler2").load(" #spoiler2 > *");          
               }           
});

        }
});

Função do botão editar:

$(document).on('click', '.edit_data2', function(){  
           var employee_id2 = $(this).attr("Id");          
           $.ajax({  
                url:"./editarmanutencao",  
                method:"POST",
                cache: false,               
                data:{employee_id2:employee_id2},               
                dataType:"json",  
                success:function(data){

                    console.log(data);
                     $('#Id2').val(data.Id);
                     $('#Tratamento').val(data.Tratamento);
                     $('#Estado2').val(data.Estado);
                     $('#Prestador').val(data.Prestador);
                     $('#employee_id2').val(data.Id);                    
                     $('#insert2').val("Gravar");  
                     $("#add_data_Modal2").modal("show");                    
                }  
           });

      });  
16
  • E cadê a função function remove(data) { ... } ? 5/09/2019 às 17:12
  • @Ivan Ferrer já atualizei a pergunta com a função delete
    – Bruno
    5/09/2019 às 17:14
  • você está usando modal: onsubmit, acho que é onclick, se vc usar onsubmit, vai submeter o form... 5/09/2019 às 17:16
  • @Ivan Ferrer Mas se colocar onclick, se fizer cancelar retira a linha da tabela e não devia
    – Bruno
    5/09/2019 às 17:19
  • em vez de colocar onclick ou onsubmit, deixe vazio, e chama o método remove() no retorno da ação de $(".delete2") 5/09/2019 às 17:21

2 Respostas 2

6

1) Mude no seus botões:

Editar (que abre o modal):

<button type="button" name="edit" data-id="<?php echo $produto2["Id"]; ?>" id="open_<?php echo $produto2["Id"]; ?>" data-target="#add_data_Modal2" class="btn btn-warning btn-sm edit_data2" ><span class="glyphicon glyphicon-pencil"></span></button>

Deletar:

<button type="button" data-id="<?php echo $produto2["Id"]; ?>" id="delete_<?php echo $produto2["Id"]; ?>" class="btn btn-dander btn-sm delete2"><span class="glyphicon glyphicon-trash"></span></button>

Na sua <tr> que é o container do elemento listado, acrescente:

data-itemid="<?php echo $produto2["Id"]; ?>"

2) no JavaScript:

$(".delete2").click(function(){
        var id = $(this).data('id');
        $el = $("tr [data-itemid]");  
        if (confirm('Tem certeza de que deseja excluir a requisição?')) {
            $.ajax({ 
                url: "./deleterequisicao2", 
                type: "get",
                cache: false,           
                data: {id: id}, 
                error: function() {
                    alert('Algo está errado!');
                },
                success: function(data) {

                     $el.fadeOut(400, function() {
                         $el.remove();  
                         alert("Requisição removida com sucesso");
                         $("#spoiler2").load(" #spoiler2 > *");      
                     });

               }           
          });

       }
});
4
  • descobri qual era o problema e era por causa desta linha: $("#spoiler2").load(" #spoiler2 > *");, isto é que faz com que o id se repeti, como posso fazer o mesmo sem acontecer isso?
    – Bruno
    6/09/2019 às 17:20
  • 1
    Fazendo exatamente como eu falei, use classe ao invés de ID. 9/09/2019 às 10:54
  • Embora esta seja a solução, poderia ser melhorada se explicasse a causa do problema e depois sim, oferecesse a solução.
    – Leite
    11/09/2019 às 10:04
  • E pra que vc precisa fazer esse carregamento? $("#spoiler2").load(" #spoiler2 > *"); no seu código não está especificado. 11/09/2019 às 10:31
1
+50

Ao usar AJAX, sempre use a forma delegada dos eventos.

Em vez de usar:

$(".delete2").click(function(){

Use:

$(document).on("click", ".delete2", function(){

O objeto document é sempre atualizado. Informações sobre o método .on() você encontra na documentação oficial do jQuery -> https://api.jquery.com/on/

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 .