Close modal after saving to Bank

Question

Speaks My friends I have the following Modal:

I would like that when pressing save it closes the modal and updates only the table, I made the following code:

It is closing however gets dark td on the page and to use have to load td again with the F5:

Follows the JS Code:

$('#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();
            });
        });

And the HTML of 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>

Answer 1

What I’ve noticed is that you’re wearing $('ModalNovo').hide() but in accordance with the documentation of Bootstrap the event to close the modal is $('ModalNovo').modal('hide') to display $('ModalNovo').modal('show'), there are other events of modal control, take a look there and advise to use according to their guidelines and not doing .trigger() which is a palliative.

Answer 2

You are using the Hide mode, which only decreases the opacity of the modal. From one remove, ". remove()", the modal will be undone. You can even put a fade so it’s not too dry. Change the Hide to remove and see if it will help you.

Answer 3

Hello I managed to solve in a simple way, in saving hr I gave a virtual click on cancel button that way:

 $('#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 to all

Answer 4

Try to remove the Alert, then tell me if it worked, because the alert is blocking and blocks everything that is around until you click ok, and I don’t know if Alert is showing, this is the problem apparently.

Edit: So maybe the error is in your function GerarTabela that makes you have this behavior because your comic as far as you have shown is correct, post the function comic that helps us help you :)

Answer 5

You can do this using the following code:

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

An example of implementation:

           $.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
                }
            });