Remove row from table after deleting via AJAX

Question

Remove row from table after deleting via AJAX

Navigation

#1 by (1 votes)

0

I have a table that shows student records, and each row has a button to delete the student, and the deletion is done via AJAX. I would like to give a fadeOut on the line that is deleted, so in the AJAX success I did the following:

success:function(){
                swal("Excluído!", "O aluno foi removido com sucesso.", "success");
                btnExcluir.closest('tr').fadeOut();
            }

The problem is that all rows are being removed. I've also tried with parent (). Parent () but the same thing happens anyway.

Here's the snippet from my table:

<tr>
    <td>{{$aluno['NM_NIS_ALU']}}</td>
    <td>{{$aluno['ST_NOME_ALU']}}</td>
    <td class="text-right">{{$aluno['IDADE']}}</td>
    <td class="text-center">
        <a class="btn btn-primary btn-xs acao" data-toggle="modal" data-target="#modalAluno{{$aluno['ID_ALUNO_ALU']}}"><i class="fa fa-edit"></i> Editar</a>
        <a class="btn btn-danger btn-xs acao delete-aluno" data-token="{{csrf_token()}}" data-id="{{$aluno['ID_ALUNO_ALU']}}"><i class="fa fa-times"></i> Excluir</a>
    </td>
</tr>

If someone can help me, why is this happening?

php javascript jquery ajax front-end

asked by anonymous 18.05.2017 / 02:29

1 answer

How to install phpize headers Problems with form using PHP with Laravel

score 1 · Accepted Answer

Get the tr element before doing the ajax request and after a fadeOut.

You are picking up all elements that have the class delete-aluno and getting their trs , so it will return 3 trs (in the example below) and not just one.

You have to get the tr element referring to the delete-aluno you are doing the onclick action.

Here is a working example.

index.php

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <script>
        $(function() {
            $(".delete-aluno").click(function() {
                var $tr = $(this).closest("tr");

                $.ajax({
                    type: 'post',
                    url: 'retornoAjax.php',
                    data: {

                    },
                    dataType: 'json',
                    success: function(retorno){
                        if (retorno.success) {
                            $tr.fadeOut();
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
    <table>
        <tr>
            <td>Diego</td>
            <td class="text-center">
                <a class="btn btn-primary btn-xs acao"><i class="fa fa-edit"></i> Editar</a>
                <a class="btn btn-danger btn-xs acao delete-aluno"><i class="fa fa-times"></i> Excluir</a>
            </td>
        </tr>
        <tr>
            <td>Diego 2</td>
            <td class="text-center">
                <a class="btn btn-primary btn-xs acao"><i class="fa fa-edit"></i> Editar</a>
                <a class="btn btn-danger btn-xs acao delete-aluno"><i class="fa fa-times"></i> Excluir</a>
            </td>
        </tr>
        <tr>
            <td>Diego 3</td>
            <td class="text-center">
                <a class="btn btn-primary btn-xs acao"><i class="fa fa-edit"></i> Editar</a>
                <a class="btn btn-danger btn-xs acao delete-aluno"><i class="fa fa-times"></i> Excluir</a>
            </td>
        </tr>
    </table>
</body>
</html>

returnAjax.php

<?php
echo json_encode(array("success" => "true"));