« Your Dragon Self
Windows Vista RTM Software Compatibility List »

Ajax/PHP Shoutbox Tutorial

This is a tutorial on how to make an Ajax powered shoutbox. As because it is an Ajax powered, there are no iframe involve and the update of the shoutbox content is almost instant.

Skills Required
Basic knowledge of : Ajax, javascript, PHP, MySQL, html

First, you need to have a table in the database which store the shouter’s info and the shout content. The table consist of:

  1. An ID which acts as the primary key
  2. Shouter’s Name
  3. Shout Date/Time
  4. Shout Content
  5. Shouter’s Contact

copy and paste in the MySQL and run 

CREATE TABLE `shoutbox` (
  `id` int(5) NOT NULL auto_increment,
  `name` varchar(50) NOT NULL default '',
  `date` datetime NOT NULL default '0000-00-00 00:00:00',
  `content` varchar(255) NOT NULL default '',
  `link` varchar(255) NOT NULL default '',
  PRIMARY KEY  (`id`)
);

Second, you will need to set up a page which will act as the interface which consist of the shouting content display and the shout form.

  1. DIV with the id ’shoutarea’ will act as the medium to display the shouting content
  2. form’s id and name has to be set properly for the css and also ajax used later on, upon submission, it will call the function saveData() which we will be covering later on below.
  3. The rest are the form’s input item for the Name, URL/Email and Comment. Make sure its name are set properly.

copy and paste into your html/php editor and save this file as shoutbox.php 

<div id="shoutarea">
</div>
<form id="shout" name="shoutbox" method="POST" onsubmit="saveData(); return false;">
	<p>Name: <br /><input name="shouter" type="text" /></p>
	<p>URL/Email<br /><input name="shouter_contact" type="text" /></p>
	<p>Comment<br /><input name="shouter_comment" type="text" /></p>
	<br />
	<p><input type="submit" name="submit" value="submit" /></p>
</form>

Third, is time to make the Ajax miracle work and this is the most important part. This file consist of 3 functions, i’ll explain it one by one:

  1. ajaxFunction()
  2. Creates a variable ajaxRequest which will hold the XMLHttpRequest
  3. With this you will start to send the XMLHttpRequest depending on which browser you are using
 function ajaxFunction(){
	var ajaxRequest;

	try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				//browsers all not support, rare case
				alert("Your browser broke!");
				return false;
			}
		}

	}
	return ajaxRequest;
}
  1. ShowData()
  2. This function basically will call the ajaxFunction() to enable the XMLHttpRequest with the browser.
  3. Once the connection with browser is established, it will find the DIV with the ID ’shoutarea’, which we’d created on the form in step 2
  4. Then it will call the outputinfo.php to display the shout content in the shoutarea.
  5. setInterval is to call the function showData() every 1000 ms
function showData() {
	htmlRequest = ajaxFunction();
	if (htmlRequest==null){ // If it cannot create a new Xmlhttp object.
		alert ("Browser does not support HTTP Request");
		return;
	} 

	htmlRequest.onreadystatechange = function(){
		if(htmlRequest.readyState == 4){
			document.getElementById("shoutarea").innerHTML = htmlRequest.responseText;
		}
	}
	htmlRequest.open("GET", "outputinfo.php", true);
	htmlRequest.send(null);
}

showData();
setInterval("showData()",1000);
  1. saveData()
  2. This will be the function to trigger the send data action to the database
  3. Same thing it will call the ajaxFunction to enable XMLHttpRequest
  4. Once connection is established it will check whether all the required information has been inserted, it not then it will prompt error message and stop the whole action until the user trigger the action again
  5. If all the information has been insert, it will call the sendshout.php file and starting sending the form’s data to the database

copy all these 3 functions and paste into a new file in order and name the file as shoutbox.js 

function saveData(){
	htmlRequest = ajaxFunction();
	if (htmlRequest==null){ // If it cannot create a new Xmlhttp object.
		alert ("Browser does not support HTTP Request");
		return;
	} 

	if(document.shoutbox.shouter.value == "" || document.shoutbox.shouter.value == "NULL" || document.shoutbox.shouter_comment.value == "" || document.shoutbox.shouter_comment.value == "NULL"){
		alert('You need to fill in name and message!');
		return;
	}
	htmlRequest.open('POST', 'sendshout.php');
	htmlRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	htmlRequest.send('name='+document.shoutbox.shouter.value+'&message='+document.shoutbox.shouter_comment.value+'&contact='+document.shoutbox.shouter_contact.value); 

	document.shoutbox.shouter_comment.value = ''; // Updates the shout box’s text area to NULL.
	document.shoutbox.shouter_comment.focus(); // Focuses the text area.

}

