Press button and "CURSOR / or ANYTHING" appears until operation is finished

Navigation
1

I have the following code in javascript and 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);         
                }
            }
        });


    }

and in INSERT_CONSULTA.PHP I have the following code ..: 

<?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); 

    }

?>

Everything works wonders :), however, it's time that when I press the button that triggers the check_query function and the insert takes. Is there any procedure or something that informs the user that button not yet finished .. Type a cursor ... For my lack of experience with php I really do not even know how, what to look for nor how to search google for this problem ..

    
asked by anonymous 26.09.2017 / 17:56

3 answers

2

There are 15,000 different solutions for this, and the one I usually use is css-loader Very simple to use:

1- Download the css file in git.

2-linca in your application: 

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

On the page where you want to show some loading process, place after the tag <head> 

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

And to show the "loading", just activate the property in the div, thus: 

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

You can use jquery to manipulate css by doing this: 

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

Tip: call this function to activate the loader div, before calling $.ajax

The links for reference have been cited, hands down.

    
26.09.2017 / 20:03
1

You can trigger a message on the screen informing you that the operation is in process, and after Ajax returns, remove the message.

The message can be a small window with text, an animated image or even change the button that was clicked.

To do this, you should put the codes below (with comments) inside the function that calls Ajax. The example below displays a text box in the upper corner of the screen: 

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);         
                }
            }
        });


}
    
26.09.2017 / 20:15
0

You have to make a synchronous request

    
26.09.2017 / 20:03
Targeting failure (recorded core image) Replace output of a command with a custom message