Remove record in database without giving refresh

Question

Buenas! I looked for some topics about the same doubt as mine - and I found, but I could not understand how to do... I have the following code snippet:

$c = array();
$c = buscaUsuario($conexao);

while($b = mysqli_fetch_assoc($c))
{?>
   <tr>
   <td><?php echo $b["user_name"]; ?></td>
   <td><?php echo $b["user_fullname"]?></td>
   <td><?php echo $b["user_email"]?></td>
   <td>
      <div class="btn-group">
        <a class="btn btn-primary" href="#"><i class="icon_plus_alt2"></i></a>
        <a class="btn btn-danger" onclick="deletarUsuario();"><i class="icon_close_alt2"></i></a>
      </div>
   </td>

And when you click the delete button it will call a js function called deletarUsuario(), where the id of that item will be passed. In this function, this is where I have to use Ajax, but I don’t know how to do it! I don’t know how to join the query of delete + javascript + ajax.

The reason I want to do this, is that by clicking the remove such item button, it removes without needing me to refresh the page.

This. With the $b variable I can recover the id, like this:

$b['id'];

As I have no idea how to use Ajax, I was doing it this way:

   <a class="btn btn-danger" href="procura-cadastro.php?id=<?php echo   $b['id'] ?>">

    <?php
       if(array_key_exists("id", $_GET) && $_GET['id'] == $b['id'])
       {
                $a = $_GET['id'];
                $b = deletaUsuario($conexao, $a);
       }

        }
             ?>

Answer 1

You will do so:

$(".deletaUser").on('Click', deletarUsuario);

    function deletarUsuario(e){

        e.preventDefault();

        dados = {
            id : $(this).data('id')
        };

        $.ajax({
            url            : "deleta-item.php",
            type           : "POST",
            dataType       : 'JSON',
            data           : dados  
        }).done(function(data) {
          // aqui você faz alguma ação para quando o ajax retornar
        });
    }

<buttom class="deletaUser" data-id="<?php echo $b['id']; ?>">Deletar</buttom>

Then just get the $_POST['id'] in the archive deleta-item.php and run the query there

EDIT:

I changed the way I called the function, take the <a> who currently calls her and puts the button I mentioned there, there changes the JS also.

Answer 2

You can do it this way:

Add the jQuery library to the head of your document if you are not using it. You can download here .

On the tr of your table, put a unique id which will be used to hide tr after delete. Note that in the delete link I added a data-id which will be used in javascript to specify the user to be deleted and a class delete. If you want to use onclick you will have to pass the user id as parameter.

HTML

<tr id="tr_<?php echo $b["id"]; ?>">
   <td><?php echo $b["user_name"]; ?></td>
   <td><?php echo $b["user_fullname"]?></td>
   <td><?php echo $b["user_email"]?></td>
   <td>
      <div class="btn-group">
        <a class="btn btn-primary" href="#"><i class="icon_plus_alt2"></i></a>
        <a class="btn btn-danger deletar" data-id="<?php echo $b["id"]; ?>"><i class="icon_close_alt2"></i></a>
      </div>
   </td>

In the code that does the deletion process by PHP return [error => false] if the user is successfully deleted or ['error' => 'Mensagem informando alguma inconformidade'] that will be captured in the ajax Success.

JS

function deletarUsuario(id_usuario)
{
      $.ajax({
         url: 'sua url para excluir',
          type: 'post',
          data:{
           id: id_usuario
         },
         success: function(response)
         {
              if (!response.error) {

                $('#tr_'+id_usuario).fadeOut('slow');
              } else {
                alert(response.error);
              }
         },
         error: function(xhr)
         {
            alert(xhr.responseText);
         }
      });
}

$(function(){

    $(document).on('click','.deletar',function(){
        deletarUsuario($(this).data('id'));
        return false;
    });
});

Note that this was just a basic example of implementation. My code can be improved.