Forth, after having this shoutbox.js file created, u have to insert this script below within the <head> section at the shoutbox.php 

 <script language="JavaScript" type="text/javascript" src="assets/shoutbox.js"></script>

Fifth, is time to make the 2 php files which interact with the table that we’d create in step 1. One is for inserting data and another is for outputing data. But before having it to interact, we need to have access to the database, and after we have access to the database only we can interact with the table inside the database, so we need to create this access file first.

  1. Create a function name open_connection
  2. Insert the $dbhost which normally would be ‘localhost’
  3. Insert the username and password
  4. Insert your database name which you want to connect
  5. Create the connection by using the mysql_connect
  6. Connect to the database using the mysql_select_db

Copy and paste the code to a new php file and save as connect.php 

 <?
 	function open_connection()
	{
		$dbhost = "localhost";
		$dbuser = "username";
		$dbpassword = "password";
		$dbname = "database_name";

		$dbconnect = mysql_connect($dbhost, $dbuser, $dbpassword)
						or die ("Connection Error");

		mysql_select_db($dbname)
				or die ("connection error");

	}
?>

Sixth, After having the function to open connection to the database, we now can start to work with the 2 php file. For the sending data’s file:

  1. Include the php file and open the connection with the open_connnection function
  2. Extract the data that was sent by the shoutbox.js and reassign to a new variable
  3. With the time and data saved into another new variable, is time to insert all the data into the database’s table

Copy and paste below code to a new php file, name it as sendshout.php 

 <?
	include("connect.php");
	open_connection();

	$shouter=addslashes(strip_tags(htmlspecialchars($_POST['name'], ENT_QUOTES))); // Cleans Input.
	$shout=addslashes(strip_tags(htmlspecialchars($_POST['message'], ENT_QUOTES))); // Cleans Input.
	$contact=addslashes(strip_tags(htmlspecialchars($_POST['contact'], ENT_QUOTES))); // Cleans Input.

	$timestamp = date("Y-m-d H:i:s");
	//echo $temp;
	$shout_sql = "INSERT into shoutbox (name, date, content, link)
					VALUES ('$shouter', '$timestamp', '$shout', '$contact')";
	$shout_result = mysql_query($shout_sql);

?>

Lastly, the outputing php file.

  1. Clearing the cache for IE browser
  2. Same thing open connection with the connect.php file’s open_connection function
  3. Extract all the data available from the database
  4. Filter and adjusting the format of the date and time
  5. Display with the help of the odd even class to differentiate the column color

Copy and paste below code in a new php file and save as outputinfo.php 

 <?
	header("Expires: Sat, 05 Nov 2005 00:00:00 GMT");
	header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
	header("Cache-Control: no-store, no-cache, must-revalidate");
	header("Cache-Control: post-check=0, pre-check=0", false);
	header("Pragma: no-cache");

	include("connect.php");
	open_connection();

	$shout_query = "SELECT * FROM shoutbox ORDER BY `date` DESC";
	$shout_result = mysql_query($shout_query);
	$count = 0;

	while($shout_row = mysql_fetch_array($shout_result))
	{
		$shouter_name = $shout_row['name'];
		$shout_content = $shout_row['content'];
		$shout_content = stripslashes($shout_content);
		$shout_date = $shout_row['date'];
		$shouter_contact = $shout_row['link'];
		$contact_count = 0;

		$dday = substr($shout_date, 8, 2);
		$dmonth = substr($shout_date, 5, 2);
		$dyear = substr($shout_date, 0, 4);

		if(($count % 2) != 0)
		{
				echo "<p class='odd'>$shouter_name - $shout_content$dday-$dmonth-$dyear</p>";

		}
		else
		{
				echo "<p class='even'>$shouter_name - $shout_content$dday-$dmonth-$dyear</p>";

		}
		$count++;
	}

?>

After all these files have been created and the database had been setup, with a little of CSS styling(i will assume you know CSS), then you are done creating your very own ajax powered shoutbox!

Feel free to go to the sample page to test the shoutbox - test page


Related Entries


105 Comment(s) On This Topic

