Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

AJAX to update the web page instead of refresh 2

Status
Not open for further replies.
arunrr

arunrr

Programmer
Oct 2, 2009
103
US
Hello,
I have the following "messages.php" that refreshes every 15 minutes. A separate script writes to the MYDB1 database based on user input. I need an AJAX based methosd to update the web page, as opposed to the refresh below.
thanks,
Arun

<HTML>
<HEAD>
<meta http-equiv="refresh" content="15">
</HEAD>
<body onload="scrollTo(0,9999);">
<TABLE>
<?php
$con = mysql_connect("localhost","test","testpasswd");
$table = messages;
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db(MYDB1);
$query = "SELECT * FROM $table";
$result = mysql_query($query);

$num = mysql_num_rows($result);
mysql_close();
if ($num > 50)
{
$i = $num - 50;
}
else
{
$i = 0;
}
while ($i < $num) {
$f1 = mysql_result($result,$i,"Username");
$f2 = mysql_result($result,$i,"Time");
$f3 = mysql_result($result,$i,"Message");
?>
<TR>
<TD width="25%" align="right"><span style="font-size:11;color:#D40606;"><b><?php echo $f1; ?>
<span style="font-size:11;color:lightgrey;"> [<?php echo $f2; ?>]:</b></span></TD>
<TD width="75%" align="left"><span style="font-size:11;color:black;"><b> <?php echo $f3; ?></b></span></TD>
</TR>
<?php
$i++;
}
?>
</TABLE>
</body>
</HTML>
 
Sort by date Sort by votes
Hi

Will you consider me rude if I say your code looks so horrible that it should be rewritten from zero ?

As I can deduce, you want to list only the last 50 records ?

I suggest to use incremental update : instead of transferring each time the last 50, transfer just the differences since the previous request.

By the way, are you sure that your page "refreshes every 15 minutes" ? To me looks like 15 seconds.

Feherke.
 
Upvote 0 Downvote
An rough ajax based method (devised from which runs script.php every 10 seconds, and prints any output it produces.

Code: 
<html>
<head>
<script type="text/javascript">
window.onload = loadXMLDoc;
function loadXMLDoc(url) {
	if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
		xmlhttp.open("GET",url,false);
		xmlhttp.send(null);
	}
	else {// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		xmlhttp.open("GET",url,false);
		xmlhttp.send();
	}
	document.getElementById('response-div').innerHTML=xmlhttp.responseText;
	setTimeout("loadXMLDoc('script.php');",10000);
}
</script>
</head>

<body>

<div id="response-div"></div>

</body>
</html>

Chris
 
Upvote 0 Downvote
Hello Feherke,

No, it's not rude at all. In fact you are probably right!!
I have almost no programming background and have put the entire site together. Chances are, a lot of the code ain't the best. However, they work, and i have some decent traffic on the site.

Please feel free to change the script if you choose...

Apreciate it,
Arun
 
Upvote 0 Downvote
Hi

Is the Message Board the one you want to Ajaxify ? If yes, then I see no reason for displaying exactly 50 records. Well, you could start with 50, but then just append new data without removing the old.

As I observe, there is rarely a message every 15 seconds, so transferring the same 50 as is already displayed, again & again, seems pointless.

By the way, could you show us the messages SQL table's structure, so I can recreate it locally for testing ?

Feherke.
 
Upvote 0 Downvote
Thanks in advance Feherke...

Yes, the message board is the one i want to Ajaxfy. The reason i picked '50' messages is because i did not see any reason in going back in history. However, the apend idea is fine. Right now, this message board has only been up for 2 days. So has to pick up momentum. Expect usage to pick up.

Table structure (3 fields: Username, Time, Message):

Username Time Message
arun 02Apr10 13:16:00 cant believe they lost again
arun 02Apr10 13:16:23 Make the most of this
madhumk 02Apr10 16:12:22 i was to see CSK in semis
arun 02Apr10 13:50:22 hi seenu
madhumk 02Apr10 16:16:22 it is certainly possible
niki 02Apr10 16:17:00 RCB will win it this year
 
Upvote 0 Downvote
Hi

Feherke said:
could you show us the messages SQL table's structure
Click to expand...
I mean, the structure, as is displayed by the [tt]show[/tt] statement : show columns from message;

The point was to find out
[ul]
[li]there is an auto_increment field[/li]
[li]the type of the time field[/li]
[/ul]
Currently your query has no [tt]order[/tt] clause, so the records are returned in the order in which the server picks them up from the storage. That order can not be directly influenced. That is why an auto_increment field would be good. Or if you have none, a field of type [tt]datetime[/tt] would also be good.

Feherke.
 
Upvote 0 Downvote
Hi

Almost forget it. An [tt]auto_increment[/tt] or [tt]datetime[/tt] field is needed for the incremental update too, so we can identify exactly which was the previously last sent record.

