3

Preciso fechar um modal, e atualizar a página, estou fazendo desta forma:

 function closeModal() {
        $('#myModal').modal('hide');
        location.reload();
    }

Porém, na primeira vez não funciona, e depois funciona normal, alguém sabe o porque ? Ou algum outro código que possa atualizar, as informações do modal, são inclusas por uma função AJAX, que funciona, preciso apenas atualizar depois de fechar o modal.

 <a href="#" onclick="SalvarItens(); closeModal();" class="btn btn-primary btn-sm">Gravar Item</a>

Eu salvo a função e depois fecho o modal. O que está ocorrendo que possa estar acontecendo esse comportamento estranho.

Edit, código: Por exemplo esta é a função para salvar:

function SalvarItens() {
    var idItem = $("#idItem").val();

    if (idItem == 0) {
        var dataInicio = $("#txtHoraInicio").val();
        var dataFim = $("#txtHoraFim").val();
        var tipoLimite = $("#txtTipoLimite").val();
        var limiteAcessos = $("#txtLimiteAcessos").val();
        var cbSeg = $('#cbSeg').prop('checked');
        var cbTer = $('#cbTer').prop('checked');
        var cbQua = $('#cbQua').prop('checked');
        var cbQui = $('#cbQui').prop('checked');
        var cbSex = $('#cbSex').prop('checked');
        var cbSab = $('#cbSab').prop('checked');
        var cbDom = $('#cbDom').prop('checked');
        var cbFer = $('#cbFer').prop('checked');
        var idHorario = $("#idHorario").val();
        var url = "/HorariosItens/SalvarItens";

        $.ajax({
            url: url
            , data: { HoraInicio: dataInicio, HoraFim: dataFim, Seg: cbSeg, Ter: cbTer, Qua: cbQua, Qui: cbQui, Sex: cbSex, Sab: cbSab, Dom: cbDom, Fer: cbFer, Tipolimite: tipoLimite, Limiteacessos: limiteAcessos, HorarioId: idHorario }
            , type: "POST"
            , datatype: "html"
            , success: function (data) {
                if (data.resultado > 0) {
                    ListarItens(idHorario);
                }
            }
        });
    } else {
        var dataInicio = $("#txtHoraInicio").val();
        var dataFim = $("#txtHoraFim").val();
        var tipoLimite = $("#txtTipoLimite").val();
        var limiteAcessos = $("#txtLimiteAcessos").val();
        var cbSeg = $('#cbSeg').prop('checked');
        var cbTer = $('#cbTer').prop('checked');
        var cbQua = $('#cbQua').prop('checked');
        var cbQui = $('#cbQui').prop('checked');
        var cbSex = $('#cbSex').prop('checked');
        var cbSab = $('#cbSab').prop('checked');
        var cbDom = $('#cbDom').prop('checked');
        var cbFer = $('#cbFer').prop('checked');
        var idHorario = $("#idHorario").val();

        var url = "/HorariosItens/EditarItem";

        $.ajax({
            url: url
            , data: { HoraInicio: dataInicio, HoraFim: dataFim, Seg: cbSeg, Ter: cbTer, Qua: cbQua, Qui: cbQui, Sex: cbSex, Sab: cbSab, Dom: cbDom, Fer: cbFer, Tipolimite: tipoLimite, Limiteacessos: limiteAcessos, HorarioId: idHorario, ItemId: idItem }
            , type: "POST"
            , datatype: "html"
            , success: function (data) {
                if (data.resultado > 0) {
                    ListarItens(idHorario);
                }
            }
        });
    }

}
Este é o ListarItens:

function ListarItens(idHorario) {

    var url = "/HorarioItem/Create";

    $.ajax({
        url: url
        , type: "GET"
        , data: { id: idHorario }
        , datatype: "html"
        , success: function (data) {
            var divItens = $("#divItens");
            divItens.empty();
            divItens.show();
            divItens.html(data);
            $("#idItem").val("0");
            $("#idHorario").val(idHorario);
            //$('#myModal').modal('hide');
            
        }
    });
}

Este é o código que salva:

  public ActionResult EditarItem(string HoraInicio, string HoraFim, bool Seg, bool Ter, bool Qua, bool Qui, bool Sex, bool Sab, bool Dom, bool Fer, int Tipolimite, int Limiteacessos, int HorarioId, int ItemId)
        {
            var item = new HorariosItens()
            {
                HoraFim = HoraFim,
                HoraInicio = HoraInicio,
                Seg = Seg,
                Ter = Ter,
                Qua = Qua,
                Qui = Qui,
                Sex = Sex,
                Sab = Sab,
                Dom = Dom,
                Fer = Fer,
                Tipolimite = Tipolimite,
                Limiteacessos = Limiteacessos,
                HorarioId = HorarioId,
                Id = ItemId
            };

            try
            {
                _context.Entry(item).State = EntityState.Modified;
                _context.SaveChanges();
            }
            catch (Exception ex)
            {
                throw ex;
            }

            return Json(new { Resultado = item.Id });
        }

