How to delete registration in a modal without it closing?

Question

How to delete registration in a modal without it closing?

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good afternoon! I make a request via AJAX to open a modal. I have a dataset ready and I have the option to delete the record from the table. The problem is that whenever I delete a record the page gives refresh and modal date. Is there a way to keep the modal open and delete all the records I wanted without it closing?

The code of the button where I call the modal is this, where the $ records [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 that shows the content 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 ready table the fields I want and in 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>

php javascript jquery ajax

asked by anonymous 09.06.2018 / 16:59

2 answers

Segmentation fault in function read_line How to separate the name in a variable in prolog?

score 0 · Answer 1

Using 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();
    });
});

score 0 · Answer 2

You will need to call another Ajax to do this.

First you need to make some changes to your <a> link. You must close it with </a> . In your code it is 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 get it by class . Change the href to href="#" and include a data-id attribute with the code that will be deleted. Your <a> should look like this below:

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

Now you 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 that everything happened. This echo will be returned in Ajax by the data variable, so you can send the data value to div with the return message.