Feherke.
 
Upvote 0 Downvote
Here it is...

mysql> show columns from messages;
+----------+--------------+------+-----+---------+-------+
| Field | Type | Null | Key | Default | Extra |
+----------+--------------+------+-----+---------+-------+
| Username | varchar(20) | NO | | NULL | |
| Time | varchar(20) | NO | | NULL | |
| Message | varchar(140) | NO | | NULL | |
+----------+--------------+------+-----+---------+-------+
3 rows in set (0.02 sec)

Also, cant we use the "Time" field for the increment?
Thanks,
Arun
 
Upvote 0 Downvote
Hi

Arun said:
Also, cant we use the "Time" field for the increment?
Click to expand...
You mean as an [tt]auto_increment[/tt] field ? Probably not. As far as I know, it must be a numeric field. ( Note that I not know MySQL, but this is quite the same everywhere. )

Alternatively we could use the record count. But that means, if you will delete records from the table, the refreshes will stop until the visitor reloads the entire page. Anyway, I do not recommend this approach as the ordering is still not guaranteed.

I suggest to execute this SQL statement :
Code: 
alter table message add column id integer primary key auto_increment;
This will add a new field with name id of type [tt]integer[/tt] and sets it as [tt]auto_increment[/tt] field. For currently existing records the id field will be filled immediately. For the next records the field will be automatically filled with the last id value+1. So the id field must not be explicitly set by the [tt]insert[/tt] statement when the PHP script [tt]insert[/tt]s the new messages into the table.

Feherke.
 
Upvote 0 Downvote
Hi

After executing the [tt]alter[/tt] statement I posted previously, this script should work :
Code: 
[teal]<?php[/teal]

