CODEWITHSUNDEEP
javascriptphpjqueryhtmlajax
Nikko Clavaguera
Nikko Clavaguera

Reputation: 11

Show loading image while running PHP script

I've been reading the answers on this questions but I can't figure it out. Mostly because I know zero AJAX and javascript.

I have a page with a button, when the user clicks that button... a php script scans a folder in the server and do all kinds of stuff with a database.

I want to show a loading gif while this happens. The user doesn't send information or receive anything, just clicks on a button.

My first try was to send the user to the php file... which is something like this (just an example). And put a div that shows an image while the DOM loads. But that doesn't work, in fact, it doesn't even show a blank page, I can still see the page in which I click the button and, because the end of the php script has a redirection, I only see the loading icon of the browser as indicator of something happening.

<html>
    <head>
        <title></title>
        <script type="text/javascript">
            $(window).load(function() {
                $(".loader").fadeOut("slow");
            })
        </script>
        <style type="text/css">
            .loader {
                position: fixed;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
                background: url('images/page-loader.gif') 50% 50% no-repeat rgb(249,249,249);
            }
        </style>
    </head>
    <body>
        <div class="loader"></div>
        <!-- PHP SHOULD DO STUFF HERE THEN REDIRECT BACK TO WHERE THE BUTTON WAS CLICKED-->
    </body>
</html>

I understand that I have to separate the php part from the "view" part. So my question is... how do a I make the button show a loading gif... while in some way I run the php script from server-side.

I've also tried:

<script type="text/javascript">
$('#buttonid').click(function(){
  $('.loader').show();
  $.ajax({
   type: 'POST',
   url: 'script.php',
   success:function(result){
       $('.loader').hide();
   }
}
</script>

But it's not working either. I disabled the redirection on the script and when it finishes running it takes me to that page instead of remaining on the one I made the call from.

Upvotes: 0

Views: 2964

Answers (1)

Don&#39;t Panic
Don&#39;t Panic

Reputation: 14520

The Javascript you show is fine, and is the right approach. Do not redirect anywhere, don't include any other JS. If I understand this correctly:

I disabled the redirection on the script and when it finishes running it takes me to that page instead of remaining on the one I made the call from.

you mean that clicking your button sends you to script.php. You haven't included your button HTML, but I guess your button is inside a <form>. When you click it, your jQuery click handler is fired, but the form is also being submitted, as it would if you had no Javascript at all. That will send you on to script.php, which is what you are seeing.

You need to stop the default form submission, so that only your Javascript handler is fired. You can do that as follows:

// Event handlers are passed an event object as a parameter
$('#buttonid').click(function(e){

  // Prevent the normal action this event would cause, in this case 
  // submitting the form
  e.preventDefault();

  // ... continue with the rest of your code
  $('.loader').show();

More info in the jQuery docs.

Upvotes: 1

Related Questions