“Loading” em páginas web (ou resposta ao usuário)

Da série “vou postar para não perder”, esse é um daqueles pequenos macetes que quem é webdesigner sabe fazer bem feito, mas quem não é do ramo apanha (meu caso).

Há um certo tempo, houve a necessidade de ajustar um projeto desenvolvido por terceiros, de forma que o usuário fosse notificado de que a requisição de um formulário estava sendo processada, bloqueando múltiplos cliques. Como não havia nenhum tipo de aviso na tela, o usuário, que é usuário, pressionava o botão diversas de vezes, criando vários registros.

Com muito custo eu consegue achar um script que fosse simples e fácil de entender. Repito: não tenho tanta familiaridade com o desenvolvimento web e tampouco domino o Mentaway, framework utilizada por eles. Usei rapidamente em um projeto na faculdade, mas não me aprofundei.

Bom, missão dada é missão cumprida, da forma mais elegante possível. Esse script usa o Ajax e fez direitinho o que eu queria e do jeito que eu estava pensando. Nada mais justo compartilhar com vocês.

#1: criação do script

Você pode adicionar este código na sua biblioteca de scripts, que obviamente esteja referenciada no html, ou então incluí-lo diretamente no código-fonte da página (meio tosco, mas funciona).


// função executada no evendo onclick do botão de envio do form para mostrar aviso de processamento
<script language="JavaScript" type="text/JavaScript">
function loading() {
document.getElementById("progressBackgroundFilter").style.display = "inline"
document.getElementById("processMessage").style.display = "inline"
}
</script>

<!-- Aviso de processamento de registro -->


<div id="progressBackgroundFilter" class="progressBackgroundFilter" style="display:none">
</div>


<center>


<div id="processMessage" class="processMessage" style="display:none">
<span style="font-family:Tahoma;font-size:small">Aguarde...</span>


<img src="style/images/ajax-loader.gif" alt="Loading..." />
</div>


</center>
<!-- Fim aviso de processamento de registro -->

#2: ajustar o botão do formulário

O seu botão deve ficar no formato abaixo.

<!-- Exemplo de botão para o form -->
<input class="art-button" type="submit" name="search" value="Confirmar" onclick="javascript:loading()" />

#3: editar o CSS

Por fim, ajuste seu CSS, incluindo o código a seguir.

// Inserir no css

.processMessage
{
 position: fixed;
 top: 39%;
 left: 41%;
 padding: 10px;
 width: 20%;
 z-index: 1001;
 background-color: #fff;
 border: outset 3px #6389ab;
}
.progressBackgroundFilter
{
 position: fixed;
 top: 0px;
 bottom: 0px;
 left: 0px;
 right: 0px;
 overflow: hidden;
 padding: 0;
 margin: 0;
 background-color: Gray;
 filter: alpha(opacity=60);
 opacity: 0.60;
 z-index: 1000;
}

Mais fácil que isso, só tirando doce de criança, não é? Os ajustes ficam por conta do freguês. Eu não me lembro se cheguei a mexer em alguma parte do CSS, já faz tanto tempo que nem dá para tentar lembrar.

PS: a imagem usada neste exemplo (linha 20 do passo 1) você encontra aqui.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s