How to eliminate registration in a modal without closing?

Question

Good afternoon! I make a request via AJAX to open a modal. I list a data set and have the option to delete the record from the table. The problem is that whenever I delete a record the page gives refresh and the modal closes. There will be a way to keep the modal open and delete all the records you wanted without it closing?

The button code I call the modal is this, where $registrations[0] is an id passed to the modal.

<button type='button' class='btn btn-info' style='outline: 0;' onclick='$.fn.del(" . $registos[0] . ")'>Plantel</button>

In the click I make a request via AJAX. The code is this:

    $.fn.del = function (id) {
                    var a = id;
//                    alert(a);
                    $.ajax({
                        url: "del_at_modal.php",
                        method: "POST",
                        data: {id: a},
                        success: function (data) {
                            $("#form_del_at").html(data);
                            $("#del_at").modal("show");
                        }
                    });
                };

The modal showing the contents of this request is

<div class="modal fade" id="del_at" data-backdrop="static">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal">&times;</span></button>
                            <h2 class="modal-title">Adicionar atletas à equipa </h2>
                        </div>
                        <div class="modal-body" id="form_del_at"></div>
                        <div class="modal-footer">
                            <input type='reset' name='cancelar' class="btn" value='Cancelar' /> 
                            <button type="submit" class="btn btn-success" name="novos_t">Adicionar equipa técnica</button>
                        </div>
                    </div>
                </div>
            </div>

And in the file, del_at_modal.php, I query the table list the fields I want and at the end I have this field to delete the record

<td title="Remover atleta da equipa"><a href="el_atleta_equipa.php?cod_atleta=' . $registos[0] . '">X</td>

Answer 1

Using the ev.preventDefault(); as in the example below

$(function () {
    var frm = $('#contactForm1');
    frm.submit(function (ev) {
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('ok');
            }
        });
        ev.preventDefault();
    });
});

Answer 2

You’ll need to call another Ajax to do this.

First you need to make some changes to your link <a>. You have to close it with </a>. In your code it’s not closed, see:

<td title="Remover atleta da equipa">
   <a href="el_atleta_equipa.php?cod_atleta=' . $registos[0] . '">X
</td>                                                              ↑
                                                        faltou fechar a tag <a>

Include a class in <a> so we can catch her by class. Change the href for href="#" and include an attribute data-id with the code that will be deleted. Your <a> should stay this way below:

  classe incluída
     ↓
<a class="el_atleta" href="#" data-id="'.$registos[0].'">X</a>
                                 ↑
                    dataset com o código do atleta

Now we need to create an Ajax:

$(document).on("click", ".el_atleta", function(e){

   e.preventDefault(); // evita redirecionamento ao clicar no <a>

   $.ajax({
      url     : 'el_atleta_equipa.php',
      type    : 'get',
      data    : { cod_atleta: $(this).data("id") }, // envia o id do atleta
      success : function(data){
         $("#form_del_at").html("Atleta deletado!"); // altera o conteúdo da div
      }
   });
});

That’s basically it.

The interesting thing is to return from PHP a echo saying it all went right. This echo will be returned in Ajax by variable data, then you can send the value of data to the div with the return message.