[navy]$con[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_connect[/color][teal]([/teal][green][i]'localhost'[/i][/green][teal],[/teal][green][i]'test'[/i][/green][teal],[/teal][green][i]'testpasswd'[/i][/green][teal]);[/teal]
[COLOR=darkgoldenrod]mysql_select_db[/color][teal]([/teal][green][i]'MYDB1'[/i][/green][teal]);[/teal]

[b]if[/b] [teal]([/teal][COLOR=darkgoldenrod]is_numeric[/color][teal]([/teal][navy]$_GET[/navy][teal][[/teal][green][i]'last'[/i][/green][teal]]))[/teal] [teal]{[/teal]

  [navy]$sql[/navy][teal]=[/teal][green][i]'select id,username,time,message from messages where id>'[/i][/green][teal].[/teal][COLOR=darkgoldenrod]mysql_real_escape_string[/color][teal]([/teal][navy]$_GET[/navy][teal][[/teal][green][i]'last'[/i][/green][teal]]).[/teal][green][i]' order by id'[/i][/green][teal];[/teal]
  [navy]$res[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_query[/color][teal]([/teal][navy]$sql[/navy][teal]);[/teal]

  [b]while[/b] [teal]([/teal][navy]$row[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_fetch_assoc[/color][teal]([/teal][navy]$res[/navy][teal]))[/teal] [teal]{[/teal]
    [navy]$last[/navy][teal]=[/teal][navy]$row[/navy][teal][[/teal][green][i]'id'[/i][/green][teal]];[/teal]
    [navy]$chunk[/navy][teal].=[/teal][green][i]"[ $row[time] ]<b>$row[username]</b> $row[message]<br>\n"[/i][/green][teal];[/teal]
  [teal]}[/teal]

  [b]if[/b] [teal](![/teal][navy]$chunk[/navy][teal])[/teal] [teal]{[/teal]
    [COLOR=darkgoldenrod]header[/color][teal]([/teal][green][i]'Content-type: text/javascript'[/i][/green][teal]);[/teal]
    [COLOR=darkgoldenrod]header[/color][teal]([/teal][green][i]'HTTP/1.1 204 No Content'[/i][/green][teal]);[/teal]
    [b]return[/b][teal];[/teal]
  [teal]}[/teal]

  [COLOR=darkgoldenrod]header[/color][teal]([/teal][green][i]'Content-type: text/javascript'[/i][/green][teal]);[/teal]
  [b]echo[/b] [COLOR=darkgoldenrod]json_encode[/color][teal]([/teal][b]array[/b][teal]([/teal][navy]$last[/navy][teal],[/teal][navy]$chunk[/navy][teal]));[/teal]

  [b]return[/b][teal];[/teal]

[teal]}[/teal]

[teal]?>[/teal]
[teal]<![/teal]DOCTYPE HTML PUBLIC [green][i]"-//W3C//DTD HTML 4.01//EN"[/i][/green] [green][i]"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd"[/URL][/i][/green][teal]>[/teal]
[teal]<[/teal]html lang[teal]=[/teal][green][i]"en"[/i][/green][teal]>[/teal]

[teal]<[/teal]head[teal]>[/teal]
[teal]<[/teal]meta http[teal]-[/teal]equiv[teal]=[/teal][green][i]"Content-Type"[/i][/green] content[teal]=[/teal][green][i]"text/html; charset=iso-8859-1"[/i][/green][teal]>[/teal]
[teal]<[/teal]title[teal]>[/teal]BCCI Message Board[teal]</[/teal]title[teal]>[/teal]
[teal]<[/teal]style type[teal]=[/teal][green][i]"text/css"[/i][/green][teal]>[/teal]
[teal]</[/teal]style[teal]>[/teal]
[teal]</[/teal]head[teal]>[/teal]

[teal]<[/teal]body[teal]>[/teal]

[teal]<[/teal]div id[teal]=[/teal][green][i]"board"[/i][/green][teal]>[/teal]

[teal]<?php[/teal]

[navy]$sql[/navy][teal]=[/teal][green][i]'select * from (select id,username,time,message from messages order by id desc limit 5) foo order by id'[/i][/green][teal];[/teal]
[navy]$res[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_query[/color][teal]([/teal][navy]$sql[/navy][teal]);[/teal]

[b]while[/b] [teal]([/teal][navy]$row[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_fetch_assoc[/color][teal]([/teal][navy]$res[/navy][teal]))[/teal] [teal]{[/teal]
  [navy]$last[/navy][teal]=[/teal][navy]$row[/navy][teal][[/teal][green][i]'id'[/i][/green][teal]];[/teal]
  [b]echo[/b] [green][i]"[ $row[time] ]<b>$row[username]</b> $row[message]<br>\n"[/i][/green][teal];[/teal]
[teal]}[/teal]

[teal]?>[/teal]

[teal]</[/teal]div[teal]>[/teal]

[teal]<[/teal]div[teal]><[/teal]a name[teal]=[/teal][green][i]"end"[/i][/green][teal]></[/teal]a[teal]></[/teal]div[teal]>[/teal]

[teal]<[/teal]script type[teal]=[/teal][green][i]"text/javascript"[/i][/green][teal]>[/teal]
[b]var[/b] last[teal]=[/teal][green][i]'<?php echo $last; ?>'[/i][/green]
board[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'board'[/i][/green][teal])[/teal]
[COLOR=darkgoldenrod]setInterval[/color][teal]([/teal]refresh[teal],[/teal][purple]1000[/purple][teal]*[/teal][purple]15[/purple][teal])[/teal]
location[teal].[/teal]hash[teal]=[/teal][green][i]'end'[/i][/green]

[b]function[/b] [COLOR=darkgoldenrod]refresh[/color][teal]()[/teal]
[teal]{[/teal]
  [b]var[/b] result[teal]=[/teal]undefined[teal],[/teal]obi[teal],[/teal]pos
  [b]var[/b] http[teal]=[/teal][b]new[/b] [COLOR=darkgoldenrod]XMLHttpRequest[/color][teal]()[/teal]
  http[teal].[/teal][COLOR=darkgoldenrod]open[/color][teal]([/teal][green][i]'GET'[/i][/green][teal],[/teal]document[teal].[/teal]location[teal].[/teal]pathname[teal]+[/teal][green][i]'?last='[/i][/green][teal]+[/teal]last[teal],[/teal]false[teal])[/teal]
  http[teal].[/teal][COLOR=darkgoldenrod]send[/color][teal]([/teal]null[teal])[/teal]
  [b]if[/b] [teal]([/teal]http[teal].[/teal]readyState[teal]!=[/teal][purple]4[/purple] [teal]||[/teal] http[teal].[/teal]status[teal]!=[/teal][purple]200[/purple][teal])[/teal] [b]return[/b]
  [b]eval[/b][teal]([/teal][green][i]'result='[/i][/green][teal]+[/teal]http[teal].[/teal]responseText[teal])[/teal]
  board[teal].[/teal]innerHTML[teal]+=[/teal]result[teal][[/teal][purple]1[/purple][teal]][/teal]
  last[teal]=[/teal]result[teal][[/teal][purple]0[/purple][teal]][/teal]
  location[teal].[/teal]hash[teal]=[/teal][green][i]'end'[/i][/green]
[teal]}[/teal]
[teal]</[/teal]script[teal]>[/teal]

[teal]</[/teal]body[teal]>[/teal]

[teal]</[/teal]html[teal]>[/teal]

Feherke.
 
Upvote 0 Downvote
Hi,

I am done with the 'alter'. Also tested an insert. 'ID' field increments automatically. PHP script insert statement not changed. All ok!

Thanks,
Arun
 
Upvote 0 Downvote
Hi Feherke,

Implemented your code. Works fine. Thanks a ton!!

Please see:
I notice a delay in the update in the display of messages . I played with the "setInterval(refresh,1000*15)". Changed the 15 to 5 and then 1. Any other suggestions? However, this is fine, as is.

Thanks,
Arun
 
Upvote 0 Downvote
Hi Feherke,

Couple of other points...

- the display only shows the last 5 messages when we first login.
- The scroll to bottom on load occurs for the whole page, not just the frame.

Thanks,
Arun
 
Upvote 0 Downvote
Hi

Arun said:
I notice a delay in the update in the display of messages . I played with the "setInterval(refresh,1000*15)". Changed the 15 to 5 and then 1.
Click to expand...
And if you take a look at the FireBug Console or Net panel, you will see that a request is made every second. Probably there is a caching issue.
Arun said:
the display only shows the last 5 messages when we first login.
Click to expand...
Yepp, I noticed that after posting. I was hoping that will be easy to figure it out.
Arun said:
The scroll to bottom on load occurs for the whole page, not just the frame.
Click to expand...
Ah, that is quite ugly. I not tested it inside a frame. Then we can not use the anchor like this. The simple way is to use [tt]window.scrollTo()[/tt]. The question is, at which pixel to scroll, as the page will continuously grow. The answer could be, to scroll at [tt]window.scrollMaxY[/tt], but that is Gecko-only. For now, a huge number will do it.
Code: 
[teal]<?php[/teal]

[navy]$con[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_connect[/color][teal]([/teal][green][i]'localhost'[/i][/green][teal],[/teal][green][i]'test'[/i][/green][teal],[/teal][green][i]'testpasswd'[/i][/green][teal]);[/teal]
[COLOR=darkgoldenrod]mysql_select_db[/color][teal]([/teal][green][i]'MYDB1'[/i][/green][teal]);[/teal]

[b]if[/b] [teal]([/teal][COLOR=darkgoldenrod]is_numeric[/color][teal]([/teal][navy]$_GET[/navy][teal][[/teal][green][i]'last'[/i][/green][teal]]))[/teal] [teal]{[/teal]

  [navy]$sql[/navy][teal]=[/teal][green][i]'select id,username,time,message from messages where id>'[/i][/green][teal].[/teal][COLOR=darkgoldenrod]mysql_real_escape_string[/color][teal]([/teal][navy]$_GET[/navy][teal][[/teal][green][i]'last'[/i][/green][teal]]).[/teal][green][i]' order by id'[/i][/green][teal];[/teal]
  [navy]$res[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_query[/color][teal]([/teal][navy]$sql[/navy][teal]);[/teal]

  [b]while[/b] [teal]([/teal][navy]$row[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_fetch_assoc[/color][teal]([/teal][navy]$res[/navy][teal]))[/teal] [teal]{[/teal]
    [navy]$last[/navy][teal]=[/teal][navy]$row[/navy][teal][[/teal][green][i]'id'[/i][/green][teal]];[/teal]
    [navy]$chunk[/navy][teal].=[/teal][green][i]"[ $row[time] ]<b>$row[username]</b> $row[message]<br>\n"[/i][/green][teal];[/teal]
  [teal]}[/teal]

  [b]if[/b] [teal](![/teal][navy]$chunk[/navy][teal])[/teal] [teal]{[/teal]
    [COLOR=darkgoldenrod]header[/color][teal]([/teal][green][i]'Content-type: text/javascript'[/i][/green][teal]);[/teal]
    [COLOR=darkgoldenrod]header[/color][teal]([/teal][green][i]'HTTP/1.1 204 No Content'[/i][/green][teal]);[/teal]
    [b]return[/b][teal];[/teal]
  [teal]}[/teal]

  [COLOR=darkgoldenrod]header[/color][teal]([/teal][green][i]'Content-type: text/javascript'[/i][/green][teal]);[/teal]
  [b]echo[/b] [COLOR=darkgoldenrod]json_encode[/color][teal]([/teal][b]array[/b][teal]([/teal][navy]$last[/navy][teal],[/teal][navy]$chunk[/navy][teal]));[/teal]

  [b]return[/b][teal];[/teal]

[teal]}[/teal]

[teal]?>[/teal]
[teal]<![/teal]DOCTYPE HTML PUBLIC [green][i]"-//W3C//DTD HTML 4.01//EN"[/i][/green] [green][i]"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd"[/URL][/i][/green][teal]>[/teal]
[teal]<[/teal]html lang[teal]=[/teal][green][i]"en"[/i][/green][teal]>[/teal]

[teal]<[/teal]head[teal]>[/teal]
[teal]<[/teal]meta http[teal]-[/teal]equiv[teal]=[/teal][green][i]"Content-Type"[/i][/green] content[teal]=[/teal][green][i]"text/html; charset=iso-8859-1"[/i][/green][teal]>[/teal]
[teal]<[/teal]title[teal]>[/teal]BCCI Message Board[teal]</[/teal]title[teal]>[/teal]
[teal]<[/teal]style type[teal]=[/teal][green][i]"text/css"[/i][/green][teal]>[/teal]
[teal]</[/teal]style[teal]>[/teal]
[teal]</[/teal]head[teal]>[/teal]

[teal]<[/teal]body[teal]>[/teal]

[teal]<[/teal]div id[teal]=[/teal][green][i]"board"[/i][/green][teal]>[/teal]

[teal]<?php[/teal]

[navy]$sql[/navy][teal]=[/teal][green][i]'select * from (select id,username,time,message from messages order by id desc limit 5[highlight]0[/highlight]) foo order by id'[/i][/green][teal];[/teal]
[navy]$res[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_query[/color][teal]([/teal][navy]$sql[/navy][teal]);[/teal]

[b]while[/b] [teal]([/teal][navy]$row[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_fetch_assoc[/color][teal]([/teal][navy]$res[/navy][teal]))[/teal] [teal]{[/teal]
  [navy]$last[/navy][teal]=[/teal][navy]$row[/navy][teal][[/teal][green][i]'id'[/i][/green][teal]];[/teal]
  [b]echo[/b] [green][i]"[ $row[time] ]<b>$row[username]</b> $row[message]<br>\n"[/i][/green][teal];[/teal]
[teal]}[/teal]

[teal]?>[/teal]

[teal]</[/teal]div[teal]>[/teal]

[teal]<[/teal]script type[teal]=[/teal][green][i]"text/javascript"[/i][/green][teal]>[/teal]
[b]var[/b] last[teal]=[/teal][green][i]'<?php echo $last; ?>'[/i][/green]
board[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'board'[/i][/green][teal])[/teal]
[COLOR=darkgoldenrod]setInterval[/color][teal]([/teal]refresh[teal],[/teal][purple]1000[/purple][teal]*[/teal][purple]15[/purple][teal])[/teal]
[highlight]window[teal].[/teal][COLOR=darkgoldenrod]scrollTo[/color][teal]([/teal][purple]0[/purple][teal],[/teal][purple]1000000000[/purple][teal])[/teal][/highlight]

[b]function[/b] [COLOR=darkgoldenrod]refresh[/color][teal]()[/teal]
[teal]{[/teal]
  [b]var[/b] result[teal]=[/teal]undefined[teal],[/teal]obi[teal],[/teal]pos
  [b]var[/b] http[teal]=[/teal][b]new[/b] [COLOR=darkgoldenrod]XMLHttpRequest[/color][teal]()[/teal]
  http[teal].[/teal][COLOR=darkgoldenrod]open[/color][teal]([/teal][green][i]'GET'[/i][/green][teal],[/teal]document[teal].[/teal]location[teal].[/teal]pathname[teal]+[/teal][green][i]'?last='[/i][/green][teal]+[/teal]last[highlight][teal]+[/teal][green][i]'&'[/i][/green][teal]+([/teal][b]new[/b] [COLOR=darkgoldenrod]Date[/color][teal]()).[/teal][COLOR=darkgoldenrod]getTime[/color][teal]()[/teal][/highlight][teal],[/teal]false[teal])[/teal]
  http[teal].[/teal][COLOR=darkgoldenrod]send[/color][teal]([/teal]null[teal])[/teal]
  [b]if[/b] [teal]([/teal]http[teal].[/teal]readyState[teal]!=[/teal][purple]4[/purple] [teal]||[/teal] http[teal].[/teal]status[teal]!=[/teal][purple]200[/purple][teal])[/teal] [b]return[/b]
  [b]eval[/b][teal]([/teal][green][i]'result='[/i][/green][teal]+[/teal]http[teal].[/teal]responseText[teal])[/teal]
  board[teal].[/teal]innerHTML[teal]+=[/teal]result[teal][[/teal][purple]1[/purple][teal]][/teal]
  last[teal]=[/teal]result[teal][[/teal][purple]0[/purple][teal]][/teal]
  [highlight]window[teal].[/teal][COLOR=darkgoldenrod]scrollTo[/color][teal]([/teal][purple]0[/purple][teal],[/teal][purple]1000000000[/purple][teal])[/teal][/highlight]
[teal]}[/teal]
[teal]</[/teal]script[teal]>[/teal]

[teal]</[/teal]body[teal]>[/teal]

[teal]</[/teal]html[teal]>[/teal]

Feherke.
 
Upvote 0 Downvote
Hi Feherke,

Implemented successfully in the test site. Will move over shortly. Thanks for your assistance. Awesome!!

Arun
 
Upvote 0 Downvote
Hi

In meantime I was thinking about this continuously growing page. After awhile the refreshing may determine flickering in some browsers or even spin up the CPU usage in others.

That [tt]board.innerHTML+=result[1][/tt] is the simplest way to append the new content, but it determines the re-rendering of the entire [tt]div[/tt]. And is harder to remove the oldest messages if you want to keep only a constant number of messages.

This version places each message in a separate [tt]div[/tt], so they can be easily deleted later, keeping only maxmessage messages on the page :
Code: 
[teal]<?php[/teal]

[navy]$con[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_connect[/color][teal]([/teal][green][i]'localhost'[/i][/green][teal],[/teal][green][i]'test'[/i][/green][teal],[/teal][green][i]'testpasswd'[/i][/green][teal]);[/teal]
[COLOR=darkgoldenrod]mysql_select_db[/color][teal]([/teal][green][i]'MYDB1'[/i][/green][teal]);[/teal]

[b]if[/b] [teal]([/teal][COLOR=darkgoldenrod]is_numeric[/color][teal]([/teal][navy]$_GET[/navy][teal][[/teal][green][i]'last'[/i][/green][teal]]))[/teal] [teal]{[/teal]

  [navy]$sql[/navy][teal]=[/teal][green][i]'select id,username,time,message from messages where id>'[/i][/green][teal].[/teal][COLOR=darkgoldenrod]mysql_real_escape_string[/color][teal]([/teal][navy]$_GET[/navy][teal][[/teal][green][i]'last'[/i][/green][teal]]).[/teal][green][i]' order by id'[/i][/green][teal];[/teal]
  [navy]$res[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_query[/color][teal]([/teal][navy]$sql[/navy][teal]);[/teal]

  [navy]$message[/navy][teal]=[/teal][b]array[/b][teal]();[/teal]
  [b]while[/b] [teal]([/teal][navy]$row[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_fetch_assoc[/color][teal]([/teal][navy]$res[/navy][teal]))[/teal] [teal]{[/teal]
    [navy]$last[/navy][teal]=[/teal][navy]$row[/navy][teal][[/teal][green][i]'id'[/i][/green][teal]];[/teal]
    [navy]$message[/navy][teal][]=[/teal][green][i]"[ $row[id] $row[online] ]<b>$row[name]</b> $row[addr]"[/i][/green][teal];[/teal]
  [teal]}[/teal]

  [b]if[/b] [teal](![/teal][navy]$message[/navy][teal])[/teal] [teal]{[/teal]
    [COLOR=darkgoldenrod]header[/color][teal]([/teal][green][i]'Content-type: text/javascript'[/i][/green][teal]);[/teal]
    [COLOR=darkgoldenrod]header[/color][teal]([/teal][green][i]'HTTP/1.1 204 No Content'[/i][/green][teal]);[/teal]
    [b]return[/b][teal];[/teal]
  [teal]}[/teal]

  [COLOR=darkgoldenrod]header[/color][teal]([/teal][green][i]'Content-type: text/javascript'[/i][/green][teal]);[/teal]
  [b]echo[/b] [COLOR=darkgoldenrod]json_encode[/color][teal]([/teal][b]array[/b][teal]([/teal][green][i]'last'[/i][/green][teal]=>[/teal][navy]$last[/navy][teal],[/teal][green][i]'message'[/i][/green][teal]=>[/teal][navy]$message[/navy][teal]));[/teal]

  [b]return[/b][teal];[/teal]

[teal]}[/teal]

[teal]?>[/teal]
[teal]<![/teal]DOCTYPE HTML PUBLIC [green][i]"-//W3C//DTD HTML 4.01//EN"[/i][/green] [green][i]"[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd"[/URL][/i][/green][teal]>[/teal]
[teal]<[/teal]html lang[teal]=[/teal][green][i]"en"[/i][/green][teal]>[/teal]

[teal]<[/teal]head[teal]>[/teal]
[teal]<[/teal]meta http[teal]-[/teal]equiv[teal]=[/teal][green][i]"Content-Type"[/i][/green] content[teal]=[/teal][green][i]"text/html; charset=iso-8859-1"[/i][/green][teal]>[/teal]
[teal]<[/teal]title[teal]>[/teal]BCCI Message Board[teal]</[/teal]title[teal]>[/teal]
[teal]<[/teal]style type[teal]=[/teal][green][i]"text/css"[/i][/green][teal]>[/teal]
[teal]</[/teal]style[teal]>[/teal]
[teal]</[/teal]head[teal]>[/teal]

[teal]<[/teal]body[teal]>[/teal]

[teal]<[/teal]div id[teal]=[/teal][green][i]"board"[/i][/green][teal]>[/teal]

[teal]<?php[/teal]

[navy]$sql[/navy][teal]=[/teal][green][i]'select * from (select id,username,time,message from messages order by id desc limit 50) foo order by id'[/i][/green][teal];[/teal]
[navy]$res[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_query[/color][teal]([/teal][navy]$sql[/navy][teal]);[/teal]

[b]while[/b] [teal]([/teal][navy]$row[/navy][teal]=[/teal][COLOR=darkgoldenrod]mysql_fetch_assoc[/color][teal]([/teal][navy]$res[/navy][teal]))[/teal] [teal]{[/teal]
  [navy]$last[/navy][teal]=[/teal][navy]$row[/navy][teal][[/teal][green][i]'id'[/i][/green][teal]];[/teal]
  [b]echo[/b] [green][i]"<div>[ $row[id] $row[online] ]<b>$row[name]</b> $row[addr]</div>\n"[/i][/green][teal];[/teal]
[teal]}[/teal]

[teal]?>[/teal]

[teal]</[/teal]div[teal]>[/teal]

[teal]<[/teal]div[teal]><[/teal]a name[teal]=[/teal][green][i]"end"[/i][/green][teal]></[/teal]a[teal]></[/teal]div[teal]>[/teal]

[teal]<[/teal]script type[teal]=[/teal][green][i]"text/javascript"[/i][/green][teal]>[/teal]
[b]var[/b] maxmessage[teal]=[/teal][purple]100[/purple]
[b]var[/b] last[teal]=[/teal][green][i]'<?php echo $last; ?>'[/i][/green]
board[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'board'[/i][/green][teal])[/teal]
[COLOR=darkgoldenrod]setInterval[/color][teal]([/teal]refresh[teal],[/teal][purple]1000[/purple][teal]*[/teal][purple]15[/purple][teal])[/teal]
window[teal].[/teal][COLOR=darkgoldenrod]scrollTo[/color][teal]([/teal][purple]0[/purple][teal],[/teal][purple]1000000000[/purple][teal])[/teal]

[b]function[/b] [COLOR=darkgoldenrod]refresh[/color][teal]()[/teal]
[teal]{[/teal]
  [b]var[/b] result[teal]=[/teal]undefined[teal],[/teal]obi[teal],[/teal]pos
  [b]var[/b] http[teal]=[/teal][b]new[/b] [COLOR=darkgoldenrod]XMLHttpRequest[/color][teal]()[/teal]
  http[teal].[/teal][COLOR=darkgoldenrod]open[/color][teal]([/teal][green][i]'GET'[/i][/green][teal],[/teal]document[teal].[/teal]location[teal].[/teal]pathname[teal]+[/teal][green][i]'?last='[/i][/green][teal]+[/teal]last[teal]+[/teal][green][i]'&'[/i][/green][teal]+[/teal][b]new[/b] [COLOR=darkgoldenrod]Date[/color][teal]().[/teal][COLOR=darkgoldenrod]getTime[/color][teal](),[/teal]false[teal])[/teal]
  http[teal].[/teal][COLOR=darkgoldenrod]send[/color][teal]([/teal]null[teal])[/teal]
  [b]if[/b] [teal]([/teal]http[teal].[/teal]readyState[teal]!=[/teal][purple]4[/purple] [teal]||[/teal] http[teal].[/teal]status[teal]!=[/teal][purple]200[/purple][teal])[/teal] [b]return[/b]
  [b]eval[/b][teal]([/teal][green][i]'result='[/i][/green][teal]+[/teal]http[teal].[/teal]responseText[teal])[/teal]
  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][purple]0[/purple][teal],[/teal]l[teal]=[/teal]result[teal].[/teal]message[teal].[/teal]length[teal];[/teal]i[teal]<[/teal]l[teal];[/teal]i[teal]++)[/teal] [teal]{[/teal]
    [b]var[/b] div[teal]=[/teal]document[teal].[/teal][COLOR=darkgoldenrod]createElement[/color][teal]([/teal][green][i]'div'[/i][/green][teal])[/teal]
    div[teal].[/teal]innerHTML[teal]=[/teal]result[teal].[/teal]message[teal][[/teal]i[teal]][/teal]
    board[teal].[/teal][COLOR=darkgoldenrod]appendChild[/color][teal]([/teal]div[teal])[/teal]
  [teal]}[/teal]
  [b]var[/b] [b]list[/b][teal]=[/teal]board[teal].[/teal][COLOR=darkgoldenrod]getElementsByTagName[/color][teal]([/teal][green][i]'div'[/i][/green][teal])[/teal]
  [b]for[/b] [teal]([/teal][b]var[/b] i[teal]=[/teal][b]list[/b][teal].[/teal]length[teal]-[/teal]maxmessage[teal]-[/teal][purple]1[/purple][teal];[/teal]i[teal]>=[/teal][purple]0[/purple][teal];[/teal]i[teal]--)[/teal] board[teal].[/teal][COLOR=darkgoldenrod]removeChild[/color][teal]([/teal][b]list[/b][teal][[/teal]i[teal]])[/teal]
  last[teal]=[/teal]result[teal].[/teal]last
  window[teal].[/teal][COLOR=darkgoldenrod]scrollTo[/color][teal]([/teal][purple]0[/purple][teal],[/teal]window[teal].[/teal]scrollMaxY[teal])[/teal]
[teal]}[/teal]
[teal]</[/teal]script[teal]>[/teal]

[teal]</[/teal]body[teal]>[/teal]

[teal]</[/teal]html[teal]>[/teal]

Feherke.
 
Upvote 0 Downvote
Hi,

I have now implemented your latest code. It is on the prod site. Works great. Thanks a million!!

Arun
 
Upvote 0 Downvote
Hi

Looks good. ;-)

But I would like to suggest some minor changes.

Currently you set it to request updates once per second. That spins up the processor usage abit even if there is no new message. So I would reduce the size of the HTML markup to reduce the amount of transferred and parsed data :
Code: 
[b]<div[/b] [maroon]style[/maroon][teal]=[/teal][green][i]"font-size:xx-small;color:lightgrey;"[/i][/green][b]>[/b][ 09Apr10 01:23:45 ][b]<span[/b] [maroon]style[/maroon][teal]=[/teal][green][i]"color:#D40606;"[/i][/green][b]><b>[/b]user[b]</b>[/b]: [b]<span[/b] [maroon]style[/maroon][teal]=[/teal][green][i]"color:black;"[/i][/green][b]>[/b]message[b]</div>[/b]
( Note that the above HTML is invalid. )
Code: 
[b]<div><span>[/b][ 09Apr10 01:23:45 ][b]</span><b>[/b]user[b]</b>[/b]: [b]<span>[/b]message[b]</div>[/b]
Code: 
div [teal]{[/teal]
  [blue]color:[/blue] [green]black[/green];
  [blue]font-size:[/blue] [green]xx-small[/green];
[teal]}[/teal]
b [teal]{[/teal]
  [blue]color:[/blue] [green][i]#D40606[/i][/green];
[teal]}[/teal]
span [teal]{[/teal]
  [blue]color:[/blue] [green]lightgray[/green];
[teal]}[/teal]
And while the message frame is quit narrow, I suggest to not display the date for each message, only the time. Then announce the day changing in separate message only when it occurs :
Code: 
[COLOR=lightgray][ 09Apr10 01:23:45 ][/color][b][COLOR=#D40606]user1[/color][/b]: message one
[COLOR=lightgray][ 09Apr10 11:22:33 ][/color][b][COLOR=#D40606]user2[/color][/b]: message two
[COLOR=lightgray][ 10Apr10 01:23:45 ][/color][b][COLOR=#D40606]user3[/color][/b]: message three
[COLOR=lightgray][ 10Apr10 22:33:44 ][/color][b][COLOR=#D40606]user4[/color][/b]: message four
Code: 
[COLOR=lightgray][ Day changed to 09Apr10 ][/color]
[COLOR=lightgray][ 01:23:45 ][/color][b][COLOR=#D40606]user1[/color][/b]: message one
[COLOR=lightgray][ 11:22:33 ][/color][b][COLOR=#D40606]user2[/color][/b]: message two
[COLOR=lightgray][ Day changed to 10Apr10 ][/color]
[COLOR=lightgray][ 01:23:45 ][/color][b][COLOR=#D40606]user3[/color][/b]: message three
[COLOR=lightgray][ 22:33:44 ][/color][b][COLOR=#D40606]user4[/color][/b]: message four
Of course, this is just a personal point of view.

Feherke.
 
Upvote 0 Downvote
Hi,

Implemented your suggestion for the styles. Did not do the "Day Changed to..". Have to figure out the code for that.

One issue - With IE, there seems to be an update problem. Works fine with Chrome and Firefox.

Thanks a ton,
Arun
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

penguinspeaks
  • Locked
  • Question
Refresh page after input from another
Replies
0
Views
126
penguinspeaks
penguinspeaks
AlecBS
  • Locked
  • Question
Solution for jscolor AJAX issue
Replies
0
Views
91
AlecBS
AlecBS
Jenisha chauhan
  • Locked
  • Question
HOW TO CONVERT LATTITUDE AND LONGITUDE
Replies
0
Views
111
Jenisha chauhan
Jenisha chauhan
penguinspeaks
  • Locked
  • Question
Noob Ajax question
Replies
3
Views
130
Udvikler11
Udvikler11
BobMCT
  • Locked
  • Question
Assist request for onclick event to trigger ajax call?
Replies
1
Views
114
Diancecht
Diancecht

Part and Inventory Search

Sponsor

Back
Top