0

Tenho uma página web que exibe uma lista de pessoas cadastradas no meu BD. Cada nome é um hyperlink que, ao clica-lo, uma função Ajax abre um modal contendo informações específicas da pessoa e deixa selecionado os radio buttons de acordo com os dados de cada pessoa. Por exemplo, se uma pessoa foi aprovada, o radio button "Aprovado" é exibido marcado, e o Reprovado desmarcado.
Ok, até aqui funciona perfeitamente.
Porém, no "complete" dessa primeira função Ajax, eu coloquei outra função Ajax. A ideia dessa segunda função seria de pegar os valores marcados nos radio button do modal e dar um UPDATE no banco (isso depois de clicar num botão "salvar alterações"). Assim seria exibido um alerta dizendo que as alterações foram efetuadas com sucesso e fecharia o modal.
O problema é: eu consigo alterar perfeitamente os dados da primeira pessoa, e o alerta é exibido uma vez. Quando eu altero uma segunda pessoa, os dados da primeira são alterados novamente (e ficam iguais as alterações que eu fiz nessa segunda pessoa) e o alerta é exibido 2 vezes. O mesmo acontece quando eu altero a terceira pessoa, e o alerta é exibido 3 vezes e assim por diante.

Alguém pode me dar uma luz?

Abaixo as funções Ajax e depois o HTML do modal:

$(".candidatoTeste").live("click", function () {

                var n_insc = $(this).attr("id");
                var nome = $(this).attr("name")
                $.ajax({
                    dataType: 'json',
                    url: 'teset.php', //Essa página simplesmente dá um SELECT no banco de acordo com o id da pessoa vindo do HTML, e retorna o seu resultado
                    data: {n_insc: n_insc},
                    success: function (retorno) {

                        var doc_recebida = retorno[0];
                        var doc_aprovada = retorno[1];
                        var status = retorno[2];

                        //Altera o titulo e subtitulo do modal 
                        $('.modal-title').text(nome);
                        $('.modal-subtitle').text(n_insc);

                        //Documentação Aprovada
                        if (doc_aprovada === "Sim") {
                            $('#myModal').find(':radio[name=DocAprovada][value="Sim"]').prop('checked', true);
                        } else if (doc_aprovada === "Não") {
                            $('#myModal').find(':radio[name=DocAprovada][value="Não"]').prop('checked', true);
                        }
                        //Documentação Recebida
                        if (doc_recebida === "Sim") {
                            $('#myModal').find(':radio[name=DocRecebida][value="Sim"]').prop('checked', true);
                        } else if (doc_recebida === "Não") {
                            $('#myModal').find(':radio[name=DocRecebida][value="Não"]').prop('checked', true);
                        }
                        //Resultado FInal
                        if (status === "Aprovado") {
                            $('#myModal').find(':radio[name=Status][value="Aprovado"]').prop('checked', true);
                        } else if (status === "Reprovado") {
                            $('#myModal').find(':radio[name=Status][value="Reprovado"]').prop('checked', true);
                        }
                        //Mostra o modal
                        jQuery("#myModal").modal('show');



                    },
                    error: function (err) {
                        console.log("AJAX error in request: " + JSON.stringify(err, null, 2));
                    },

                    complete: function () {
                        $("#BotaoAlterar").on("click", function () {
                            var doc_recebida = $('input[name=DocRecebida]:checked').val();
                            var doc_aprovada = $('input[name=DocAprovada]:checked').val();
                            var status = $('input[name=Status]:checked').val();

                            $.ajax({
                                type: 'GET',
                                url: 'updateDados.php', //Já esse, dá um UPDATE no BD de acordo com os valores que estão "checked" no modal.
                                async: true,
                                data: {doc_recebida: doc_recebida,
                                    doc_aprovada: doc_aprovada,
                                    status: status,
                                    n_insc: n_insc },
                                success: function () {
                                    alert("retorno");
                                    $('#myModal').modal('hide');
                                },
                                error: function (err) {
                                    console.log("AJAX error in request: " + JSON.stringify(err, null, 2));
                                }
                            })

                        })
                    }
                });
            }
            );
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">Nome do inscrito</h4>
                                            <h5 class="modal-subtitle">Numero de inscricao do inscrito</h5>
                                        </div>
                                        <div class="modal-body" id="myModalBody" style="overflow-x: scroll;">
                                            <p>Documentação Recebida:</p>
                                            <label class='radio inline span1'>
                                                <input id='DocAprovada' name='DocRecebida' type='radio' value='Sim' /> Sim
                                            </label>
                                            <label class='radio inline span1'>
                                                <input id='DocAprovada' name='DocRecebida' type='radio' value='Não'/> Não <br>
                                            </label>
                                            <br></br>
                                            <p>Documentação Aprovada:</p>
                                            <label class='radio inline span1'>
                                                <input id='DocAprovada' name='DocAprovada' type='radio' value='Sim'/> Sim 
                                            </label>
                                            <label class='radio inline span1'>
                                                <input id='DocAprovada' name='DocAprovada' type='radio' value='Não'/> Não <br>
                                            </label>
                                            <br></br>                                            
                                            <p>Resultado Final:</p>
                                            <label class='radio inline span1'>
                                                <input id='DocAprovada' name='Status' type='radio' value='Aprovado' /> Aprovado
                                            </label>
                                            <label class='radio inline span1'>
                                                <input id='DocAprovada' name='Status' type='radio' value='Reprovado'/> Reprovado <br>
                                            </label>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                            <button type="button" name="<?php $n_inscricao ?>" id="BotaoAlterar" class="btn btn-primary">Save changes</button>
                                        </div>
                                    </div>
                                </div>
                            </div>

6
  • nao utilize mais live, utilize on, porem, acho que esse nao é seu problema (mas é bom frizar). Commented 30/08/2017 às 19:24
  • Você tem certeza de que esse segundo ajax poderia funcionar assim como colocou? Não seria melhor colocá-lo separado e passar também o id Commented 30/08/2017 às 19:32
  • Como eu poderia pegar esse ID? Você diz para fazer uma chamada de função no "Complete" do primeiro Ajax? Commented 30/08/2017 às 19:40
  • você poderia passar o id para o modal criando um input hidden lá dentro apenas para vc pegar o valor, também acredito que isso esteja sendo causado pelo ajax dentro do complete Commented 31/08/2017 às 0:18
  • Use uma função Ajax separada para cada propósito: uma para abrir o modal com os dados da pessoa e outra para salvar e fechar.
    – Sam
    Commented 31/08/2017 às 0:21

1 Resposta 1

0

Acredito que o problema seja o seguinte, toda vez que a função no método 'complete' é chamada, é adicionado o evento 'click' no botão e este evento não é removido, então, quando você abre o modal pela segunda vez o primeiro evento clique que foi criado também é disparado.

Uma solução é você remover o evento clique antes de adicionar um novo. Tenta colocar da seguinte forma:

 $("#BotaoAlterar").off("click").on("click", function () {});

Espero ter ajudado

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 .