Aeres said during February 15th, 2007 at 12:01 pm

…Pening >_

boon said during February 15th, 2007 at 12:33 pm

haha, basically you just copy and paste the code into a text editor, in my case Dreamweaver and save it accordingly and it will start functioning ;)

crystal said during February 22nd, 2007 at 6:35 pm

if i am using blogger cant use shoutbox ho? coz it need to save the js file right? why didnt you put it on yours? hahahaha

boon said during February 22nd, 2007 at 10:41 pm

eh, if is on blogger then i think mostly can’t loh, but the cbox should be enuff for ur side there ;) mine is js for those who would like to host their own shoutbox. i might consider putting it in here…heheh

Crystal said during February 23rd, 2007 at 5:22 pm

the shout box is like my cbox is it? i tot of changing to something more nicer haih looks so square lolzzz

that day i created a layout for my blog already. but after i change to the beta version i having difficulties in uploading the layout hahahah so difficult man haih. when i free only go fiddle with it again ba

boon said during February 23rd, 2007 at 5:38 pm

errm..the functions are the same as cbox, but of course this wan u can change the layout as u like bcoz is using “div”, no necessary square box :D for live of this shoutbox u can try go to http://www.pjss2.net and have a look ;)
get urself a domain and save all the hassle leh~

zaki said during March 10th, 2007 at 1:51 pm

Thanks for your tutorial………muach

boon said during March 11th, 2007 at 6:38 pm

no problem zaki ;)

blah blah said during March 14th, 2007 at 10:56 pm

May I base my own shoutbox script off a bit of this? Not entirely of course - that’d be complete ripping and no one likes that.

Also do XMLHttpRequests not work with Blogger? If they don’t, that really stinks :/

boon said during March 15th, 2007 at 1:12 am

no prob dude! js do whatever u on it and do whatever trial & error you can as well ;)

By right free blogging hosting website such as Blogger should work with XMLHttpRequest.

blah blah said during March 16th, 2007 at 9:00 pm

“By right free blogging hosting website such as Blogger should work with XMLHttpRequest.”

If that’s tested and proven to be working, I’d send Google a thousand more hugs and blessings (not kisses).

boon said during March 17th, 2007 at 11:20 am

“I’d send Google a thousand more hugs and blessings (not kisses)”

I bet before u can even do that u r already being arrested:P anyway, to be honest, this shoutbox i have a friend who had tested on wordpress, seems to conflict with some functions in it. So i doesn’t have a 100% answer on whether it will work on Blogger or not. If someone could test for me i would be super glad on it!

blah blah said during March 18th, 2007 at 4:25 pm

“If someone could test for me i would be super glad on it!”

I will.

kevin said during April 5th, 2007 at 7:16 am

hey nice script man

i am really new to ajax and php and need a hand though.

do i just do a php inculdes (shoutbox.php) to put this on my page?

and i went to shoutbox.php and wrote something but nothing appeared…and i got no errors

i have inputted my mysql info in the connect.php file and what not.

little help for a newb? thanks

kevin said during April 5th, 2007 at 7:23 am

nevermind I figured it out. :)

boon said during April 5th, 2007 at 11:13 am

hey, kev..thanks for stopping by and glad ur found figured out everything ;)

do leave me a msg if there’s any prob
Thanks~

Mike said during April 24th, 2007 at 4:06 am

Kool

sebacorp said during April 25th, 2007 at 6:28 pm

I was inspired so much of this shoutbox that I made a very successfull project - linkshouter searchengine where the results are being not indexed but shouted by real people. Visit http://www.LinkShouter.com

hero_bash said during May 4th, 2007 at 11:45 pm

will this 100% work on firefox?

boon said during May 5th, 2007 at 12:58 pm

@hero_bash: yes, 100% work on firefox.

hero_bash said during May 5th, 2007 at 2:54 pm

how do I display the messages?

boon said during May 6th, 2007 at 12:48 am

errm, can elaborate a bit ur question? well, if u wanna see an example u can go to http://www.pjss2.net , there’s a shoutbox using this mechanism. Can have a try over there for now, will be removing it soon maybe in few weeks time.

hero_bash said during May 7th, 2007 at 10:20 pm

doesn’t work.. the messages don’t display even on the demo

boon said during May 8th, 2007 at 1:43 am

which version of firefox u r using? coz i m using firefox previous version and current version,also IE6, 7 all fine on displaying the messages.

are putting it in wordpress?

