1

Gostaria de adicionar um efeito de carregamento quando a pessoa enviar o formulário, e após uns 2 segundos, o carregamente acaba e o formulário exibe o resultado (erro ou não) Gostaria de saber como implantar esse sistema dentro desse:

<script type="text/javascript"> // Script
    jQuery(document).ready(function(){
        jQuery('#ajax_form').submit(function(){
            var dados = jQuery( this ).serialize();

            jQuery.ajax({
                type: "POST",
                url: "salvaregistro.php",
                data: dados,
                success: function( data )
                {
                    $('#resultado').html(data).fadeIn("slow");
                }
            });

            return false;
        });
    });
</script>

No caso o #resultado é o resultado do formulário, se vai passar ou se vai dar erro. Teria como ANTES de ele exibir esse resultado mostrar uma div escondida que tem uma imagem de loading e esconder ela depois de um determinado período de tempo?

4
  • O loading pode ser dentro da div resultado e após isso eliminar? Conheço uma api javascript que cria "spinners", muito interessante por sinal. Commented 18/02/2015 às 12:45
  • Não sei como fica melhor. Eu pensei em uma div só para o 'carregamento' que abre e fecha antes de chegar o resultado. Mas se funcionar dentro da própria div resultado nao tem problema
    – GGirotto
    Commented 18/02/2015 às 12:49
  • Esta questão está solucionada? Commented 28/03/2015 às 21:28
  • Sim, porém usei um método diferente dos das respostas
    – GGirotto
    Commented 29/03/2015 às 13:10

3 Respostas 3

2

Você pode usar o plugin BlockUI para isto.

jQuery(document).ready(function(){
    jQuery('#ajax_form').submit(function(){
        var dados = jQuery( this ).serialize();

        $.blockUI(); //Bloquear UI
        jQuery.ajax({
            type: "POST",
            url: "salvaregistro.php",
            data: dados,
            success: function( data )
            {
                $.unblockUI(); //Desbloquear UI
                $('#resultado').html(data).fadeIn("slow");
            }
        });     
        return false;
    });
});

JSFIDDLE (Utilizando Timeout para simular o post)

8
  • O problema é que eu ja tenho uma div para o 'carregamento'. Não teria como aplicar a inha ao invés dessa q cobre a tela inteira? :x
    – GGirotto
    Commented 18/02/2015 às 12:52
  • você pode usar um elemento da propria pagina como mensagem, olha este jsFiddle atualizado: jsfiddle.net/7eq4q4ro/1 Commented 18/02/2015 às 13:03
  • Sim só que ela abre em tela cheia. Eu tava pensando em uma div mais discreta como só uma frase "carregando" antes que entre o reultado entende? xD
    – GGirotto
    Commented 18/02/2015 às 13:14
  • esta div vai aparecer em que parte da tela? no centro do browser? no centro do form? o que sera bloqueado? neste caso é interresante que você edit a sua mensagem com o trecho do HTML que será afetado e o comportamento que você espera. Commented 18/02/2015 às 13:16
  • É uma div que aparece embiaxo do formulário quanto tu envia ela xD Bem simples mesmo
    – GGirotto
    Commented 18/02/2015 às 13:17
1

Uma das soluções é usando o sonic.js;

Documentação e exemplos: https://github.com/padolsey/sonic.js/blob/master/README.md

Como usar?

Você pode criar uma função javascript deste jeito e adicionar ela no arquivo .js que preferir (lembre de carregar juntamente o arquivo sonic.js):

var spinnerLoading;
function getAjaxLoading() {
    if (typeof spinnerLoading === 'undefined') {
        spinnerLoading = new Sonic({
            width: 100,
            height: 100,
            stepsPerFrame: 1,
            trailLength: 1,
            pointDistance: .02,
            fps: 30,
            fillColor: '#05E2FF',
            step: function(point, index) {
                this._.beginPath();
                this._.moveTo(point.x, point.y);
                this._.arc(point.x, point.y, index * 7, 0, Math.PI*2, false);
                this._.closePath();
                this._.fill();
            },
            path: [
                ['arc', 50, 50, 30, 0, 360]
            ]
        });
    }
    spinnerLoading.play();
    return spinnerLoading.canvas;
}

Chamando o spinner:

$('#resultado').html(getAjaxLoading());

Você pode criar diferentes spinners, só depende da sua criatividade.

Então concluindo seu código poderia ficar + ou - assim (não esqueça de tratar os erros que podem retornar do ajax, caso contrário o spinner ficará lá rodando infinitamente).

Neste caso o código está todo junto, mas você pode declarar o getAjaxLoading em um arquivo .js que é carregado em todo lugar, você escolhe a melhor forma de implementação para o seu caso...:

