Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Chamada de Modal com Ajax

Boa tarde,

Estou tentando chamar um modal (bootstrap) utilizando Ajax. Quando clico no botão para excluir um registro o modal aparece normalmente, porém, quando clico em confirmar a exclusão a janela não interage com a ação, só que olhando a tabela o registro foi excluído. Clicando no botão de cancelar o ação o pop-up continua aparece ao invés de desaparecer. Alguém poderia me dizer o que está errado?

Código do menu para excluir o registro

                                <td>
                                    <div class="btn-group btn-group-sm">
                                        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><i class="glyphicon glyphicon-th-list"></i><span class="caret"></span></button>
                                        <ul class="dropdown-menu" role="menu">
                                            <li><a class="details btn btn-default btn-sm" href="@Url.Action("FormAltera", "Usuario", new { id = u.Id })"> Alterar <i class="glyphicon glyphicon-pencil"></i></a></li>
                                            <li><a class="excluirReg btn btn-default btn-sm " id="@u.Id"> Deletar <i class="glyphicon glyphicon-remove"></i></a></li>
                                        </ul>
                                    </div>
                                </td>

Script e modal

@section Scripts
    {
     debugger;
    <script src="~/Scripts/App.Paginacao.js"></script>
    <script>
        var id;
        $('.excluirReg').click(function () {
            id = $(this).attr('id');
            $('.deleteID').val(id)
            $("#myModal").modal('show');
        });

        $('.delete-confirm').click(function () {
            if (id != '') {
                $.ajax({
                    url: '/Usuario/DeletarUsuario',
                    data: { 'id': id },
                    method: "get",
                    sucess: function (data) {
                        if (data) {
                            if ($('.modal-header').hasClass('alert-danger')) {
                                $('.modal-header').removeClass('alert-danger').addClass('alert-sucess');
                                $('.delete-confirm').css('display', 'none');
                            }
                            $('.sucess-message').html('Registro excluido com sucesso');
                        }
                    }, erro: function (err) {
                        if (!$('.modal-header').hasClass('alert-danger')) {
                            $('.modal-header').removeClass('alert-sucess').addClass('alert-danger');
                            $('.delete-confirm').css('display', 'none');
                        }
                        $('.sucess-message').html(err.statusText);
                    }
                });
            }
        });

        $("#myModal").on("hidden.bs.modal", function () {
            $(".modal-header").removeClass(' ').addClass('alert-danger');
            $('.delete-confirm').css('display', 'inline-block');
            $('.sucess-message').html('').html('Tem certeza que de deseja excluir esse registro?');
        });
    </script>
    }

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog" role="document"></div>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dissmiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="myModalLabel">Confirmar</h4>
            </div>
            <div class="modal-body">
                <p class="sucess-message">Tem certeza de que quer excluir o registro?</p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success delete-confirm" type="button">Sim</button>
                <button class="btn btn-default" type="button" data-dissmiss="modal">Não</button>
            </div>
        </div>
    </div>
</div>

Agradeço a ajuda.

4 respostas

Olá Willian,

para os botões de cancelar e o Não funcionarem, na verdade você precisa colocar data-dismiss ao invés de data-dissmiss, tá sobrando um s depois do di.

Quanto ao de confirmar, não entendi exatamente o problema. Ele apaga o registro do banco, mas não chega a mostrar a mensagem de Registro excluido com sucesso no pop? É isso?

Bom dia Lucas,

Agradeço pela ajuda do data-dismiss, olhei várias vezes e não reparei no s sobrando.

Exato ele chega a apagar o registro. Debugando o código ele chama o controller e acessa o banco para apagar o registro. Porém ele não executa o sucess.

Debugando o JS eu consigo debugar até o $.ajax, depois ele pula pro fim do comando. Ao olhar os elementos ele aparece esse erro: stack : "ReferenceError: url is not defined↵ at eval (eval at (http://localhost:56568/Eventos/ConsultaEventos:10:13), :1:1)↵ at HTMLButtonElement. (http://localhost:56568/Eventos/ConsultaEventos:174:13)↵ at HTMLButtonElement.dispatch (http://localhost:56568/Scripts/jquery-1.10.2.min.js:22:14129)↵ at HTMLButtonElement.v.handle (http://localhost:56568/Scripts/jquery-1.10.2.min.js:22:10866).

Na verdade ele aparece para todos os elementos. url, data, method, sucess. Porém como disse ele chega a executar o 'Eventos/DeletarEventos'.

Obrigado.

solução!

Agora eu peguei o erro, está escrito sucess mas deveria ser success, com dois c.

Opa, era isso mesmo Lucas. Muito Obrigado.