Duplication in Datatables.net jquery

1

I have Modal window that adds Client Address, the problem is that the added addresses are duplicated, I'm using Datatables.net to list the addresses.

The process to add the addresses is executed in the client, that is, you can add n addresses to the client and then send them to the DB.

Duplication occurs on the Client before it is even sent to the DB.

HTML

<table id="tblEndereco" class="table table-hover table-bordered table-condensed table-responsive table-striped small" style="cursor:pointer">

                        <thead>
                            <tr>
                                <th>Logradouro</th>
                                <th>Numero</th>
                                <th>Bairro</th>
                                <th>CEP</th>
                                <th>Cidade</th>
                                <th>UF</th>
                                <th></th>
                                <th></th>
                            </tr>
                        </thead>
                        @if (Model.Enderecos != null)
                        {
                            foreach (var item in Model.Enderecos)
                            {
                                @Html.Partial("_PartialEndereco", item)
                            }
                        }

                    </table>

Add button

$('.btnAdicionarEndereco').on('click', function (e) {
            e.preventDefault();

                var _logradouro = $('#Logradouro').val();
                var _numero = $('#Numero').val();
                var _bairro = $('#Bairro').val();
                var _cep = $('#CEP').val();
                var _cidade = $("#SelCidade :selected").text();
                var _uf = $('#SelUF').val();

                    $("#tblEndereco tbody").append("<tr class='novo' id='' data-clienteid=" + $('#hidClienteID').val() + " data-tipoenderecoid="+ $('#SelTipoEndereco').val() +" data-cidadeid="+ $('#SelCidade').val() +">" +
                                                        "<td style='width:25%'>" + _logradouro + "</td>" +
                                                        "<td style='width:3%'>" + _numero + "</td>" +
                                                        "<td style='width:20%'>" + _bairro + "</td>" +
                                                        "<td style='width:10%'>" + _cep + "</td>" +
                                                        "<td style='width:17%'>" + _cidade + "</td>" +
                                                        "<td style='width:5%'>" + _uf + "</td>" +
                                                        "<td><a href='#' class='glyphicon glyphicon-remove'></a></td>" +
                                                        "<td><a href='#' class='glyphicon glyphicon-edit'></a></td>" +
                                                    "</tr>");


                    $('#modalEndereco').modal('hide');
            };
        });
    
asked by anonymous 06.10.2016 / 00:46

1 answer

0

Resolved, the problem was the <tbody> tag that was in the wrong place, ie within the foreach loop.

    
06.10.2016 / 20:59