Ele inclui, edita, e exclui, ele apenas tem horas que não atualiza, e tem horas que atualiza.

Edit HTML:

div class="form-group">
<input type="button" value="Incluir Itens" onclick="abreModal();" class="btn btn-info btn-sm" />
</div>
<form method="post" id="createform">

  @if (Model.Message != null) {
  <div class="alert alert-info alert-dismissable" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="close">
                <span aria-hidden="true">&times;</span>
            </button> @Model.Message
  </div>
  }
  <input type="hidden" asp-for="HorariosVM.Horarios.Id" />
  <div class="col-md-10">
    <table class="table table-responsive" id="tabela">
      <thead>
        <tr>
          <th>
            @Html.DisplayNameFor(model => model.HorariosItens[0].HoraInicio)
          </th>
          <th>
            @Html.DisplayNameFor(model => model.HorariosItens[0].HoraFim)
          </th>
          <th>
            @Html.DisplayNameFor(model => model.HorariosItens[0].Seg)
          </th>
          <th>
            @Html.DisplayNameFor(model => model.HorariosItens[0].Ter)
          </th>
          <th>
            @Html.DisplayNameFor(model => model.HorariosItens[0].Qua)
          </th>
          <th>
            @Html.DisplayNameFor(model => model.HorariosItens[0].Qui)
          </th>
          <th>
            @Html.DisplayNameFor(model => model.HorariosItens[0].Sex)
          </th>
          <th>
            @Html.DisplayNameFor(model => model.HorariosItens[0].Sab)
          </th>
          <th>
            @Html.DisplayNameFor(model => model.HorariosItens[0].Dom)
          </th>
          <th>
            @Html.DisplayNameFor(model => model.HorariosItens[0].Fer)
          </th>
          <th>
            @Html.DisplayNameFor(model => model.HorariosItens[0].Tipolimite)
          </th>
          <th>
            @Html.DisplayNameFor(model => model.HorariosItens[0].Limiteacessos)
          </th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        @foreach (var item in Model.HorariosItens) {
        <tr>
          <td>
            @Html.DisplayFor(modelItem => item.HoraInicio)
          </td>
          <td>
            @Html.DisplayFor(modelItem => item.HoraFim)
          </td>
          <td>
            @Html.DisplayFor(modelItem => item.Seg)
          </td>
          <td>
            @Html.DisplayFor(modelItem => item.Ter)
          </td>
          <td>
            @Html.DisplayFor(modelItem => item.Qua)
          </td>
          <td>
            @Html.DisplayFor(modelItem => item.Qui)
          </td>
          <td>
            @Html.DisplayFor(modelItem => item.Sex)
          </td>
          <td>
            @Html.DisplayFor(modelItem => item.Sab)
          </td>
          <td>
            @Html.DisplayFor(modelItem => item.Dom)
          </td>
          <td>
            @Html.DisplayFor(modelItem => item.Fer)
          </td>
          <td>
            @Html.DisplayFor(modelItem => item.Tipolimite)
          </td>
          <td>
            @Html.DisplayFor(modelItem => item.Limiteacessos)
          </td>
          <td>
            <a href="#" onclick="EditarItem(@item.Id);abreModal();" class="btn btn-primary btn-sm">Alterar</a>
            <a href="#" onclick="ExluirItem1(@item.Id);" class="btn btn-danger btn-sm">Excluir</a> @*
            <a asp-page="./Edit" class="btn btn-success btn-sm" asp-route-id="@item.Id">Editar</a>
            <button asp-page-handler="Delete" asp-route-id="@item.Id" class="btn btn-danger btn-sm">Excluir</button>*@
          </td>
        </tr>
        }
      </tbody>
    </table>
  </div>
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <div class="row">
            <div class="col-md-12">
              <div class="row form-group">
                <div class="col-md-6">
                  <div class="form-group">
                    <div class="col-md-9">
                      <label class="control-label">Hora Inicio</label>
                      <input type="time" class="form-control" id="txtHoraInicio" />
                    </div>
                  </div>
                  <br />
                  <div class="form-group">
                    <div class="col-md-9">
                      <label class="control-label">Hora Fim</label>
                      <input type="time" class="form-control" id="txtHoraFim" />
                    </div>
                  </div>
                  <br />
                  <div class="form-group">
                    <div class="col-md-9">
                      <label class="control-label">Tipo Limite</label>
                      <input id="txtTipoLimite" class="form-control" type="text" />
                    </div>
                  </div>
                  <br />
                  <div class="form-group">
                    <div class="col-md-9">
                      <label class="control-label">Limite de Acesso</label>
                      <input id="txtLimiteAcessos" type="text" class="form-control" />
                    </div>
                  </div>
                </div>
                <div class="col-md-6">
                  <div class="form-group">
                    <div class="col-md-10">
                      <div class="checkbox">
                        <input type="checkbox" id="cbSeg" />
                      </div>
                      <label class="control-label">Segunda</label>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-md-10">
                      <div class="checkbox">
                        <input type="checkbox" id="cbTer" />
                      </div>
                      <label class="control-label">Terça</label>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-md-10">
                      <div class="checkbox">
                        <input type="checkbox" id="cbQua" />
                      </div>
                      <label class="control-label">Quarta</label>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-md-10">
                      <div class="checkbox">
                        <input type="checkbox" id="cbQui" />
                      </div>
                      <label class="control-label">Quinta</label>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-md-10">
                      <div class="checkbox">
                        <input type="checkbox" id="cbSex" />
                      </div>
                      <label class="control-label">Sexta</label>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-md-10">
                      <div class="checkbox">
                        <input type="checkbox" id="cbSab" />
                      </div>
                      <label class="control-label">Sabado</label>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-md-10">
                      <div class="checkbox">
                        <input type="checkbox" id="cbDom" />
                      </div>
                      <label class="control-label">Domingo</label>
                    </div>
                  </div>

                  <div class="form-group">
                    <div class="col-md-10">
                      <div class="checkbox">
                        <input type="checkbox" id="cbFer" />
                      </div>
                      <label class="control-label">Feriado</label>
                    </div>
                  </div>

                </div>
              </div>
              <div class="form-group">
                <a href="#" onclick="closeModal();" class="btn btn-primary btn-sm">Gravar Item</a>
                <a href="#" onclick="fecha();" class="btn btn-danger btn-sm">Fechar</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</form>

