Avatar of JP_TechGroup
JP_TechGroup
Flag for United States of America asked on

Add a loading gif while php runs server side

I would like to request a walk through of how to add a loading gif while a php script is running, called from a POST event.
I have found various ways and suggestions in my searches, but (as usual with the web) the solutions I could understand did not work and I don't monkey with code I can't follow!

Like so many things in the IT world, I expected there to be a concise answer. What I found is 100 answers, most of them questionable proposed by a gaggle of "experts" who can't agree on the color of the sky, let alone the answer to the question... (and of course the ubiquitous, "why would you want to do that?")

If one of you could kindly lend your expertise, I would dearly love to learn how to accomplish this. Not just because it is a task I set for myself, but also because I want to learn (correctly!). Thank you!
PHPMicrosoft IIS Web ServerWeb Development

Avatar of undefined
Last Comment
Ray Paseur

8/22/2022 - Mon
Ryan Chong

I would like to request a walk through of how to add a loading gif while a php script is running, called from a POST event.
you can have a pre-loaded gif file which seats in an invisible DIV, and then call it to be visible when the form is posting.
Ray Paseur

This is a common enough question that I wrote an article about it!  The principles of showing and hiding a GIF are the same as any other element in the browser viewport.
See My Favorite Lazy Alternative in this article:
https://www.experts-exchange.com/articles/14519/A-jQuery-Progress-Bar.html
James Bilous

Can you clarify if you're submitting the php script via an asynchronous POST with Javascript or are you doing a standard submit of a form to a new page?
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
JP_TechGroup

ASKER
Ryan, that is the first thing I tried, but it does not work with server side code. You are left looking at the form as it was at POST until the php executes. Then you get a quick glimpse of it as the page refreshes. I don't think this is the way to go?

Ray:
How about a spinner that appears at the time an upload is started and disappears when the upload is finished?  The concept is just like the example above, but instead of calling a background script for a progress indicator, we can just load an image like this at the start of the upload, and hide it at the end.  Easy!
This is exactly what I tried. See above.
SOLUTION
Julian Hansen

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
SOLUTION
Ray Paseur

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Julian Hansen

Another sample showing interaction with a form
CSS
<style type="text/css">
#loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.75) url(images/loading2.gif) no-repeat center center;
  z-index: 10000;
}
</style>

Open in new window

FORM
<form class="form horizontal">
  <div class="row">
    <label class="col-xs-4">Your Name:</label>
    <div class="col-xs-8">
      <input type="input" class="form-control" />
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

Open in new window

Spinner overlay
<div id="loader"></div>

Open in new window

jQuery
<script>
var spinner = $('#loader');
$(function() {
  $('form').submit(function(e) {
    e.preventDefault();
    spinner.show();
    $.ajax({
      url: 't2228.php',
      data: $(this).serialize(),
      method: 'post',
      dataType: 'JSON'
    }).done(function(resp) {
      spinner.hide();
      alert(resp.status);
    });
  });
});
</script>

Open in new window


Working sample here
Dave Baldwin

A 'loading gif' must be loaded by the previous page, the page you're coming from.  It can't be loaded by the target PHP page because that would only happen when the whole page is ready to display.
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
JP_TechGroup

ASKER
Thank you all so much for your responses. I am digesting all of this.
I don't think I will be able to to make use of these excellent examples. I have several processes built into the POST event and I have no idea how to rework them in JQuery.

Below is what happens on form POST. If I understand correctly, this all has to go and I must perform this work some other way.

 <?php
    //echo $_REQUEST["updateStageButton"];
    //echo $_SERVER['REQUEST_METHOD'];
    //echo "<br />";
if($_SERVER['REQUEST_METHOD']="POST")
    {
        if (array_key_exists("poid",$_REQUEST))
        {
            $poid=$_REQUEST["poid"];
        }
        if (array_key_exists("submitFormName",$_REQUEST))
        {
            $submitFname=$_REQUEST["submitFormName"];
        }

        if (array_key_exists("updateStageButton",$_REQUEST))
        {
			
            $statusChange=$_REQUEST["updateStageButton"];
				$queryText=getProductionOrder($poid);
					$result = querySelectDB($queryText);
						$row=mysqli_fetch_row($result);
						
            if($statusChange==160)
			{
				$recordsAffected = updateWorkStatus($row[1],161);
				$recordsAffected1 = Update_ProductionTimeCompletionStatus($poid, $row[2], 161);
			}//if

            if($statusChange==161)
			{
				$recordsAffected = updateWorkStatus($row[1],162);
				$recordsAffected1 = Update_ProductionTimeCompletionStatus($poid, $row[2], 162);
			}
			mysqli_free_result($result);
        }

    }

if(empty($poid))
{
    $poid=$_GET['poid'];
}


    ?>

Open in new window

James Bilous

You should just use javascript to show the loader when the submit button is clicked. It will show until the next page loads. As Dave said, it needs to be on the page but hidden in CSS, then just remove the hidden property from it when you submit.
Dave Baldwin

No, you're not understanding.  You don't need to change your PHP code.  The loading GIF must be put up by the Previous page when the post is made to the PHP page.  This is usually done in an 'onsubmit' routine attached the the <form> element.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck
ASKER CERTIFIED SOLUTION
Dave Baldwin

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
Ray Paseur

@DaveBaldwin: Plus One for that!

I don't think I can help any more.  When I write an article with tested and working code examples, and it's the exact answer to the question, and I post the link to the article, but the author of the question won't try the article examples, it's a good time to move on.

Best of luck, ~Ray
JP_TechGroup

ASKER
Yes I did Ray! Sorry, I had responded to your post, but I must have neglected to submit it.

I have it working now. Sorry to be so dense. As must be obvious, webdev is not my thing and I find much of it to be ridiculously difficult and incomprehensible as compared to server side programming!
I'll soldier through the rest of this project and scamper back to VB where I belong! Cheers.
Ray Paseur

Glad you've got it pointed in the right direction!  I'm sure i would be equally lost in VB ;-)
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.