Before div after query

Question

I have a form and its action triggers the loading of data from a table. I want the action to return and display a loading gif while the query is still running.

php:

if(isset($_POST['button']))
{
    echo '<div id="loading"></div>';
    for($x=0; $x<10000; $x++)
    {
        $conn->query("SELECT * FROM table");
    }

}

html:

My current code doesn't show the loading gif until the query has already run.

You miss some basics here: PHP is first process by your server, then the result is sent to your browser when all your script is processed. You need to check on AJAX for what you want to do. — vard, May 18 '15 at 13:19
What about outputting the page then populating the page with the data via AJAX? https://learn.jquery.com/ajax/ — chris85, May 18 '15 at 13:19
You need AJAX to do this kind of stuff. learn JavaScript and jQuery. In your JavaScript code, hide the loader at the beginning. then only show it when you make an AJAX request to the server. — Akar, May 18 '15 at 13:27
Clarify the intent of trying to show a loading animation while a long running action continues to execute, which was obscured by the sample code that is not currently working — Arne Claassen, May 20 '15 at 21:56

score 0 · Answer 1 · edited May 23 '17 at 11:58

In order for you to display a loading image in the browser while your SQL query is running, you need to separate the displaying of the loading image from executing the query. The way you have it right now, php will not return your loading '' until the query completes.

The simplest way is for the loading to be initiated via javascript, which would inject the loading image into your html and fire off an AJAX request to the server. Then when the AJAX call returns the data, the receiving javascript callback would replace the loading image with your data.

Some similar questions that can get you on your way:

Load data from database + ajax + php

Loading data from database with php and pure ajax in a textbox

How to show ajax loading gif animation while the page is loading?

Before div after query

1 Answers1