1

Tenho o seguinte código em javascript e ajax:

function marcar_consulta(id_paciente,id_horario, data_consulta )
    {
        $.ajax
        ({
            type:'post',
            url:'insert_consulta.php',
            data:{marcar_consulta:'marcar_consulta', pid_paciente:id_paciente, pid_horario:id_horario , pdata_consulta:data_consulta,},
            success:function(response) 
            {
                if(response=="success")
                {
                    window.alert('Inserido com SUCESSO');
                }
                else  
                {   
                    window.alert(response);         
                }
            }
        });


    }

e no INSERT_CONSULTA.PHP tenho o seguinte código..:

<?php
    $user = "maria";
    $pass = "1111";
    $host = "192.168.25.4";
    $banco = "base";

    $conexao = mysql_connect($host, $user, $pass) or die(mysql_error());
    mysql_select_db($banco);

    mysql_query("SET NAMES 'utf8'");
    mysql_query('SET character_set_connection=utf8');
    mysql_query('SET character_set_client=utf8');
    mysql_query('SET character_set_results=utf8');

    if(isset($_POST['marcar_consulta']))
    {
        $pid_paciente=$_POST['pid_paciente'];
        $pid_horario=$_POST['pid_horario'];
        $pdata_consulta = $_POST['pdata_consulta']; 


        $sql =  " Insert into consulta " .          
                " ( id_paciente_fk, id_m_h_fk,  id_convenio_fk, data_consulta)" .
                " values " .
                " ( ".$pid_paciente.",".$pid_horario.", 0,'" .$pdata_consulta. "')";


        $resultado = mysql_query($sql, $conexao) or die(mysql_error()); 

        echo "success";

        mysql_close($conexao); 

    }

?>

Tudo funciona as mil maravilhas :), contudo, tem hora que quando eu aperto o botão que dispara a função marcar_consulta e o insert demora.
Existe algum procedimento ou algo que informe ao usuário que a operação do botão ainda não terminou.. Tipo um cursor... Pela minha falta de experiência com o php realmente não sei nem como ,o que procurar nem como pesquisa no google esse problema..

2
  • Onde entra o Java?
    – user28595
    Commented 26/09/2017 às 16:12
  • @Articuno Desculpe.. Na hora apareceu o autocompletar... devo ter clicado errado.. javascript Commented 26/09/2017 às 17:51

3 Respostas 3

2

Existe 15mil soluções diferentes para isso, e a que eu costumo usar é css-loader Muito simples de usar:

1- Baixa o arquivo css no git.

2- linca na sua aplicação:

<link rel="stylesheet" href="path/to/css-loader.css">

Na página onde você quer mostrar algum processo carregando, coloque depois da tag <head>

<div class="loader loader-default"></div>

E para mostrar o "carregando", é só ativar a propriedade na div, ficando assim:

<div class="loader loader-default is-active"></div>

Você pode usar jquery para manipular o css fazendo isso:

$('div').css({is-active});

Dica: chama essa função pra ativar a div de loader, antes de chamar o $.ajax

Os links para referencia foram citados, mãos a obra.

7
  • Muito maneira sua dica e a EXPLICAÇÃO. Vi os links do "jquery para manipular o css" também muito bem explicado. Mas,como sempre tem um "MAS".Cara peguei o loader-curtain.html e coloquei um botão com uma função no click= daload(). Na função coloquei o seguinte: $('#div').css({color:"#FFF", backgroundColor: "#000" });$('#loader_01).css({is-active});alert('ola'); Testei mudando o color e background e funciona 100%. Testei com outras propriedades e também funcionou, mas quando coloco a propriedade is-active a function não funciona. Esta faltando algo antes do is-active? Commented 26/09/2017 às 19:47
  • @RicardoM.Souza não testei, mas em uma breve pesquisa você pode usar -> $('div').addClass('is-active'); Commented 26/09/2017 às 20:02
  • Então :) eu já tinha visto o addClass..no api.jquery.com/category/css. Testei com aspas simples .. duplas.. e para esse caso especifico a função também não funciona. Também tentei colocar toda a classe dentro do addClass('loader loader-curtain is-active') e também não funcionou. Tentei até css.addClass mas nada também. Tipo quando se quer mudar a cor se coloca o que se quer mudar : color:"#FFF" não teria que ter algo semelhante no is-active.. Tipo nomedapropriedade:"is-active" ????? Commented 26/09/2017 às 20:11
  • kkkkkkkkk mano, funcionou ta de boa... kkkkkkkkk Commented 26/09/2017 às 20:13
  • Ai complica aqui :)... Vou fazer como o titio Bill ensinou... Desliga o carro, tira a chave da ignição, sai do carro, fecha a porta com a chave. Dai começa tudo de novo.. Cara BRIGADAÇO pela atenção.. Se funcionou ai.. tem que funcionar aqui também. :) Commented 26/09/2017 às 20:18
1

Você pode disparar uma mensagem na tela informando que a operação está em processamento, e após o retorno do Ajax, remover a mensagem.

A mensagem pode ser uma pequena janela com texto, uma imagem animada ou ainda alterar o botão que foi clicado.

Para fazer isso, você deve colocar os códigos abaixo (com comentários) dentro da função que chama o Ajax. O exemplo abaixo exibe uma caixa de texto no canto superior da tela:

function marcar_consulta(id_paciente,id_horario, data_consulta )
    {
      // o código abaixo cria o elemento da mensagem na página
      var x = document.createElement("div");
      var t = document.createTextNode("Aguarde...");
      x.appendChild(t);
      document.body.appendChild(x);
      x.setAttribute("style", "background: red; z-index: 9999999999; display: 
      inline-block; padding: 10px; position: fixed; top: 10px; left: 10px;");
      x.setAttribute("id", "aguarde");

        $.ajax
        ({
            type:'post',
            url:'insert_consulta.php',
            data:{marcar_consulta:'marcar_consulta', pid_paciente:id_paciente, pid_horario:id_horario , pdata_consulta:data_consulta,},
            success:function(response) 
            {
                // a linha abaixo remove o aviso após o retorno do Ajax
                document.getElementById("aguarde").outerHTML='';
                if(response=="success")
                {
                    window.alert('Inserido com SUCESSO');
                }
                else  
                {   
                    window.alert(response);         
                }
            }
        });


}
0

tem que fazer uma requisição síncrona

informando o parâmetro async: false e usando a função .done(function(data) {} nela contendo o que deve ser feito

2

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 .