I have this code
var d = "";
$("#bntParametro").click(function () {
var ajaxParam = null;
ajaxParam = $.ajax({
type: "POST",
url: "sendTophp/consultarParametros.php",
}).done(function (param) {
d = '<tr>' +
'<th rowspan="3" >Acción</th>' +
'<th rowspan="3" >Categoria compoenete</th>' +
'</tr>' +
'<tr>' +
'<th colspan="2">Aliados</th>' +
'<th colspan="2">Cadenas</th>' +
'<th colspan="2">Constructor local</th>' +
'<th colspan="2">Constructor nacional</th>' +
'<th colspan="2">Exterior</th>' +
'<th colspan="2">Mayorista</th>' +
'<th colspan="2">Salas de venta</th>' +
'<th colspan="2">Saeta</th>' +
'</tr>' +
'<tr>' +
'<th>Aum cant</th>' +
'<th>Aum pre</th>' +
'<th>Aum cant</th>' +
'<th>Aum pre</th>' +
'<th>Aum cant</th>' +
'<th>Aum pre</th>' +
'<th>Aum cant</th>' +
'<th>Aum pre</th>' +
'<th>Aum cant</th>' +
'<th>Aum pre</th>' +
'<th>Aum cant</th>' +
'<th>Aum pre</th>' +
'<th>Aum cant</th>' +
'<th>Aum pre</th>' +
'<th>Aum cant</th>' +
'<th>Aum pre</th>' +
'</tr>';
for (var i in param) {
d += '<tr>' +
'<td><button type="button" id="btnEditar" data-toggle="tooltip" title="Editar" class="btn btn-danger btnEditar"><i class="fa fa-edit"></i></button></td>' +
'<th>' + param[i][0] + '</th>' +
'<td contenteditable="false">' + param[i][1] + '</td>' +
'<td contenteditable="false">' + param[i][2] + '</td>' +
'<td contenteditable="false">' + param[i][3] + '</td>' +
'<td contenteditable="false">' + param[i][4] + '</td>' +
'<td contenteditable="false">' + param[i][5] + '</td>' +
'<td contenteditable="false">' + param[i][6] + '</td>' +
'<td contenteditable="false">' + param[i][7] + '</td>' +
'<td contenteditable="false">' + param[i][8] + '</td>' +
'<td contenteditable="false">' + param[i][9] + '</td>' +
'<td contenteditable="false">' + param[i][10] + '</td>' +
'<td contenteditable="false">' + param[i][11] + '</td>' +
'<td contenteditable="false">' + param[i][12] + '</td>' +
'<td contenteditable="false">' + param[i][13] + '</td>' +
'<td contenteditable="false">' + param[i][14] + '</td>' +
'<td contenteditable="false">' + param[i][15] + '</td>' +
'<td contenteditable="false">' + param[i][16] + '</td>' +
'</tr>';
}
$("#tblGrid").append(d);
$(".btnEditar").click(function () {
var parametrosNuevos = [];
var currentTD = $(this).parents('tr').find('td');
var currentTD2 = $(this).parents('tr').find('th');
for (var j in currentTD2) {
var compo = currentTD2[j].innerText
parametrosNuevos.push(compo);
break;
}
for (var i in currentTD) {
if (i > "0") {
var conteo = parseInt(currentTD[i].innerText);
parametrosNuevos.push(conteo);
if (i == "16") {
break;
}
}
}
debugger
if ($(this).html() === '<i class="fa fa-edit"></i>') {
currentTD = $(this).parents('tr').find('td');
$.each(currentTD, function () {
$(this).prop('contenteditable', true)
});
} else {
$.ajax({
type: 'POST',
dataType: 'json',
url: "sendTophp/insertarParametros.php",
data: { parametrosNuevos }
}).done(function (respuesta) {
debugger
}).fail(function (response) {
});
$.each(currentTD, function () {
$(this).prop('contenteditable', false)
});
}
$(this).html($(this).html() == '<i class="fa fa-edit"></i>' ? '<i class="fa fa-check"></i>' : '<i class="fa fa-edit"></i>')
});
}).fail(function (responseErr) {
console.log("error" + responseErr);
});
and this is the modal
× Parameters Close Save
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
The problem I have is that I close and open the modal and it returns and loads the table n times and I don't know how to do it so that when it is closed, the modal is restarted and the data is reloaded.
You have the error because you never clean the body of the modal, that is, the first time you create the content of the table you close the modal and do not clean it, so that content remains plus the new one when you reopen the modal, for that bootstrap has created a handler of events, in your case you can use the event
hidden.bs.modal
which fires when your modal has closed:where #yourModal would be the id or class of your modal.
you need to add in the function that opens your modal, the following line
what this does is remove the previous content of the container, you can put it at the beginning of your function that opens the modal or in the function that you have to close the modal.
I hope it helps you, Greetings.