restart table when closing modal

Question

restart table when closing modal

Navigation

#1 by (4 votes)
#2 by (2 votes)

1

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 comes back and I load the table n times and I do not know how to do it so that when it is closed, the modal will be restarted and I will reload the data.

javascript jquery html

asked by Eduard 27.09.2018 в 19:00

source

2 answers

2

you need to add the following line in the function that opens your modal

$("#tblGrid").html('');

This what it does is remove the previous contents of the container, you can put it at the beginning of your function that opens the modal or in the function you have to close the modal.

I hope it serves you, Regards.

answered by 27.09.2018 в 19:08

Adjust Columns of 2 HTML tables Cognitive complexity in Factory class

score 4 · Accepted Answer

The error is 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 you do not clean then that content remains the new one when you return to open the modal, for that bootstrap has created an event handler, in your case you can use the hidden.bs.modal event which is triggered when your modal has been closed:

$('#tuModal').on('hidden.bs.modal', function () {
  $('#tuModal .modal-body').find("#tblGrid").html("");
});

where #tuModal would be the id or the class of your modal.