hero_bash said during May 8th, 2007 at 8:36 pm

oh, so this is just for wordpress..

FF 2.0.0.3

boon said during May 9th, 2007 at 11:00 am

nope, this is not for wordpress, is for all the general webpages. could i know more about ur OS? mac or window? coz i nvr really tested on other OS on this. is good for me to know bout this prob. so far really nothing like this had happen before whereby messages can’t b display

blah blah said during May 15th, 2007 at 11:04 pm

@hero_bash: Check if you disabled JavaScript execution.

Tools>Options… Content>Enable JavaScript

If it’s unchecked, that’s the main problem.

boon said during May 16th, 2007 at 10:41 am

hey blah blah, thanks! ;)

Lucas said during May 30th, 2007 at 1:55 am

Ummmm, I understand how everything works and all, but shouldn’t there be a text area in which the shouts are displayed. Because the way this is written, Nothing will be displayed when you push the shout button. It only gets stored into the database. Something you might want think about.

boon said during May 30th, 2007 at 9:48 pm

@Lucas: there is actually, at the last page of code :

echo “

$shouter_name - $shout_content$dday-$dmonth-$dyear

“;

this is where the shouts will be display.

Kyle said during June 2nd, 2007 at 4:43 am

Awesome!

Raine said during June 6th, 2007 at 2:30 am

Just wondering if there was an example of this running somewhere so I could get a feel of how it works. I won’t be using PHP but I’m thinking the idea is similar. The URL you gave about seems to be under construction at the moment.

Thanks!

boon said during June 6th, 2007 at 9:48 pm

hi Raine, sorry for the inconvenient, i’d now setup a testing page just for this shoutbox. feel free to head on to http://boonage.pjss2.net/example/shoutbox.php and see how is the end result ;)

davo8 said during June 7th, 2007 at 6:16 pm

gday boon, i did all the instructions and for sum reason it isnt showing the messages. please help me. here it is is u would like to have a look http://davo8.com/shoutbox.php

Thnx mate

boon said during June 7th, 2007 at 10:39 pm

hi davo8, i’d check your page and i saw the javascript link doesn’t really point to your shoutbox.js, instead it is now pointing to assets/shoutbox.js. Therefore your actually shoutbox.js is not in the assets folder.

So, just change the assets/shoutbox.js to shoutbox.js at the javascript link will do ;)

davo8 said during June 8th, 2007 at 7:01 am

LOL now i feel like an idiot LOL!

Thnx bro

davo8 said during June 8th, 2007 at 4:44 pm

another problem LOL! how can i hav the shoutbox throughout my whole site? atm it calls shoutbox.php in the root of the web dir, but its not working. once again my url is http://davo8.com, it wrx on home page but nowhere else. AND how can i limit the numeber of posts it outputs??

Thns Bro
~tHeDaVo8

davo8 said during June 8th, 2007 at 5:29 pm

i got the shouts limited, now how do i get it workin on otha pages?

davo8 said during June 8th, 2007 at 5:36 pm

got it LOL!

boon said during June 8th, 2007 at 11:55 pm

hahah..glad u solved it ;)

wind_feng said during June 22nd, 2007 at 3:37 am

my shoutbox doesn’t auto-refresh with IE
but works with firefox.
any idea?

boon said during June 22nd, 2007 at 6:26 pm

wind_feng, mayb i know wat version of IE u r using and also if your browser works when u browse my example site?

wind_feng said during June 23rd, 2007 at 12:44 pm

yeap.
my browser works when browsing ur example.
so, any solution for it?
=)

boon said during June 25th, 2007 at 6:30 pm

hi, wind_feng, double check your code whether is it the same as it was given, make sure it has this line of code

header("Expires: Sat, 05 Nov 2005 00:00:00 GMT");
	header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
	header("Cache-Control: no-store, no-cache, must-revalidate");
	header("Cache-Control: post-check=0, pre-check=0", false);
	header("Pragma: no-cache");

wind_feng said during June 25th, 2007 at 6:49 pm

Warning: Cannot modify header information - headers already sent by (output started at /home/whowe/domains/wahlaoeh.com/public_html/wind/assets/outputinfo.php:1) in /home/whowe/domains/wahlaoeh.com/public_html/wind/assets/outputinfo.php on line 2

I got this error.

boon said during June 27th, 2007 at 12:46 am

i think have to see your file coding and structure. Mind if you could send it ur work folder via email to boon@pjss2.net?