O Create ele atualiza, porém ele não deixa mais fazer nenhuma função. inserir a descrição da imagem aqui

12
  • Você quer atualizar a página e o que você espera com isso? O modal fecha? O que acontece depois que passa no location.reload(); Alguma saída no console do navegador? Commented 4/06/2018 às 23:41
  • Eu preciso que ao fechar o modal, atualize a tabela, o modal fecha, porém nem sempre atualiza a tabela.
    – Mariana
    Commented 5/06/2018 às 11:38
  • E poque ao fechar o modal você não chama um ajax para persistir os dados na tabela? Não faz sentido você fechar um modal, dá refresh na página e ele inserir dados na tabela. Commented 5/06/2018 às 13:51
  • no ajax, ele chama a função pra alterar/editar/excluir os dados, e ele faz isso, somente não atualiza.
    – Mariana
    Commented 5/06/2018 às 13:56
  • Então seu problema está certamente no c#. Por fim você chama o SaveChanges(); ? Commented 5/06/2018 às 13:58

2 Respostas 2

1

Pelo que entendi, deseja salvar/editar um item e que a lista seja atualiza, abaixo segue um exemplo de como pode fazer:

No exemplo, após salvar/editar é carregada novamente a lista.

Não sei ao certo como está a arquitetura do seu projeto, então provavelmente terá que fazer ajustes.

O código todo do exemplo está disponível nesse repositório

Quanto a fechar o modal e o fundo ficar cinza, quando o modal é aperto ele adiciona uma classe no body. Achei essa resposta no SO que pede para fazer assim para fecha-lo

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();

View Index:

@{
    ViewData["Title"] = "Setores";
}
<div class="text-center">
    <h2>Setores</h2>
</div>

<button type="button" class="btn btn-add-new" onclick="carregaCreate()" data-toggle="modal" data-target="#myModal">Criar novo setor</button>

<div class="row">
    <div class="col-md-12">
        <div id="lista"></div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div id="corpoModal"></div>
        </div>
    </div>
</div>

@section scripts{
    <script src="~/js/Aplicacao/Setor/index.js"></script>
}

View _Create:

@model ProjetoBase.ViewModel.Setor.CreateSetorViewModel

