Shoutbox Update

[Nexy]

Why Hello There! I just started Ajax and ran into a problem. Actually, I don't know if what I'm trying to do can be done with the code I have:

 

<?php

$shomes = mysql_real_escape_string(stripslashes($_POST['shoutext']));
$sshuser = mysql_real_escape_string(stripslashes($_SESSION['username']));
$cshuser = mysql_real_escape_string(stripslashes($_COOKIE['user']));
$shtime = mysql_real_escape_string(stripslashes(date('h:i a')));
$shdate = mysql_real_escape_string(stripslashes(date('m-j-Y')));

$sherror = "0";

?>

<script language="javascript" type="text/javascript">
ajaxRequest.onreadystatechange = function() {
	if(ajaxRequest.readyState == 4) {
		document.getElementById('shoutbox').value = ajaxRequest.responseText;
	}
}
ajaxRequest.open("GET", "includes/shoutbox.php", true);
ajaxRequest.send(null);
</script>

<div class='create margin' style='font-size: .8em; width: 630px; margin-top: .8em; margin-bottom: 0'>
Shoutbox (

<a href="javascript:;" 
onmousedown="if(document.getElementById('shoutbox').style.display == 'none' || document.getElementById('shoutform').style.display == 'none') 
{ 
	document.getElementById('shoutbox').style.display = 'block'; 
	document.getElementById('shoutform').style.display = 'block'; 
}
else 
{ 
	document.getElementById('shoutbox').style.display = 'none';
	document.getElementById('shoutform').style.display = 'none';
}
">Show/Hide</a>
)

</div>

<div id="shoutbox" onChange="ajaxFunction()" style="display:none">

<?php
	$shsql = "SELECT * FROM shoutbox WHERE date = '$shdate' ORDER BY id DESC";
	$shres = mysql_query($shsql) OR die(mysql_error());

	while($shout = mysql_fetch_array($shres))
	{
		echo "<div style='text-align: left; font-size: .7em'>";
		echo "[" . $shout['time'] . '] ';
		echo "<a href='index.php?page=Profile&user=".$shout['user']."'>" . $shout['user'] . '</a>: ';
		echo "<span style='color: #ADD8E6'>" . $shout['message'] . '</span><br />';
		echo "</div>";
	}

	if(mysql_num_rows($shres) == 0) { echo "<p style='color: white; margin-top: 2.3em'>Shoutbox resets everyday, type a message to start the day off.</p>"; }

?>

</div>

<?php

if($_SESSION['username'] || $_COOKIE['user']) {

if($_POST['shoutsub']) {

if(!empty($shomes))
{
	if($_SESSION['username']) 
	{
	mysql_query("INSERT INTO shoutbox(user, time, date, message) VALUES('$sshuser', '$shtime', '$shdate', '$shomes')");
	mysql_query("UPDATE users SET currency = currency + 1 WHERE username = '$sshuser'");
	}
	else if($_COOKIE['user']) 
	{ 
	mysql_query("INSERT INTO shoutbox(user, time, date, message) VALUES('$cshuser', '$shtime', '$shdate', '$shomes')");
	mysql_query("UPDATE users SET currency = currency + 1 WHERE username = '$cshuser'");
	}
}
else if(empty($shomes)) { $sherror = "1"; }
}


echo "<div id='shoutform' style='display: none'>";	

if($_POST['shoutsub'] && $sherror == "1") { echo "<span style='color: #CD5C5C; font-size: .8em'>Please enter a message!</span>"; }

if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE) { echo "<div style='margin-top: .8em; margin-bottom: 0' />"; }

echo "<form action='#' method='post'>
	<fieldset id='shout'>
   
	<label for='shoutext'>Message:</label>
	<input type='text' id='shoutext' name='shoutext' tabindex='6' style='width: 360px' />

	<input type='submit' id='shoutsub' name='shoutsub' value='Shout!' tabindex='7' />

	</fieldset>
         </form>";

if(strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE) { echo "</div>"; }

echo "</div>";
}
else {
echo "<div id='shoutform' style='display: none; font-size: .8em; color: #B0B0C0'>Please login to use the shoutbox!</div>";
}

?>

 

The part right here: "document.getElementById('shoutbox').value = ajaxRequest.responseText;" I know a div doesn't have a value attribute, so is there another way to do this? Of course the above example will do nothing since I have "onChange="ajaxFunction()"" inside the <div> tag and not the form. This page is also called shoutbox.php which is under includes. I'm probably way off here, I just want it so when the user clicks "Shout!" the message goes to the div right away with no refresh.

 

You can see the shoutbox here: http://divnx.net. Any help would be appreciated.

 

Thank You!

[xtopolis]

Divs have an  "innerHTML" property, not value.  Be aware that innerHTML replaces ALL data between the <div></div> tag you change.

[Nexy]

So it would be something like this:

 

document.getElementById('shoutbox').innerHTML?

 

Also, is there any other way to do what I'm trying to do, I don't want it to replace all the data, and where would I put the onChange function, since it won't do anything if I leave it inside the <div> tag. It has to catch the input from the textbox after they click "Shout!" then place it inside the <div>.

 

Thank You! 

[xtopolis]

Nexy,

 

Are you trying to do a 'live' shoutbox where it polls the server for new shouts and updates when they appear (for everyone that can see the shoutbox).  Or are you just trying to show the addition to the shout to the ONE person that added it right away?  Meaning, I enter a post and it adds it to the shouts, but no one else sees it until they reload the page.

 

It seems with the 'onchange' function you are looking to show ALL changes made and refresh them for everyone to see, am I right?

[Nexy]

Well, I was going to have to show it for that one person only, and have some kind of function where that <div> refreshes every minute or so. But if there is a function for it to refresh once a new shout has been made and everyone sees it right away, that would be even better.

[xtopolis]

Example

 

This is a VERY basic example.  All I really do is take the current innerHTML and assign it to a var "x".  Then I get the value of the shout they want to enter as well as some other details (username), and then put that info into the formatting that you have.  Now, here's the kicker:

 

-If you use javascript to display the message, it's pointless to have the page refresh (like it would on a form submit)... So you may want to make it an ajax call to post that data to the shoutbox database, and show the message the client entered right away only to them.  Otherwise you obviously wouldn't need to add their message since it would display all messages on page refresh.  For that to happen you'd have to put some more logic into it in order to hide the form controls after submitting or something so they don't spam it.

 

~Ajax "Live" chat:

This is easier said than done.  There is no way for the browser to know when new content is available on it's own (this is how HTTP works, can't control it.)  You might have a javascript timer running that checks for new messages every x seconds, but that has a disadvantage as well.  Say you have 5000 people on your site, that means you have 5000 people asking for new data that may not even be new!  Very bad for bandwidth.

 

Solutions:  Set some sort of checksum to check to determine if new posts have been made (saves bandwidth).  Check the checksum first, then only if it's different get messages and display them in the shoutbox div.  Also, on the timer that checks if new content is available, if there isn't, set the next check to wait a few seconds longer (called graceful decaying), and reset it back to checking at the same interval if new content is found.

 

There are other ways, such as flash applets etc which use sockets, but I don't have knowledge of these.  Anyway, hope my example and info helps you enough to get you on the right track.  Sight looks decent, I kinda like the blue.  Good luck.  I'd love to help with the complicated ajax chat, but I have a big project I need to finish before I can have any fun..QQ

[Nexy]

Thank You, I'll have to look into Ajax call to post the data to the database.

 

Thanks for the input on the site design.