0
I have a web page that displays a list of people registered in my comic book. Each name is a hyperlink that, when clicking it, an Ajax function opens a modal containing specific information of the person and leaves selected the radio Buttons according to the data of each person. For example, if a person has passed, the "Approved" radio button is displayed marked, and the Failed.
Okay, 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 take the values marked in the radio button of the modal and to give an UPDATE in the bank (that after clicking on a button "save changes"). Thus a warning would be displayed saying that the changes were made successfully and would close the modal.
The problem is, I can perfectly alter the first person’s data, and the alert is displayed once. When I change a second person, the data of the first person is changed again (and it equals the changes I made in that second person) 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.
Someone can give me a light?
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>
no more use
live, utilizeon, however, I think this is not your problem (but it is good to cool).– Rafael Augusto
Are you sure that this second ajax could work just like it did?
– Catana Rahmeier
How could I get this ID? You say to make a function call in the "Complete" of the first Ajax?
– Tales Segundo
you could pass the id to the modal by creating a Hidden input in there just for you to pick up the value, also I believe this is being caused by ajax inside the complete
– Reynnan Viktor
Use a separate Ajax function for each purpose: one to open the modal with the person’s data and another to save and close.
– Sam
Right! I’ll try here. I really appreciate everyone’s comments.
– Tales Segundo