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

Asked

Viewed 197 times

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, there are times when I press the button that triggers the function dial_query and the Insert takes time.
Is there any procedure or something that informs the user that the button not yet finished.. Type a cursor... Because of my lack of experience with php I really don’t know how ,what to look for or how to google this problem..

php javascript html ajax

  • Where Java Comes In?

  • @Article Sorry.. At the time appeared the autocomplete... I must have clicked wrong.. javascript

3 answers

2


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

1-Downloads the css file in git.

2- lynx in its application:

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

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

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

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

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

You can use jquery to manipulate css doing so:

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

Tip: Call this function to activate the Loader div before calling the $.ajax

The links for reference were cited, hands to work.

  • Very much your tip and the EXPLANATION. I saw the links of "jquery to manipulate css" also very well explained. But, as always has a "BUT". Cara took the Loader-Curtain.html and put a button with a function in the click= daload(). In the function I put the following: $('#div'). css({color:"#FFF", backgroundColor: "#000" });$('#loader_01). css({is-active});Alert('ola'); Tested by changing color and background and works 100%. I tested with other properties and it also worked, but when I put the property is-active Function does not work. Something is missing before is-active?

  • @Ricardom.Souza did not test, but in a brief search you can use -> $('div'). addClass('is-active');

  • So :) I had already seen addClass.. at http://api.jquery.com/category/css/. I tested with single quotes .. doubles.. and for that specific case the function also does not work. I also tried to put the whole class inside the addClass('Loader Loader-Curtain is-active') and it didn’t work either. I even tried css.addClass but nothing either. Like when you want to change the color you put what you want to change : color:"#FFF" wouldn’t have to have something similar in is-active.. Property type:"is-active" ?????

  • kkkkkkkkk mano, ran ta good... kkkkkkkkkkk

  • Here complicates :)... I will do as Uncle Bill taught... Turn off the car, take out the ignition key, get out of the car, lock the door. Then it starts all over again. Dear BRIGADEÇO for the attention.. If it worked there.. It has to work here too. :)

  • @Ricardom.Souza do you want to know where the class "is-active" comes from? (This is what I understood...)

  • Let’s go continue this discussion in chat.

Show 2 more comments

1

You can fire a message on the screen stating that the operation is in processing, and after the return of Ajax, remove the message.

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

To do this, you must place the codes below (with comments) within the function that calls Ajax. The example below displays a text box at the top 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);         
                }
            }
        });


}

0

have to make a synchronous request

informing the async parameter: false and using the . done(Function(data) {} function on it containing what should be done

Browser other questions tagged php javascript html ajax

You are not signed in. Login or sign up in order to post.