0

Tenho uma Page Index com um Grid que lista CEPS. Eu estou usando janelas "Modals" para Editar, Excluir e Criar um novo Registro. Quando clico no botão Editar, há um delay de uns 3 segundos para a modal aparecer, isso se deve ao tempo de busca do registro no banco... Gostaria de carregar um "spinner" na minha Index para bloquear a tela enquanto carregasse e depois desaparecesse quando a modal Editar aparecesse. Atualmente, meu Spinner está abrindo em uma DIV, mas ele pode ser alterado para um Modal... Aceito sugestões... Alguém saberia como me ajudar?

Um abraço a todos! :)

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

CSS do Spinner:

.loading {
    text-align: center;
}

    .loading span {
        display: inline-block;
        vertical-align: middle;
        width: 10px;
        height: 10px;
        margin: 50px auto;
        background: black;
        border-radius: 50px;
        -webkit-animation: loader 0.9s infinite alternate;
        -moz-animation: loader 0.9s infinite alternate;
    }

        .loading span:nth-of-type(2) {
            -webkit-animation-delay: 0.3s;
            -moz-animation-delay: 0.3s;
        }

        .loading span:nth-of-type(3) {
            -webkit-animation-delay: 0.6s;
            -moz-animation-delay: 0.6s;
        }

@-webkit-keyframes loader {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0.9;
        -webkit-transform: translateY(0);
    }

    100% {
        width: 24px;
        height: 24px;
        opacity: 0.1;
        -webkit-transform: translateY(-21px);
    }
}

@-moz-keyframes loader {
    0% {
        width: 10px;
        height: 10px;
        opacity: 0.9;
        -moz-transform: translateY(0);
    }

    100% {
        width: 24px;
        height: 24px;
        opacity: 0.1;
        -moz-transform: translateY(-21px);
    }
}

DIV que exibirá o Spinner na Index ()

<div class="loading">
    <span></span>
    <span></span>
    <span></span>
</div>

Botão Editar (JavaScript)

    $(document).ready(function () {
    $.ajaxSetup({ cache: false });

    $('table').on('click', 'a[data-modal]', function (e) {
        openmodal(this.href);
        return false;
    });

    function openmodal(url) {
        // Faz uma requisição get e carrega o formulário na janela modal
        $('#contentModal').load(url, function () {
            $('#modalGenerica').modal({
                keyboard: true
            }, 'show');

            // Inscreve o evento submit
            bindForm(this);
        });

    }

    function bindForm(dialog) {
        // Inscreve o formulário na janela modal com o evento submit
        $('form', dialog).submit(function (e, i) {
            if ($(this).valid() || i) {
                // Realiza una requisição ajax
                $.ajax({
                    url: this.action,
                    type: this.method,
                    data: $(this).serialize(),
                    success: function (result) {
                        // Se a requisição for satisfatória, recarrega a página atual
                        if (result.success) {
                            window.location = window.location;
                        } else {
                            $('#contentModal').html(result);
                            bindForm();
                        }
                    }
                });
                return false;
            } else {
                return false;
            }
        });
    }
});
1
  • 1
    Para ocasiões como essa eu criei um outro modal que vai ser chamado no momento da ação ser requisitada. Dentro desse model eu tenho um código CSS que simula uma imagem rodando e uma mensagem de aguarde, fazendo assim, o usuário ficar ciente de que algo está sendo carregado e que ele deve aguardar. Então ele é chamado antes da requisição e fechado no sucesso da requisição. Commented 6/01/2019 às 15:15

1 Resposta 1

1

Opa, tudo certo?

Se entendi corretamente o que você precisa, basta alterarmos a função "openmodal":

function openmodal(url) {
    $(".loading").show();
    $.get(url).success(function(data){
        $('#contentModal').html(data);
        $('#modalGenerica').modal({
            keyboard: true
        }, 'show');

        // Inscreve o evento submit
        bindForm(this);

        $(".loading").hide();
    });
}

É isso mesmo? Caso fique alguma dúvida pode me dar um grito que estou à disposição!

1
  • Obrigado @viniciusmussak!!!!!
    – Master JR
    Commented 6/01/2019 às 17:16

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 .