<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">Adicionar setor</h4>
</div>
<div class="modal-body">
    <div class="row">
        <form id="formCreate">

            <div class="col-md-12">
                <div class="col-md-6">
                    <div class="form-group">
                        <label asp-for="Nome" class="control-label"></label>
                        <input asp-for="Nome" class="form-control" />
                        <span asp-validation-for="Nome" class="text-danger"></span>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label asp-for="Sigla" class="control-label"></label>
                        <input asp-for="Sigla" class="form-control" />
                        <span asp-validation-for="Sigla" class="text-danger"></span>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="funkyradio">
                    <div class="col-md-3">
                        <div class="form-group">
                            <div class="funkyradio-success">
                                <input type='checkbox' checked asp-for="IsAtivo" />
                                <label asp-for="IsAtivo"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
    <input type="button" id="btnCreate" value="Adicionar" onclick="createSetor()" class="btn btn-default" />
</div>    

View _Lista:

@model IEnumerable<ProjetoBase.ViewModel.Setor.ViewSetorViewModel>

@if (Model.Count() <= 0)
{
    <span>Não há setores cadastrados</span>
}
else
{
    <table id="tableSetores" class="display table table-condensed table-hover" style="width:100%">
        <thead>
            <tr>
                <th class="text-center">
                    @Html.DisplayNameFor(model => model.IsAtivo)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Nome)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Sigla)
                </th>
                <th class="text-center">
                    Editar
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td class="text-center">
                        @if (item.IsAtivo)
                        {
                            <span class="fa fa-2x fa-check"></span>
                        }
                        else
                        {
                            <span class="fa fa-2x fa-times"></span>
                        }
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Nome)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Sigla)
                    </td>
                    <td class="text-center">
                        <i onclick="carregaUpdate(@item.SetorId)" class="fa fa-2x fa-pencil blue-color" data-toggle="modal" data-target="#myModal"></i>
                    </td>
                </tr>
            }
        </tbody>
    </table>
}

View _Update:

@model ProjetoBase.ViewModel.Setor.UpdateSetorViewModel

<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"></h4>
</div>
<div class="modal-body">
    <div class="row">
        <form id="formUpdate">
            <input asp-for="SetorId" type="hidden" />

            <div class="col-md-12">
                <div class="col-md-6">
                    <div class="form-group">
                        <label asp-for="Nome" class="control-label"></label>
                        <input asp-for="Nome" class="form-control" />
                        <span asp-validation-for="Nome" class="text-danger"></span>
                    </div>
                </div>

                <div class="col-md-6">
                    <div class="form-group">
                        <label asp-for="Sigla" class="control-label"></label>
                        <input asp-for="Sigla" class="form-control" />
                        <span asp-validation-for="Sigla" class="text-danger"></span>
                    </div>
                </div>
            </div>

            <div class="col-md-12">
                <div class="funkyradio">
                    <div class="col-md-3">
                        <div class="form-group">
                            <div class="funkyradio-success">
                                <input type='checkbox' asp-for="IsAtivo" />
                                <label asp-for="IsAtivo"></label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </form>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
    <input type="button" id="btnUpdate" value="Atualizar" onclick="updateSetor()" class="btn btn-default" />
</div>

Index javaScript:

$(document).ready(function () {
    lista()
});

function createSetor() {
    var objeto = $("#formCreate").serialize();
    $.ajax({
        url: "/Setores/Create",
        type: "POST",
        data: objeto,
        datatype: "json",
        success: function (data) {

            if (data.MensagemSucesso != undefined) {
                notificaSucesso(data.MensagemSucesso)
                $("#corpoModal").html("");

                $('#myModal').modal('hide')
                lista();
            } else {
                notificaFalha(data.MensagemErro)
            }

        }
    });
}

function updateSetor() {
    var objeto = $("#formCreate").serialize();
    $.ajax({
        url: "/Setores/Update",
        type: "POST",
        data: objeto,
        datatype: "json",
        success: function (data) {

            if (data.MensagemSucesso != undefined) {
                notificaSucesso(data.MensagemSucesso)
                $("#corpoModal").html("");

                $('#myModal').modal('hide')
                lista();
            } else {
                notificaFalha(data.MensagemErro)
            }

        }
    });
}

function carregaCreate() {
    $("#corpoModal").load("Setores/CarregaCreate");
}

function carregaUpdate(id) {
    $("#corpoModal").load("Setores/CarregaUpdate/" + id);
}

function lista() {
    $("#lista").load("setores/lista", function () {
    });
}

Controller:

public class SetoresController : Controller
{
    private readonly ISetorService _setorService;
    public SetoresController(ISetorService setorService)
    {
        _setorService = setorService;
    }

