I have a web page that displays a list of people registered in my DB. Each name is a hyperlink that, when clicked, an Ajax function opens a modal containing information specific to the person and leaves the radio buttons selected according to the data of each person. For example, if a person was approved, the "Approved" radio button is displayed marked, and the Disapproved radio button is displayed. Ok, so far it works perfectly. However, in the "complete" of this first Ajax function, I put another Ajax function. The idea of this second function would be to get the values marked in the radio button of the modal and give an UPDATE in the bank (this after clicking a button "save changes"). Thus an alert would appear saying that the changes were made successfully and would close the modal. The problem is: I can change the first person data perfectly, and the alert is displayed once. When I change a second person, the data of the first person is changed again (and the changes that I made in the second person are the same) and the alert is displayed 2 times. The same happens when I change the third person, and the alert is displayed 3 times and so on.
Can anyone give me a light? Home Below the Ajax functions and then the modal HTML:
$(".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">×</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>