Delete tabletr with Ajax and PHP

0

:

<tr>
    <td><?= $client['name']; ?></td>
    <td><?= $client['email']; ?></td>
    <td><?= $client['tell']; ?></
    <td class="text-center"><button id="delete" class="glyphicon glyphicon-remove"></button></td>
</tr>

and java script:

$("#delete").click(function(){
    var id = $(this).attr("id");
    var request = $.ajax({
        type: "POST",
        data: "id="+id,
        url: "/removeClient",
        dataType: "json"
    });

    return false;
});

The part of php I solve .. I just want to get a $ _POST ['id'] and go to the method that will delete the record. Thanks!

    
asked by anonymous 18.04.2017 / 22:29

2 answers

0

First put an id in your tr, and change the delete from id to class, and put a date attribute with the id on the button

   <tr class="tr_<?= $client['id']; ?>">
        <td><?= $client['name']; ?></td>
        <td><?= $client['email']; ?></td>
        <td><?= $client['tell']; ?></
        <td class="text-center"><button data-id="<?= $client['id']; ?>" id="delete" class="delete glyphicon glyphicon-remove"></button></td>
    </tr>

Then, make the request, and have php return 1 for deletion, and 0 for error.

$(document).on('click', '.delete', function () {
    var id = $(this).data('id');
    $.ajax({
        type: "POST",
        url: "pagina.php",
        data: {id: id},
        dataType: 'json',
        success: function (data)
        {
            var retorno = data;

            if(retorno === 1){
               $('.tr_'+id).empty().hide();
            }else{
               alert('erro no php');
            }
        }
    });
});

I did not test the code, but I think if it's not right, it's pretty close.

    
18.04.2017 / 22:45
0

I was able to solve it here as follows.

$(function() {
    $(".delete").click(function(){
    var element = $(this);
    var id = element.attr("id");
    var info = 'id=' + id;

    if(confirm("Deseja realmente Deletar cliente id:   " + id)) {
        $.ajax({
            type: "POST",
            url: "/removeClient",
            data: info,
            success: function () {
            }
        });

        $(this).parents("#show").animate({backgroundColor: "#003"}, "slow").animate({opacity: "hide"}, "slow");
    }

    });
});

This is working and deletes the row after the confirm returns true, but I would like to know how I can customize this confirm, or use some modal.

    
19.04.2017 / 15:41