Please Wait message while PHP loops

PHP programming forum. Ask questions or help people concerning PHP code. Don't understand a function? Need help implementing a class? Don't understand a class? Here is where to ask. Remember to do your homework!

Moderator: General Moderators

kdidymus
Forum Contributor
Posts: 196
Joined: Tue May 13, 2008 3:37 am

Please Wait message while PHP loops

Post by kdidymus »

Folks.

I've been wracking my brains for days on this one and all of the solutions I've come up with so far have been less than successful.

Here is my problem:

My website (http://www.didymus.org.uk) is complete. On the family tree section there is a facility to generate an A-Z list of all of my ancestors / descendants by surname or forename.

Problem is, there are now 1355 individuals on my dB and the HTML page that is generated by my PHP code is over 3Mb in size! It takes about 15 seconds on my computer to load.

So. I decided to have a "PLEASE WAIT" message. At the moment a page loads which displays the please wait message for a few seconds. It then meta refreshes to the main A-Z list.

To see this in action go to http://www.didymus.org.uk/tree/a-zsnwait.php

What I would LIKE to do is have the PLEASE WAIT message generated WHILE the main page populates.

I thought about using frames but I want to keep the site as cross-browser compatible as possible.

Any ideas? Would using a <DIV> be a good idea and if so, what code would I need?

Thank you so very much in advance.

KD.
User avatar
php_east
Forum Contributor
Posts: 453
Joined: Sun Feb 22, 2009 1:31 pm
Location: Far Far East.

Re: Please Wait message while PHP loops

Post by php_east »

i would use a simple xml rpc ( ajax ) to load the divs gradually, and after final div load, remove the "please wait" message and display instead perhaps "information list completed".

the nice advantage of ajax is you have an onready function, which is superbly convenient in your case. that would assure you cross browser compatiblity.

( btw, why does it takes so long to load ? the info/table you have is not relatively big at all. )
mattpointblank
Forum Contributor
Posts: 304
Joined: Tue Dec 23, 2008 6:29 am

Re: Please Wait message while PHP loops

Post by mattpointblank »

That page almost crashed my browser, haha. Maybe don't allow users to view an entire A-Z at once, but show them it a letter at a time? There can't be many situations where they'll need a thousand rows on a page...
kdidymus
Forum Contributor
Posts: 196
Joined: Tue May 13, 2008 3:37 am

Re: Please Wait message while PHP loops

Post by kdidymus »

PHP_East. Your reply has me intrigued.

I have done some cursory research on the web and found...

http://www.funkyajax.com/pleasewait_page.html

Is this what you meant and if so can you help me out with how I would actually integrate this in to my page? Also, if you look at the example on the above tutorial, there is a dialogue box that pops up once the page has loaded. It's ugly and I'd prefer not to have that!

I'm relatively new to PHP and Ajax is a complete mystery to me!!

Mattpointblank - I agree with you and I did consider using a drop-down menu for A, B, C.. etc. but it just didn't sit right with my site. If all else fails I may have to consider this again!

KD.
mmoussa
Forum Newbie
Posts: 8
Joined: Wed Mar 18, 2009 8:43 am

Re: Please Wait message while PHP loops

Post by mmoussa »

By the way, the reason your A-Z index takes so long to load is because of the massive amount of HTML present.

Code: Select all

 
<tr>
<td class='bblk7' bgcolor='#ffffff' nowrap='nowrap'><font face='Arial' size='1' color='#000000'>&nbsp;</font><img border='0' src='../graphics/fem.gif' alt=''></img></td>
<td class='bblk7' bgcolor='#ffffff' width='10' nowrap='nowrap'><font face='Arial' size='1' color='#000000'>&nbsp;</font></td>
<td class='bblk7' bgcolor='#ffffff' nowrap='nowrap'><font face='Arial' size='1' color='#000000'><font color='#000000'>193161881</font></font></td>
<td class='bblk7' bgcolor='#ffffff' width='10' nowrap='nowrap'><font face='Arial' size='1' color='#000000'>&nbsp;</font></td>
<td class='bblk7' bgcolor='#ffffff' nowrap='nowrap'><font face='Arial' size='1' color='#000000'><font color='#000000'>Samuel C</font></font></td>
<td class='bblk7' bgcolor='#ffffff' width='10' nowrap='nowrap'><font face='Arial' size='1' color='#000000'>&nbsp;</font></td>
<td class='bblk7' bgcolor='#ffffff' nowrap='nowrap'><font face='Arial' size='1' color='#000000'><font color='#000000'>PITCHFORD</font></font></td>
 
<td class='bblk7' bgcolor='#ffffff' width='10' nowrap='nowrap'><font face='Arial' size='1' color='#000000'>&nbsp;</font></td>
<td class='bblk7' bgcolor='#ffffff' nowrap='nowrap'><font face='Arial' size='1' color='#000000'><font color='#000000'>c.1881</font></font></td>
<td class='bblk7' bgcolor='#ffffff' width='10' nowrap='nowrap'><font face='Arial' size='1' color='#000000'>&nbsp;</font></td>
<td class='bblk7' bgcolor='#ffffff' nowrap='nowrap' align='right'><font face='Arial' size='1' color='#000000'><font color='#000000'>0</font></font></td>
<td class='bblk7' bgcolor='#ffffff' width='10' nowrap='nowrap'><font face='Arial' size='1' color='#000000'>&nbsp;</font></td>
<td class='bblk7' bgcolor='#ffffff' nowrap='nowrap' align='right'><font face='Arial' size='1' color='#000000'><font color='#000000'>0</font></font></td>
<td class='bblk7' bgcolor='#ffffff' width='10' nowrap='nowrap'><font face='Arial' size='1' color='#000000'>&nbsp;</font></td>
<td class='bblk7' bgcolor='#ffffff' nowrap='nowrap' align='right'><font face='Arial' size='1' color='#000000'><font color='#000000'>N</font></font></td>
<td class='bblk7' bgcolor='#ffffff' width='10' nowrap='nowrap'><font face='Arial' size='1' color='#000000'>&nbsp;</font></td>
<td class='bblk7' bgcolor='#ffffff' nowrap='nowrap' align='right'><font face='Arial' size='1' color='#000000'><font color='#000000'>0</font></font></td>
<td class='bblk7' bgcolor='#ffffff' width='10' nowrap='nowrap'><font face='Arial' size='1' color='#000000'>&nbsp;</font></td>
<td class='bblk3' bgcolor='#e0eff6' nowrap='nowrap' width='33'><font face='Arial' size='1' color='#000000'>&nbsp;</font><a style='text-decoration: none; font-family: Arial; font-size: 8pt; color: #000000; font-weight: bold' href='display.php?urn=193161881'>VIEW</a><font face='Arial' size='1' color='#000000'>&nbsp;</font></td>
</tr>
 
And that's just for one person... you could easily eliminate most of that extra markup by using external CSS.
User avatar
Inkyskin
Forum Contributor
Posts: 282
Joined: Mon Nov 19, 2007 10:15 am
Location: UK

Re: Please Wait message while PHP loops

Post by Inkyskin »

Have you thought about paginating the results, rather than having one huge page?
crazycoders
Forum Contributor
Posts: 260
Joined: Tue Oct 28, 2008 7:48 am
Location: Montreal, Qc, Canada

Re: Please Wait message while PHP loops

Post by crazycoders »

I'm not sure what is so wrong about this... I don't think it's the data (apart maybe from the load of HTML that you send back) but 1500 rows... a 3mb database? I work with postalcode data and return 50 000 lines in less than 2 seconds. Maybe your output algorythm needs to be revised?
kdidymus
Forum Contributor
Posts: 196
Joined: Tue May 13, 2008 3:37 am

Re: Please Wait message while PHP loops

Post by kdidymus »

You are ALL (of course) absolutely right.

There I was worrying about displaying a "Please Wait" message when all things being equal, I shouldn't need one.

What was shocking was to see my HTML laid bare. A massive amount of HTML which, with some clever CSS work could be halved if not quartered.

I am going to revise my PHP code tonight and I shall let you know how I get on!!

KD.
User avatar
php_east
Forum Contributor
Posts: 453
Joined: Sun Feb 22, 2009 1:31 pm
Location: Far Far East.

Re: Please Wait message while PHP loops

Post by php_east »

kdidymus wrote:PHP_East. Your reply has me intrigued.
I have done some cursory research on the web and found...
http://www.funkyajax.com/pleasewait_page.html
Is this what you meant and if so can you help me out with how I would actually integrate this in to my page?
yes, exactly, it spells out what i meant very nicely indeed.
and sure i could help you through it, once you are done cleaning the chimneys of your site :)
have fun.