<script type="text/javascript">
    jQuery(document).ready(function() {
        var spinnerLoading;

        function getAjaxLoading() {
            if (typeof spinnerLoading === 'undefined') {
                spinnerLoading = new Sonic({
                    width: 100,
                    height: 100,
                    stepsPerFrame: 1,
                    trailLength: 1,
                    pointDistance: .02,
                    fps: 30,
                    fillColor: '#05E2FF',
                    step: function(point, index) {
                        this._.beginPath();
                        this._.moveTo(point.x, point.y);
                        this._.arc(point.x, point.y, index * 7, 0, Math.PI * 2, false);
                        this._.closePath();
                        this._.fill();
                    },
                    path: [
                        ['arc', 50, 50, 30, 0, 360]
                    ]
                });
            }
            spinnerLoading.play();
            return spinnerLoading.canvas;
        }

        jQuery('#ajax_form').submit(function(e) {

            e.preventDefault(); //Evitamos o comportamento padrão que é o submit do formulário

            var dados = jQuery(this).serialize();

            //Adicionando o LOADING
            $('#resultado').html(getAjaxLoading());


            $.ajax({
                type: "POST",
                url: "salvaregistro.php",
                dataType: "JSON",
                data: dados
            }).done(function(data) {
                $('#resultado').html(data).fadeIn("slow");
            });
        });
    });
</script>
6
  • Só não entendi como aplicar este código.. Chamei o sonic.js no formulario e substitui o antigo por esse mas nada acontece ele só atualiza a pagina. Nem o resultado aparece
    – GGirotto
    Commented 18/02/2015 às 13:12
  • Vou editar o código para ver se melhora @Guilherme Commented 18/02/2015 às 13:15
  • Cara eu fiz alguma coisa errada. Porque não consigo fazer funcionar o.o. Quando eu carrego o sonic.js e aplico este código que tu montou quando eu tento enviar o formulário a pagina atualiza e nada acontece.
    – GGirotto
    Commented 18/02/2015 às 13:21
  • @Guilherme ah já entendi, você precisa alterar um pouco sua função, vou atualizar e comentar a alteração..., pronto... adicionei o e.preventDefault(); que no caso evita o comportamento padrão do submit, que é o envio da página... assim o ajax cuida dessa parte; Commented 18/02/2015 às 13:22
  • Ok, agora a pagina não atualiza, porém nada acontece ao enviar o formulário heheh
    – GGirotto
    Commented 18/02/2015 às 13:27
1

Uma solução é você criar um div contendo a imagem ou mensagem de carregando e deixa-lo com visibility:hidden ou display:none. Nesse link StackOverflow-en há uma explicação sobre as duas propriedades.

Aproveitando que está usando JQuery, na documentação da função $.ajax existem algumas configurações que você pode utilizar para mostrar esse div somente enquanto o formulário é enviado. São elas: beforeSend e complete.

beforeSend será chamada antes de ser realizada a requisição, então você pode utilizá-lo para exibir o div de "carregando".

complete será executada quando a requisição terminar, independente de ser com sucesso ou erro. Então você pode utilizá-la para tornar o div de "carregando" oculto novamente.

Exemplo:

$(function(){
    
    var loading = $('.loading');
    
    // Supondo que seja o evento de submit
    $('#send').on('click', function(){
        
        $.ajax({
            url: 'http://pt.stackoverflow.com/',
            data: {stack:'overflow'},
            beforeSend: function(){
                loading.css('visibility', 'visible'); // exibe o div
            },
            complete: function(){
                loading.css('visibility', 'hidden'); // esconde o div
            }
        });
    });
});
/**
  O CSS não tem relevância, foi somente para tornar o
  exemplo mais "apresentável"
*/

body{ text-align: center }

#send, .loading {
    margin: 10px auto;
    width: 40%;
}

.loading > img {
    max-width: 100px
}

.loading {
    visibility: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<button id='send'>Enviar</button>
<div class='loading'>
    <img src='https://i.sstatic.net/fLkAW.gif' alt=''/>
</div>

Se estiver com uma internet de velocidade média/alta, provavelmente nem verá a imagem sendo exibida nesse exemplo que fiz. Se possível, faça o teste em ambiente para simular uma situação real.

5
  • Cara esse código parece estar funcionando perfeitamente e da maneira que eu estava procurando! Porém tenho umas dúvidas enquanto a ele: tem como definir um tempo que a div carregando fica ativa? E como eu faço para exibir a div resultado após sair o carregamento?
    – GGirotto
    Commented 18/02/2015 às 20:30
  • @Guilherme ter, tem. Mas você quer mostrar o carregando mesmo sem estar enviando/recebendo nada? O retorno vc pode fazer como mostrou no seu código, usando success. Commented 18/02/2015 às 21:06
  • Sim! Degamos que a parte do carregamento seja só para deixar bonito mesmo entende? não precisa circular informações. O importante é que depois que o carregamente sumir, aparecer a resposta do formulario :D
    – GGirotto
    Commented 18/02/2015 às 23:26
  • Então porque ta usando ajax? Basta criar uma função com intervalo. Eu pensei que a dúvida era outra... @Guilherme Commented 18/02/2015 às 23:37
  • Eu uso o ajax para a informacao do formulario aparecer sem que a pagina tenha que ser recarregada
    – GGirotto
    Commented 20/02/2015 às 13:04

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 .