thanks~

wind_feng said during June 30th, 2007 at 12:53 am

okies, the problem solved.
and there is another problem.

i guess you need to set the “setInterval” in the javascript to 2000ms.
i’m using malaysia hosting service, my friend in russia has latency more than 1second.
so it ends up he has insufficient time to get data from database.
so, setting the interval longer can solve this problem.

thanx for your codes. ^^

John Michael said during August 15th, 2007 at 12:27 pm

can u please help me i have an error outputinfo.php my browser displays this message:

Warning: Cannot modify header information - headers already sent by (output started at C:\wvsuproject\Shoutbox\outputinfo.php:1) in C:\wvsuproject\Shoutbox\outputinfo.php on line 2

Warning: Cannot modify header information - headers already sent by (output started at C:\wvsuproject\Shoutbox\outputinfo.php:1) in C:\wvsuproject\Shoutbox\outputinfo.php on line 3

Warning: Cannot modify header information - headers already sent by (output started at C:\wvsuproject\Shoutbox\outputinfo.php:1) in C:\wvsuproject\Shoutbox\outputinfo.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at C:\wvsuproject\Shoutbox\outputinfo.php:1) in C:\wvsuproject\Shoutbox\outputinfo.php on line 5

Warning: Cannot modify header information - headers already sent by (output started at C:\wvsuproject\Shoutbox\outputinfo.php:1) in C:\wvsuproject\Shoutbox\outputinfo.php on line 6

Please help me and when i remove this line it works but it does not auto refresh in IE

Erwin Bantilan said during August 18th, 2007 at 6:00 am

Hi Boon… Im not using MySQL coz i dont know it… Im using unserialize and serialize process… now can u help?? what information thus the sendshout.php display to display the comments?? i opened ur sendshout.php and it says something like “submit successfully”…. so how thus the outputinfo.php receive the data?? im really new with this… Thanks and God Bless

Erwin Bantilan said during August 18th, 2007 at 6:53 am

K thanks its completely running now thanks a lot dude…. still using serialize and unserialize ….. thanks a lot

Erwin Bantilan said during August 18th, 2007 at 7:34 am

Ahhh Boon.. When i click submit there are no comments appeared, but when u click refresh there is what should i do??? how to clear the cache from the browser and display it???

Erwin Bantilan said during August 18th, 2007 at 8:15 am

OHHH thanks… I read ur comment wind_feng.. Thanks to wind_feng and of course boon.. I just the interval so thanks a lot i guess i can now make an interactive log-in on my site…. thanks to all…

jentino said during August 27th, 2007 at 6:02 pm

nice script. THANKS ALOT.
Can anybody help? How can I prevent the chat window from growing bigger and bigger as people type in? i.e, i want to get the text scrolling in the chatwindow.

i tried defining the margins:

that didint help

kiwijus said during September 13th, 2007 at 12:59 am

Warning: Cannot modify header information - headers already sent by (output started at /home/spsjqwda/public_html/shoutbox/shoutbox1/outputinfo.php:1) in /home/spsjqwda/public_html/shoutbox/shoutbox1/outputinfo.php on line 2

Warning: Cannot modify header information - headers already sent by (output started at /home/spsjqwda/public_html/shoutbox/shoutbox1/outputinfo.php:1) in /home/spsjqwda/public_html/shoutbox/shoutbox1/outputinfo.php on line 3

Warning: Cannot modify header information - headers already sent by (output started at /home/spsjqwda/public_html/shoutbox/shoutbox1/outputinfo.php:1) in /home/spsjqwda/public_html/shoutbox/shoutbox1/outputinfo.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /home/spsjqwda/public_html/shoutbox/shoutbox1/outputinfo.php:1) in /home/spsjqwda/public_html/shoutbox/shoutbox1/outputinfo.php on line 5

Warning: Cannot modify header information - headers already sent by (output started at /home/spsjqwda/public_html/shoutbox/shoutbox1/outputinfo.php:1) in /home/spsjqwda/public_html/shoutbox/shoutbox1/outputinfo.php on line 6

yup, same problem :(

please help D:

boon said during September 13th, 2007 at 10:20 am

@jentino: set the height of the chat window :)

boon said during September 13th, 2007 at 10:22 am

@John Michael & kiwijus: check and see if there’s any extra or unessecary white space in the outputinfo.php. And bear in mind, this might not work well with wordpress