you might not need it after a good optimisation of your site, which is then a good thing.
kdidymus
Forum Contributor
Posts: 196
Joined: Tue May 13, 2008 3:37 am

Re: Please Wait message while PHP loops

Post by kdidymus »

PHP_East. Thank you for your offer but to be honest, the clean-up is going so well I'm unlikely to need a Please Wait message at all.

CSS is a pain in the rear and it's taking some time to "tweak" it so that it looks right!

KD.
User avatar
php_east
Forum Contributor
Posts: 453
Joined: Sun Feb 22, 2009 1:31 pm
Location: Far Far East.

Re: Please Wait message while PHP loops

Post by php_east »

alright, have fun. ta :)
kdidymus
Forum Contributor
Posts: 196
Joined: Tue May 13, 2008 3:37 am

Re: Please Wait message while PHP loops

Post by kdidymus »

Okay.

So I've now used external CSS and the size of the HTML generated is just over a megabyte!

Not bad considering the amount of data downloaded - a third of the original size.

I would like to know how to create the loading message if it's not too much trouble PHP_East. I've found a few guides to doing this but I'll need a jump start!

I figure that with slower internet connections the 5 second D/L time I experience would be considerable higher and the reassurance that something is happening might stop my visitors closing down and going elsewhere!

KD.
User avatar
php_east
Forum Contributor
Posts: 453
Joined: Sun Feb 22, 2009 1:31 pm
Location: Far Far East.

