Gif "Loading" while generating a mysql php query [duplicate]

Navigation
0

Good morning. I have a page that sends by post 3 variables, it is captured by another page and makes a query and generates a table with mysql data. Currently the table has 140,000 records so it takes about 20 seconds to assemble everything when sending the data. I need you to guide me to show a gif that says loading at the moment of clicking on the send button until the other page is generated. I found examples but the effect does when the page is generated so I am waiting for 20 sec and dsp does the gif and fade to show what is inside a div. Can you give me a hand? What is it done or what do I have to look for in order to learn it? By clicking on search, I see a gif "Loading" before the next page can show the table. Thank you very much.

    
asked by Juan 06.09.2017 в 20:30
source

2 answers

1

$(document).ready(function(){
  var $btn = $('#btn');
  var $data = $('.data');
  var $loader = $('.loader');


  $btn.click(function(){

    $.ajax({
     // ejemplo url
     url: 'http://www.json-generator.com/api/json/get/cwjKzYsDTm?indent=2',
     method: 'GET',
     beforeSend: function() {
      // aquí puedes poner el código paraque te muestre el gif
      $data.html("");
      $loader.show();
     }
    }).done(function(resp){
      setTimeout(function(){
       $loader.hide();
       $data.html(resp[0].about);
      }, 5000);
    }).fail(function(err){
      $loader.hide();
      alert(err);
    })
    return;
  });

});
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid #3498db; /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
    display: none;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
   <button id="btn">Enviar</button>

  
  <div class="data"></div>
  <div class="loader"></div> 
</div>

Here is an example, adapt it to your application.

    
answered by 06.09.2017 / 23:26
source
0

It is a simple companion what you need is that when you give click to the send button with JavaScript or Jquery samples or hide the gif.

Of course before that, you have to create the whole structure or place the Gif and with css hide it with an opacity of 0 or with a display: none (what do not break your structure).

Once you have the query, you hide your gif or your animation again with the same JavaScript or Jquery (whatever you are using).

Any questions you tell me.

You want to see a few loading spinners check this link:

link

If you want to see how it works, go to this link:

Click here!! Show Gif - click . 

$(function()
  {
    $('#target').submit(function( event ) {
      /*Previene que el form se envien*/
      event.preventDefault();
      /* Muestra el gif*/
      $('#loading').show();
      /* deshabilita el boton para que no se envien muchas peticiones*/
      $('.btn').addClass( 'disabled' );
      
      alert(" Ya puedes enviar lo que necesites por Ajax o validar lo que necesites")
    });
});
    
answered by 06.09.2017 в 21:24
Error trying to read WSGI handler in IIS with DJANGO IQueryable in VB.NET