0

Now that my woes with running the big .sql file within PHP (Using a PHP session variable within a MySQL file run in PHP) are dealt with I want to display a loading bar (.gif) that I've made and a message displaying that the user data is being uploaded into the database because I don't want the user to think that their browser is not loading the page (since this process can take up to a couple of minutes depending on the file size).

<img src='includes/loadingbar.gif' width='128' height='15' alt=''/></p>
Uploading your school data into the database, please wait.
This process can take a while depending on your file size and connection.

Above is the image and the message I want to display while the query is running, but I can't seem to get past the white loading screen while it is updating the data. I've tried echo'ing the message after the query, before the query, as HTML code placed before and after the PHP command - but all I get is still this evil white screen. Every time the loading message doesn't show up until the query has finished (ironically), is there a way for it to show during the query in the format I'm currently using, or do I have to steer towards other programming languages? Many thanks!

EDIT:

I've tried to use a command before and after the php tags but it still doesn't operate until after the query has finished:

<div id="message" div align="center"><img src="includes/loadingbar.gif" width="128"
 height="15" alt=""/>
<br />
Please wait while your school data is being uploaded into the database.
This can take a short while depending on your file size and connection.
</div>

<script type="text/javascript">
$(document).ready(function()
{$('message').show(); });
</script>


<?php   
session_start();

$page_title = 'SQLTest';
include ('includes/header.html');

require ('mldb_connect.php');
(etc...)

and at the end:

    if ($populateresult)
   {
   $replace = $_SESSION['path'].$_SESSION['CentreNo'].'_'.$_SESSION['School'].'_'
       .date('dmY_His').'.txt' ;

    rename ($path, $replace) ;
   }
 ?>

<script type="text/javascript">
$(window).load(function()
{$('message').hide();});
</script>

What am I doing wrong with this?

2
  • Look into flush and ob_flush. But you might be better off uploading through an iframe/AJAX solution and using JavaScript to show the progress message.
    – DCoder
    Nov 6, 2013 at 10:41
  • I would suggest you use AJAX. Try to look at: api.jquery.com/jQuery.ajax Nov 6, 2013 at 10:45

3 Answers 3

1

With jQuery you could do something like this:

$("#imgId").show(); // Show loading image.

Execute PHP script:

$.post( "your_script.php", function( data ) {
    // $("#imgId").hide(); // Hide loading image.
    window.location = "http://www.example.com"; // Redirect to URL.
});

Update: imgId being the id of your image. For instance:

<img src="image.png" id="imgId" />
4
  • that makes the bar and message show up, but doesn't seem to run the script in the second part. I must be doing something wrong! Nov 6, 2013 at 13:18
  • Correction: This does work. It shows the loader bar whilst the script runs the query in the background. My only question is as follows: it doesn't disappear from screen once the query has finished so it stays in the browser forever. Is there a way I can add a command to go to a different page once it's complete? (Maybe even do that in the background script, does that work?) Nov 6, 2013 at 13:46
  • @SeanLimpens You can redirect in JavaScript by window.navigate("http://www.example.com"); or window.location = "http://www.example.com";. I will update my answer with redirect. Nov 6, 2013 at 14:41
  • I had already found the window.location.href command to swap back to the home page once the script recognises the php script has finished - it works like a charm now. Thanks a bunch for the help! :) Nov 6, 2013 at 14:54
0

I can tell you two different solutions.

Sol 1. When the query is firing as the page is loading: (with out Ajax):

In this case you can use some jquery.

$(document).ready(function(){
  $('img').show();

});

$(window).load(function(){
      $('img').hide();
});

This will ensure that when all the elements of the page are loaded only when the loader image hides.

sol 2.

if you want to do it via Ajax. Show the image when the event is fired that triggers Ajax, then upon the .success() or the .done() of the Ajax hide the image loader.

5
  • Just to make sure I understand it correctly, right before the query starts up I put in the first line of code (show) and once it finishes I put in the second one (hide)? And where it says 'img' I put in the image path? Nov 6, 2013 at 10:52
  • put the <img src"img path"/> in a <div>.Give the div a class or id. Then it goes like this: $('#div id').hide(); , that is the selector
    – shams
    Nov 6, 2013 at 10:55
  • And if I want to display the text, I just make sure that that line of text is also within this same div, right? Nov 6, 2013 at 10:57
  • yes friend. using that <div> as a container div , you can take another div or a span with in it along with the img tag in place.
    – shams
    Nov 6, 2013 at 11:02
  • It still doesn't seem to call it up until after the page has finished operating - let me update my question with what I've done. Nov 6, 2013 at 12:59
0

Though this is an old question, but it can be done without javascript.

need 'sessions_start()'. forward to a page with please wait dialog and in the head section forwarder <meta http-equiv="refresh" content="1; url= http://example.com/myPage.php"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.