Re: Please Wait message while PHP loops

Post by php_east »

okay, with you being happy with the current loading times, we can take a short cut and do a simple div for the please wait message, doing away with ajax altogether.

the display

Code: Select all

<div name="wait_for_it" id="wait_for_it" class="myclass">Please kindly wait until the download completes.</div> 

and in your head section, the javascript that will remove the message once finished loading.

Code: Select all

<head>
<script type="text/javascript">
function remove_loading_div()
{
element=document.getElementById('wait_for_it');
if (element) element.style.display='none';
}
windows.onload=remove_loading_div();
</script>
:
: other head items
:
</head>
<body> 
and that would be it...
codes untested, just off the top of my head, may need some tweaking.
just yell if you hit a snag.

p/s for the message itself, what i usually do is make w3c faint.
<blink>Please kindly wait until the download completes.</blink>
kdidymus
Forum Contributor
Posts: 196
Joined: Tue May 13, 2008 3:37 am

Re: Please Wait message while PHP loops

Post by kdidymus »

Thanks so much for this. Going to give it a go and will yell if I hit any snags.

KD.
kdidymus
Forum Contributor
Posts: 196
Joined: Tue May 13, 2008 3:37 am

Re: Please Wait message while PHP loops

Post by kdidymus »

Hmm. First bit works fantastically well. Of course, I'll be changing the standard <DIV> for a centred, floating one eventually.

Problem is, the message doesn't dissapear once the page has loaded.

To see that I mean:

http://www.didymus.org.uk/tree/a-zfn2.php

This is the initial section of the PHP for that page:

Code: Select all

<?php
/* Program: a-zfn.php
 * Version: 2.01
 * Desc:    Create A-Z list by Forename.
 * Author:  Kris Didymus
 * Date:    21/03/2009
 */
 
// SET BASIC VARIABLES FOR PROGRAM
 
$link = "display.php?urn="; // Defines format of hyperlinks
$text = "font face='Arial' size='1'"; // Defines font, size, weight & colour for default text
$lettxt = "font face='Arial' size='5' color='#ffffff'"; // Defines letter text
$hltext = "style='text-decoration: none; font-family: Arial; font-size: 8pt; color: #000000; font-weight: bold'"; // Hyperlink appearance
$ahltext = "style='text-decoration: none; font-family: Arial; font-size: 8pt; color: #ff0000; font-weight: bold'"; // Active hyperlink appearance
$nw = "nowrap='nowrap'"; // Sets macro for repetitive HTML NOWRAP command
$bgc1 = "bgcolor='#e0eff6'"; // This and next 7 lines define table background colours to avoid repetition
$bgc2 = "bgcolor='#162b42'";
$bgc3 = "bgcolor='#c2cfd5'";
$bgc4 = "bgcolor='#5595cb'";
$bgc5 = "bgcolor='#79b4dd'";
$bgc6 = "bgcolor='#ffffff'";
$al = "align='left'"; // Defines TD align left
$ac = "align='center'"; // Defines TD align center
$ar = "align='right'"; // Defines TD align right
$fields = "forename,middlenames,surname,relative,bloodline,yearofbirth,urn,photo1urn,photo2urn,photo3urn,photo4urn,photo5urn,photo6urn,
           photo7urn,photo8urn,photo9urn,photo10urn,cert1fn,cert2fn,cert3fn,cert4fn,cert5fn,stories1urn,stories2urn,stories3urn,stories4urn,
           stories5urn,stories6urn,stories7urn,stories8urn,stories9urn,stories10urn,census";
 
//CONNECT TO DATABASE
include_once("../*******.inc.php");
$cxn = mysql_connect($host,$user,$password) or die ("couldn't connect to server");
mysql_select_db($database);
 
// NOW LET'S START BUILDING OUR HTML PAGE AND POPULATING IT WITH DATA FROM THE DATABASE
 
echo "
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
   'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<!-- HEADER INFO FIRST -->
<head>
[color=#FF0000]<script type='text/javascript'>
function remove_loading_div()
{
element=document.getElementById('wait_for_it');
if (element) element.style.display='none';
}
windows.onload=remove_loading_div();
</script>[/color]
<meta http-equiv='Content-Type' content='text/html; charset=windows-1252'/>
<title>A-Z by Forename | Didymus.org.uk | Family Tree</title>
<meta name='author' content='Kris Didymus'/>
<meta name='keywords' content='family,tree,genealogy,didymus,oliver,bending,nettleton'/>
<meta name='description' content='On-line family tree of the Didymus and Oliver families...'/>
<link rel='stylesheet' href='../css/lytebox.css' type='text/css' media='screen' />
</head>
<body $bgc1>
[color=#FF0000]<div name='wait_for_it' id='wait_for_it' class='myclass'>Please kindly wait until the download completes.</div>[/color]
<a name='top'></a>
<!-- CREATE 3 ROW 100% TABLE FOR DISPLAY OF WHOLE PAGE -->
.......
Post Reply