1

Fala Meus amigos Tenho o seguinte Modal: inserir a descrição da imagem aqui

gostaria que ao apertar em salvar ele feche o modal e atualiza somente a tabela, fiz o seguinte codigo: inserir a descrição da imagem aqui

Ele esta fechando porem fica td escuro na pagina e para usar tenho que carregar td novamente com o F5: inserir a descrição da imagem aqui

Segue o Código JS:

$('#salvarPro').click(function() {

            var Ndesc = $("#NDesc").val();
            var Nqtd = $("#NQtd").val();
            var Nvalor = $("#NValor").val();

            $.ajax({
                method: "POST",
                url: "salvar.php",
                data: {
                    desc: Ndesc,
                    qtn: Nqtd,
                    valor: Nvalor
                }
            }).done(function(resposta) {
                $('#ModalNovo').hide();
                alert(resposta);
                GerarTabela();
            }).fail(function() {
                $('#ModalNovo').hide();
                alert('falha ao Cadastrar');
                GerarTabela();
            });
        });

E o HTML do Modal:

<div class="modal fade" id="ModalNovo" tabindex="-1" role="dialog" aria-labelledby="TituloModalCentralizado" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="TituloModalCentralizado">Novo</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="disabledTextInput">Desc</label>
                        <input type="text" id="NDesc" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="disabledTextInput">Qtd</label>
                        <input type="text" id="NQtd" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for="disabledTextInput">Valor</label>
                        <input type="text" id="NValor" class="form-control">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
                    <button type="button" id="salvarPro" class="btn btn-success">Salvar Produto</button>
                </div>
            </div>
        </div>
    </div>

4 Respostas 4

1

Olá Consegui resolver de uma forma simples, na hr de salvar eu dei um click virtual no botão cancelar desse jeito:

 $('#salvarPro').click(function() {

            var Ndesc = $("#NDesc").val();
            var Nqtd = $("#NQtd").val();
            var Nvalor = $("#NValor").val();

            $.ajax({
                method: "POST",
                url: "salvar.php",
                data: {
                    desc: Ndesc,
                    qtn: Nqtd,
                    valor: Nvalor
                }
            }).done(function(resposta) {
                $("#FecharModal").trigger('click');
                GerarTabela();
            }).fail(function() {
                $("#FecharModal").trigger('click');
                GerarTabela();
            });
        });

vlw a todos

1
  • Que bom q resolver, mas isso é uma gambiarra braba ein ahhaha, da uma olhada na minha resposta, lá mostra uma forma melhor de fazer.
    – Renan
    21/04/2021 às 20:06
1

O que eu percebi é que você está usando $('#ModalNovo').hide() mas conforme a documentação do Bootstrap o evento para fechar o modal é $('#ModalNovo').modal('hide') para exibir $('#ModalNovo').modal('show'), lá há outros eventos de controle do modal, da uma olhada lá e aconselho a usar conforme orientações deles e não fazendo .trigger() que é um paliativo.

1
  • Concordo, se seguir a documentação do bootstrap, é o correto a se fazer 7/04/2021 às 21:57
0

Tente retirar o alert, depois me diga se funcionou, pois o alerta é bloqueante e bloqueia tudo que estiver em volta enquanto não clicar em ok, e não sei se o alert está sendo exibido, esse é o problema aparentemente.

Edit: Então talvez o erro seja na sua função GerarTabela que faz ter este comportamento porque seu códico até onde mostrou está correto, poste o códico da função que ajuda nós te ajudar :)

4
  • Tirei e não foi 4/02/2021 às 2:02
  • Olá Samuel já editei :)
    – Dakota
    4/02/2021 às 2:32
  • comentei uma solução que eu fiz 4/02/2021 às 2:33
  • Ok, marque a sua resposta como resolvida pra sinalizar que a sua pergunta foi esclarecida :)
    – Dakota
    4/02/2021 às 2:36
0

Você pode fazer isso usando o seguinte código:

$("#SuaModal").modal('hide');

Um exemplo de implementação:

           $.ajax({
                type: "post",
                url: "/Receita/Create",
                data: viewModel,
                datatype: "json",
                success: function (d) {
                    swal({
                            title: "Sucesso!",
                            text: "Item criado com sucesso.",
                            confirmButtonColor: "#66BB6A",
                            type: "success",
                        });
                        $("#ReceitaModal").modal('hide');
                },
                error: function (data) {
                    swal({
                        title: "Falha ao Cadastrar!",
                        text: "Código do erro: " + data.status + ", tente novamente.",
                        confirmButtonColor: "#EF5350",
                        type: "error"
                    });
                 //em caso de falha mantenho a modal aberta, mas se quiser pode por aqui tbm o código q falei
                }
            });

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 .