0

Boa tarde! Eu faço um requisição via AJAX para abrir uma modal. Listo um conjunto de dados e tenho a opção de eliminar o registo da tabela. O problema é que sempre que eu apago um registo a página dá refresh e a modal fecha. Haverá forma de manter a modal aberta e eliminar todos os registos que queria sem que ela se feche?

O código do botão onde chamo a modal é este, onde o $registos[0] é um id passado para a modal.

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

No click faço uma requisição via AJAX. O código é este:

    $.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");
                        }
                    });
                };

A modal que mostra o conteudo desta requisição é

<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>

E no ficheiro, del_at_modal.php, faço a query à tabela listo os campos que quero e no fim tenho este campo para eliminar o registo

<td title="Remover atleta da equipa"><a href="el_atleta_equipa.php?cod_atleta=' . $registos[0] . '">X</td>
2
  • Para fazer isso sem atualizar a página, vc teria que usar outro ajax.
    – Sam
    9/06/2018 às 15:52
  • @dvd e como se faria isso? onde implementaria outro ajax? 9/06/2018 às 16:00

2 Respostas 2

0

Usando o ev.preventDefault(); como no exemplo abaixo

$(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();
    });
});
3
  • não consigo adaptar a sua solução no meu código... não funciona para o que pretendo fazer! Obrigado na mesma 9/06/2018 às 15:21
  • Então Tiago, ajudaria se você colasse aqui o código da função que seu botão delete. Com as informações que você forneceu o máximo que podemos fazer é te dar o caminho para a solução.
    – echojn
    9/06/2018 às 15:31
  • já detalhei tudo sobre o meu código :) 9/06/2018 às 15:39
0

Você vai precisar chamar outro Ajax para fazer isso.

Primeiro é preciso fazer umas alterações no seu link <a>. É preciso fechá-lo com </a>. No seu código ele não está fechado, veja:

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

Inclua uma classe no <a> para que possamos pega-la pelo class. Altere o href para href="#" e inclua um atributo data-id com o código que será eliminado. Seu <a> deve ficar desta forma abaixo:

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

Agora é preciso criar um 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
      }
   });
});

É basicamente isso.

O interessante é retornar do PHP um echo dizendo que ocorreu tudo certo. Esse echo será retornado no Ajax pela variável data, então você poderá enviar o valor de data para a div com a mensagem de retorno.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .