0

Tenho essa jquery

<script type="text/javascript">
    $(document).ready(function () {
        $("#GrupoDescontos").change(function () {
            $.ajax
            ({
                url: '' + $(this).val(),
                type: 'GET',
                success: function (dados) {
                    $("#GridPartial").html("");
                    $("#GridPartial").html(dados);
                    var resultado = dados;
                },
                error: function (erro) {

                }
            });
        });
    });

Quando entro na tela pela primeira vez, é carregado a tela detail. depois ao selecionar a Dropdown a grid é recarregada, mas o problema é a tela que entra pela primeira vez, sem o change da Dropdown, não é limpa pelo comado da jquery $("#GridPartial").html("");, ficando dois grids encavalado e é carregado informações duplicada da primeira tela que não existe na partial view, como titulo, por exemplo. Como eu limpo isso?

EDIT1

Veja como fica a tela toda embaralhada com dois grids inserir a descrição da imagem aqui

EDIT2

View

@model Site.Areas.API.Models.AzureDiscountGroups.AzureDiscountGroupModel
@using SubscriptionCenter.API.Models.Resellers


<style>
    .Makewide {
        width: 200px;
    }
</style>

<div>
    <h4></h4>
    <hr />
    @Html.ValidationSummary(true, "", new { @class = "text-danger" })
    @Html.HiddenFor(model => model.Id)

    <div class="form-group">
        @Html.Label("Grupo de Desconto", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("GrupoDescontos", new SelectList(ViewBag.Desconto, "Id", "Descricao"), new { @id = "GrupoDescontos", @class = "Makewide" })
            @*@Html.ValidationMessageFor(model => model.HomeTemplateId, "", new { @class = "text-danger" })*@
        </div>
    </div>

</div>

<div id="GridPartial"></div>

@Html.Partial("DetailsPartial")

<p>
    @Html.ActionLink("Back to List", "Index")
</p>

<script type="text/javascript">
    $(document).ready(function () {
        $("#GrupoDescontos").change(function () {
            var $div = $('#GridPartial');
            $.ajax
            ({
                url: '' + $(this).val(),
                type: 'GET',
                    success: function (dados) {
                        $div.html('');
                        $div.html(dados);
                },
                    error: function (erro) {
                }
            });
        });
    });

    $(document).ready(function () {
        $("#GrupoDescontos").val("@ViewBag.Indice");
    });
</script>

e a PartialView

<table class="table">
    <tr>
        <th>
            Nome
        </th>
        <th>
            Alias
        </th>
        <th>
            WhiteLabel?
        </th>
        <th>
            MPN Id
        </th>
        <th>
            Criada em
        </th>
    </tr>

    @foreach (var item in ViewBag.DetailReseller as List<ResellerListModel>)
    {
        <tr align="center">
            <td>
                @(item.Name)
            </td>
            <td>
                @(item.Alias)
            </td>
            <td>
                @(item.WhiteLabel ? "Sim" : "Não")
            </td>
            <td>
                @(item.MpnId)
            </td>
            <td>
                @(item.CreatedOn)
            </td>
        </tr>
    }
</table>
1
  • ja tentou dar um console.log ("teste") ali pra saber se o código está chegando até la? 2/04/2019 às 22:56

2 Respostas 2

3

O problema é que sua div está vazia, o conteúdo que você quer substituir está pra fora dela, por isso o conteúdo é duplicado quando vem da partialView. Para que o conteúdo da partial seja substituído faça conforme exemplo abaixo, colocando todo conteúdo da partial pra dentro da div atualizada no ajax:

<div id="GridPartial">
    @Html.Partial("DetailsPartial")
</div>

No ajax, fica assim:

$(document).ready(function () {
    $('#GrupoDescontos').change(function () {
        var $div = $('#GridPartial');
        $.ajax
        ({
            url: '' + $(this).val(),
            type: 'GET',
            success: function (dados) {
                $div.html(dados);
            },
            error: function (erro) {
                alert('Ops...');
            }
        });
    });
});
8
  • George, não consegui limpar. Como disse a primeira tela não vem da jquery, mas da Index mas populo com a Partial View, não sei se isso tem algo a ver, mas fica como observação
    – pnet
    3/04/2019 às 0:04
  • @pnet, poste o cshtml da sua view e da partial... é o mesmo dessa sua outra pergunta (pt.stackoverflow.com/q/373083/35358)? 3/04/2019 às 0:06
  • @pnet, eu sei, por lá já percebi o problema, está no html... atualizei a resposta hehe 3/04/2019 às 0:11
  • Cara, consegui colocar um grid apenas, show. O cabeçalho(Dropdown) e o Rodapé estão se repetindo, sabe o que pode ser?
    – pnet
    3/04/2019 às 0:14
  • @pnet Isso por que o html que vem no seu ajax vem com o cabeçalho tbm... já que está vindo a página completa vc deve colocar todo o conteúdo pra dentro da sua div 3/04/2019 às 0:17
1

Olá, boa noite!

O comando para limpar é:

$("#GridPartial").empty();
$("#GridPartial").html("seu conteúdo");
5
  • Mas já fiz isso e nada aconteceu
    – pnet
    2/04/2019 às 22:25
  • Fiz asim e não limpou: ` $("#GridPartial").empty(dados);`
    – pnet
    2/04/2019 às 22:32
  • De uma olhada nesse exemplo: [link] “w3schools.com/jquery/html_empty.asp” voce 2/04/2019 às 22:35
  • Mas é isso que fiz e nada. O que acontece é isso: A primeira carga vem da index, eu seleciono na index um grupo e clico em Details então me abre a tela detail com o Reseller daquele grupo selecionado. Dentro de detail eu posso selecionar outro Grupo e mostrar no grid os novos resellers daquele grupo. Essa segunda vez é feita pelo jquery(ajax), o problema que o primeiro conteúdo continua na tela e o jquery acrescenta outro em cima sem limpar o anterior.
    – pnet
    2/04/2019 às 22:47
  • Verifique, por favor, se vc tem dois id’s iguais... se tiver, altere o id e olha se vai funcionar... 3/04/2019 às 3:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .