Page 1 of 2

Please Wait message while PHP loops

Posted: Thu Mar 19, 2009 4:46 am
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.

Re: Please Wait message while PHP loops

Posted: Thu Mar 19, 2009 4:55 am
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. )

Re: Please Wait message while PHP loops

Posted: Thu Mar 19, 2009 5:01 am
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...

Re: Please Wait message while PHP loops

Posted: Thu Mar 19, 2009 7:45 am
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.

Re: Please Wait message while PHP loops

Posted: Thu Mar 19, 2009 8:38 am
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.

Re: Please Wait message while PHP loops

Posted: Thu Mar 19, 2009 8:40 am
by Inkyskin
Have you thought about paginating the results, rather than having one huge page?

Re: Please Wait message while PHP loops

Posted: Thu Mar 19, 2009 12:57 pm
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?

Re: Please Wait message while PHP loops

Posted: Thu Mar 19, 2009 2:04 pm
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.

Re: Please Wait message while PHP loops

Posted: Fri Mar 20, 2009 2:47 pm
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.

Re: Please Wait message while PHP loops

Posted: Sat Mar 21, 2009 12:35 am
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.

Re: Please Wait message while PHP loops

Posted: Sat Mar 21, 2009 3:09 am
by php_east
alright, have fun. ta :)

Re: Please Wait message while PHP loops

Posted: Sat Mar 21, 2009 5:08 am
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.

Re: Please Wait message while PHP loops

Posted: Sat Mar 21, 2009 5:41 am
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>

Re: Please Wait message while PHP loops

Posted: Sat Mar 21, 2009 6:45 am
by kdidymus
Thanks so much for this. Going to give it a go and will yell if I hit any snags.

KD.

Re: Please Wait message while PHP loops

Posted: Sat Mar 21, 2009 6:53 am
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 -->
.......