I have a simple php script that can take up to 15 seconds to complete. I would like to add a loading gif and I prefer to keep it all on one page
I am a relative noob and I have a php script that performs multiple tasks based on a value that is passed to the script. For example, on a certain form submit, a hidden value "task" with a value of 'getSegments' is passed, and here is some of the php from the getSegments task
if ($task == 'getSegments') {
include('include/pre.content.php');
$response = [];
exec('/usr/bin/phantomjs phantomjstest.js', $response);
$data = $response[19];
// code that parses $data and builds $output
echo $output;
include('include/post.content.php');
}
It can take up to 15 seconds from when the user submits the form until $response is returned and parsed. What is the easiest/best way to add a "loading.gif" to display during this time?
I'd prefer to keep everything in this one php script, with the exception that I can add code to my css files as well as pre.content.php, which contains the opening tags up to and including the closing head tag, and post.content.php, which contains my footer, copyright, and closing body and html tags.
Thanks in advance.
UPDATE 01-22-2019
Per Eriks’ suggestions, I created the following phantomtest.php file to test:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" name="viewport">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<img src="images/loading3.gif" id="loading-gif">
<script>
$('#loading-gif').hide();
// $('#task_start_butt').click(function()
$(document).ready(function()
{
$('#loading-gif').show();
$.ajax({url:”pathTo getSegments.php"}).done(function(data){
$('#loading-gif').hide();
// display the result here
doSomethingOnComplete(data);
});
});
</script>
<?php
function doSomethingOnComplete($response)
{
// do here your work
$data = $response[19];
echo "Data = $data";
}
?>
</body>
</html>
and getSegments.php
<?php
$response = [];
exec('/usr/bin/phantomjs phantomjstest.js', $response);
$data = $response[19];
echo $data;
?>
I changed Eriks’ line
$('#task_start_butt').click(function()
to
$(document).ready(function()
because I want the script to start on page load, when the user comes from the form. I think the script is functioning properly, because loading3.gif is shown for a varying amount of time within the expected range each time phantomtest.php runs, and then it is hidden when the getSegments.php called by ajax finishes (I think). However, I have not been able to display the output from getSegments.php.
If anyone has a suggestion on how to accomplish this I’d be very appreciative. Thanks.
I updated further and moved
function doSomethingOnComplete($response)
out of the php section and put it in the script section. I am now able to output the number 11 with
document.write(5 + 6);
so now all I need is how to get the result from getSegments.php into phantomtest.php.
