Loading em botão Ajax ou JavaScript

Programação
#1

Bom dia! Estou desenvolvendo uma aplicação que dispara algumas mensagens. Eu chamo uma API para fazer esse disparo. Ela demora um tempo apara processar. Alguém poderia me ajudar com um exemplo de código para realizar esse desenvolvimento? Ja tentei e não consegui. Vi alguns topicos aqui mas não consegui a solução em nem um deles.

#2

Na saída do ajax você muda o style de uma imagem para display block e no retorno mude para display none

#3

Bom dia Haroldo! Desculpa, não estou querendo as coisas da forma fácil, é que sou meio leigo com essa parte de layout. Seria possível me dar um exemplo? Tem 3 dias que estou tentando fazer isso.

#4

Vou montar um exemplo para voce

2 Curtidas
#5

Veja se é isso que deseja:

https://iwh.tec.br/scriptcase/blank_loading_ajax/

2 Curtidas
#6

Haroldo, isso seria ideal!

#7

Aplicação: blank_load_ajax
Desabilitar sweetalert em Aplicação/Configuração/Configurações de Notificações

Evento onExecute:

?>
<head>
<script src="https://kit.fontawesome.com/a81368914c.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.3/dist/sweetalert2.all.min.js"></script>          
sc_include_lib ("jquery");
</head>

<style>
.button {
  margin-top: 12px;
  margin-right: 20px;
  border: 0;
  padding: 5px;
  width: 100px;
  height: 42px;
  cursor: pointer;
  border-radius: 4px;
  color: #FFFFFF;
  background-color: #FBBC05 !important;
}
</style>


<form name="form" action="#">
  <button type='submit' class="button">GERAR <i  id="faSpin" style="display:none" class="fas fa-sync fa-spin"></i></button>
</form>

<script>
var click = true;
$(".button").click(function() {
  	$("#faSpin").css('display', '');
	if (click) {  //não executa caso usuário dê multiplos clicks seguidos
		click = false;
  		$.ajax({
        	type: "POST",
        	url: '../blank_ajax_php/',
        	success: function(data)
       	 	{
				$("#faSpin").css('display', 'none');
				click = true;
				Swal.fire({
                    icon: 'success',
                    title: 'Processamento Realizado com Sucesso!',
					toast: true,
					timer: 3000,
					showConfirmButton: false
                });
        	}
    	});
	}
});
</script>
<?php

Aplicação: blank_load_ajax
script php ou api chamado via ajax

Evento onExecute:

sleep(5); /apenas para teste espera 5 segundos para encerrar execução

Download do exemplo (importar como aplicação em seu projeto):

Exemplo na prática:
https://iwh.tec.br/scriptcase/blank_loading_ajax/

TAGS: HAROLDO, INFINITUSWEB, PHP, AJAX, JAVASCRIPT, JQUERY, SWEETALERT2, FONTWAESOME, LOADING, PROCESSANDO, BLANK,

4 Curtidas
Mensagem de processando ao clicar no ok (RESOLVIDO)
#8

Muito obrigado Haroldo! Vou terminar o desenvolvimento e te dou um retorno! Vlw mesmo!

1 Curtida