    [HttpGet]
    public IActionResult Index() => View();

    [HttpGet]
    public IActionResult CarregaCreate() => PartialView("_Create");

    [HttpPost]
    public IActionResult Create(CreateSetorViewModel viewModel)
    {
        if (!ModelState.IsValid)
            return Json(new { MensagemErro = ModelState.DisplayErros() });

        Setor setor = Mapper.Map<Setor>(viewModel);

        List<StatusValidacaoEnum> status = _setorService.ValidaSetor(setor);

        if (status.Count > 0)
            return Json(new { MensagemErro = status.DisplayDescriptionsToViewModel() });

        if (_setorService.Insert(setor))
            return Json(new { MensagemSucesso = "Setor incluso com sucesso" });
        else
            return Json(new { MensagemErro = "Erro ao adicionar setor" });
    }

    [HttpGet]
    public IActionResult CarregaUpdate(int id)
    {
        Setor setor = _setorService.SelectById(id);

        if (setor == null)
            return PartialView("_Create");

        UpdateSetorViewModel viewModel = Mapper.Map<UpdateSetorViewModel>(setor);

        return PartialView("_Update", viewModel);
    }

    [HttpPost]
    public IActionResult Update(UpdateSetorViewModel viewModel)
    {
        if (!ModelState.IsValid)
            return Json(new { MensagemErro = ModelState.DisplayErros() });

        Setor setor = Mapper.Map<Setor>(viewModel);

        List<StatusValidacaoEnum> status = _setorService.ValidaSetor(setor);

        if (status.Count > 0)
            return Json(new { MensagemErro = status.DisplayDescriptionsToViewModel() });

        if (_setorService.Update(setor))
            return Json(new { MensagemSucesso = "Setor atualizado com sucesso" });
        else
            return Json(new { MensagemErro = "Erro ao atualizar setor" });
    }

    [HttpGet]
    public IActionResult Lista()
    {
        List<ViewSetorViewModel> viewModels = Mapper.Map<List<ViewSetorViewModel>>(_setorService.Select());
        return PartialView("_Lista", viewModels);
    }
}
3
  • Ele atualiza a tabela, porém fica como se n tivesse fechado o modal, vou postar a imagem pra vc ver como que fica.
    – Mariana
    Commented 5/06/2018 às 17:30
  • @marianac_costa, atualizei a resposta
    – Barbetta
    Commented 5/06/2018 às 18:00
  • O engraçado, é que executando direto no visual, ele dava certo, e fora não, mas após colocar o código pra fechar o modal q vc atualizou a resposta, deu certo, obrigado mais uma vez.
    – Mariana
    Commented 5/06/2018 às 18:16
1

Altere a sequencia de chamadas para organizar a execução dos comandos na ordem que deseja. E esqueça o reload da página porque isso não faz nenhum sentido nesse contexto.

No botão de fechar invoque apenas o closeModal()

<a href="#" onclick="closeModal();" class="btn btn-primary btn-sm">Gravar Item</a>

Na closeModal() chame o SalvarItens()

function closeModal() {            
   SalvarItens();            
}

E na ListarItens() dê um dispose em sua modal

function ListarItens(idHorario) {
    $('#myModal').modal('dispose');
    var url = "/HorarioItem/Create";

    $.ajax({
        url: url
        , type: "GET"
        , data: { id: idHorario }
        , datatype: "html"
        , success: function (data) {
            var divItens = $("#divItens");
            divItens.empty();
            divItens.show();
            divItens.html(data);
            $("#idItem").val("0");
            $("#idHorario").val(idHorario);
        }
    });
}
8
  • No form de edit dessa forma funcionou, porém no create não deu certo, ele abre o modal, ele inclui, atualiza, porém fica como se o modal tivesse aberto, até criei as funções novamente, e coloquei outro nome, para separar do edit, e do create.
    – Mariana
    Commented 5/06/2018 às 15:34
  • Ainda não consegui entender por que você quer recarregar a página Commented 5/06/2018 às 15:37
  • Na vdd eu n preciso recarregar a página, eu preciso atualizar a tabela no create, e isso não ta acontecendo.No edit eu recarrego a página, que foi a melhor maneira que encontrei, agora no create, eu não estou conseguindo, ele fica como se o modal n fosse fechado, porém ele inclui no banco.
    – Mariana
    Commented 5/06/2018 às 15:39
  • Inclua o html de sua view na pergunta Commented 5/06/2018 às 16:09
  • Atualizei a pergunta com o HTML. Lembrando que trabalho com PageRazor e .net core
    – Mariana
    Commented 5/06/2018 às 16:52

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 .