kiwijus said during September 13th, 2007 at 3:24 pm

Thanks, but it didn’t work :( still the same errors. the code is a direct copy from the tutorial.

kiwijus said during September 13th, 2007 at 3:28 pm

I realised i left a space infront of

boon said during September 13th, 2007 at 3:59 pm

so is if ok now with the space infront?

BoltClock said during September 16th, 2007 at 8:21 pm

Whitespace before .

BoltClock said during September 16th, 2007 at 8:26 pm

strip_tags() acting up…

Whitespace before <?php is output, so headers will be immediately sent. That’s why so many people are getting the headers_sent() errors.

In your pure PHP scripts, make sure that there isn’t any space before <?php and after ?> or things will mess up.

Noob said during October 3rd, 2007 at 9:40 pm

hmm i cant get it to work, becouse i am a big noob.
i do all the steps and when imput the data and click submit nothing happens

Jake said during October 24th, 2007 at 9:06 pm

If I set the height of the chat window, I cannot really use the scroll bar because the window keeps refreshing while I scroll.

Any way to circumvent that problem?

Where does Windows Vista Cache Windows Updates said during December 26th, 2007 at 1:29 pm

Where does Windows Vista Cache Windows Updates…

Nice points……

ken said during January 13th, 2008 at 5:57 am

thanks a lot

kelvin said during February 23rd, 2008 at 11:59 pm

Nice points…

me said during March 6th, 2008 at 4:52 am

strip_tags() will do nothing in your code.
If you pass the input through htmlspecialchars() first you’ll end up with escaped characters which causes strip_tags() to ignore the stuff it’s supposed to be filtering.

addslashes(htmlspecialchars(strip_tags($input)));

That would be the correct way to go.

ds said during March 12th, 2008 at 6:08 pm

kjkj sdsd sds

DamionKutaeff said during March 23rd, 2008 at 3:56 am

Hello everybody, my name is Damion, and I’m glad to join your conmunity,
and wish to assit as far as possible.

dsklljklljklj said during May 2nd, 2008 at 5:05 am

dddddddddsadddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd

Mike said during May 19th, 2008 at 4:01 am

Is there any way to speed up the refreshing of the content? I did what wind_feng said, but honestly it seems really slow. Just wondering.

Erwin Bantilan said during May 20th, 2008 at 5:59 am

Are u Having problem on responseText function??? and waiting for so long depending on the speed of your SPECS…

try to replace the showdata() function with the code below:

function showData(){
var ajax = ajaxFunction();
ajax.open(”GET”, “outputinfo.php”, false);
ajax.send(null);
var serverResponse = ajax.responseText;
document.getElementById(”shoutarea”).innerHTML = ServerResponse;
}
showData();

Hope that code above will help :D

25 Excellent Ajax Techniques and Examples - Six Revisions said during June 3rd, 2008 at 11:59 am

[...] 19. Ajax/PHP Shoutbox Tutorial [...]

25 Excellent Ajax Techniques and Examples :: john010117.com said during June 4th, 2008 at 7:21 am

[...] Ajax/PHP Shoutbox Tutorial - Make an Ajax-powered shoutbox using PHP and JavaScript. [...]

25个优秀的Ajax技术和实例 » Life is a struggle =.=！ said during June 5th, 2008 at 4:54 pm

[...] 19.Ajax/PHP Shoutbox AJAX Shoutbox demo [...]

Reponere » Blog Archive » 25 Excellent Ajax Techniques and Examples said during June 7th, 2008 at 2:03 am

[...] 19. Ajax/PHP Shoutbox Tutorial [...]

Nelly said during June 8th, 2008 at 1:08 am

I like how short the tutorial is, and it works on my website, but the response time is either slow or it does’t work

0 n 8 = ? » Blog Archive » 25 Ajax Dersi said during June 16th, 2008 at 5:51 pm

[...] burada 17.Auto-populating Select Boxes using jQuery & AJAX | Demo burada.18.Ajax Açılır Menü19.Ajax/PHP shoutbox20.Ajax Tab Menü21.How to Load In and Animate Content with jQuery22.The Hows and Whys of Degradable [...]

shirajraj said during June 19th, 2008 at 2:37 pm

kemon hoise bolte partasina ?? mone hosse valoi hoese ??

joi said during June 19th, 2008 at 4:25 pm

to: erwin bantilan, hey buddy your solving problem make it worst. how did you suggest that? this original script running OK without your recommend

joi said during June 19th, 2008 at 4:26 pm

to: erwin bantilan, hey buddy your problem solving make it worst. how did you suggest that? this original script running OK without your recommend

Derek said during June 25th, 2008 at 6:33 am

Hey there.

I’d really love to have this script working. I’ve checked it several times and it match your guide’s code.

I just see blank pages - agter submiting my test comment. Using Firefox.

Doesn’t work in IE either.

Regards,

lupus6x9 said during August 4th, 2008 at 1:01 am

If you put single quotes into anything, it screws up, but it shouldn’t.

So now it no longer works in Firefox 3.0.1, when I tested. Also, it doesn’t seem to refresh when you submit… and other problems.

presteatencion said during August 23rd, 2008 at 7:23 pm

no funciona bien no¿?

25 Excellent Ajax Techniques and Examples « Jonsunhee’s Weblog said during August 29th, 2008 at 4:00 pm

[...] 19. Ajax/PHP Shoutbox Tutorial [...]

aRfian said during October 8th, 2008 at 4:28 pm

why is it not working…
I only see the form, but not the shoutcontent…
even your test page shows the same thing….

opened in FF3, IE7, IE6

aRfian said during October 8th, 2008 at 4:34 pm

sorry, my bad, I was calling the javascript correctly LOL

mine works,
but still, the one from your test page doesn’t work

aRfian said during October 8th, 2008 at 4:35 pm

**wasn’t

aRfian said during October 8th, 2008 at 4:57 pm

oh yeah, the interval for refershing show data is way to short, only 1 second, I edit it to be 60 second.
In shoutbox.js

showData();
setInterval(”showData()”,60000);

great code, thank you very much

Stone Deft said during October 28th, 2008 at 1:26 am

Just a question I understand it will refresh the data every 1 sec wouldn’t this cause an over head on the mysql server.

çiçekçi said during October 29th, 2008 at 7:09 pm

very thanks

aaa said during November 3rd, 2008 at 6:52 am

asdasd

Stone Degft said during November 15th, 2008 at 12:00 am

Waaa …monthly bandwidth exceeded. IS there another work around so it won’t have to query the database every 1 second? Like it will only query it when a shout entry is added …any ideas?

free online christmas game said during November 29th, 2008 at 6:26 pm

thats creative work there, check itHow Do you Do that? free online christmas game bgnao

bob said during January 24th, 2009 at 1:33 am

I am trying to make shouter value in the form be prefilled by PHP but when I submit it wont grap the php value. Any ideas?

SP said during March 14th, 2009 at 12:04 am

I’m having a little problem with the script. I followed the instructions carefully and the form shows up just like it’s supposed to but when I fill out the info and submit, the name, url/email, and message does not save or show up. When I click submit, it just shows the date, but nothing else. And when I go to the database, it only shows the date and ID. but no name, url/email or message. Any suggestions?

SP said during March 14th, 2009 at 12:06 am

ok i didn’t change anything and now it shows the name and message, but the link/email does not show up. if you guys want to look at it, it’s at: savannahriverkeeper.org/blog/blogs.php

thanks

dharm said during April 1st, 2009 at 2:15 am

very helpful tutorial..
thankyou very much…

AwamBoyz said during April 12th, 2009 at 10:58 pm

I Don’t Know WHAT’5 Th3 H3LL Thi5..!!!

rent carpet cleaner said during April 30th, 2009 at 8:42 pm

what’s going on? http://www.fiskekommunerna.org/discount/diy-carpet-cleaning.html carpet cleaners

jacob said during July 21st, 2009 at 1:11 pm

the example doesnt work?

Colin Lundy said during August 2nd, 2009 at 4:58 am

Heya,

Im having some problems with this code… for alot of my users logging into the site.. the shoutbox doesnt load.. it just stays blank. this is in all different OS’s and Browsers…

Any ideas?

violacuj said during December 9th, 2009 at 2:02 am

Nice joke! How do you clean ice off tall buildings? With sky scrapers.
___________________________
–/ ciagra alternatives /–

sodaySosegots said during December 11th, 2009 at 3:32 am

Urireeroyathe
adog

Raja said during December 14th, 2009 at 9:12 pm

Content not refreshing in internet explorer even when i submit data it displaying in another browsers but in internet explorer data not refreshing it only showing when i close the browser and open it again .. help me

Thank you

Leave a Reply