Wednesday, October 31, 2007

Howto Display Records from a Database without Refreshing the Entire Page, PHP & AJAX

This post address a common question found on on AJAX and PHP forums.

Howto grab the newest records from the database and display them without the traditional meta refresh?
Howto display records from a database without refreshing the entire page?

The requirements:
A basic understanding of AJAX. Get started with AJAX here:
A dataset

I am going to use the mozilla developer docs as a reference point.

The first step is to create a HTTP request. Before we do that we need to figure out the browser that the user is running.

If the browser is Internet Explorer, call the ActiveXObject
else, call the XMLHttpRequest();
// This includes all browsers other than Microsoft Internet Explorer.
//Mozilla, Safari etc

// Create the HTTP request
function createRequestObject()
var browser;
if (window.XMLHttpRequest)
// Mozilla, Safari, ...
browser = new XMLHttpRequest();
else if (window.ActiveXObject)
browser = new ActiveXObject("Microsoft.XMLHTTP");
return browser;

var httpRequest = createRequestObject();

Once we've got the HTTP request setup, our next step is to grab the contents from the database. It is here that we set the time interval or the frequency on when the updated content is displayed.

We're going to call a PHP script get_records.php that actually grabs the dataset from the database. More on the PHP script later.

The time interval is set to 300000 milli seconds, 5 minutes

Convert minutes to seconds:
5 minutes = 5 x 60 seconds = 300 seconds

Convert seconds to milli seconds:
300 seconds = 300 x 1000 milli seconds = 300000 milli seconds

Note the exception handler below. The alert popup box will appear if there was an error. You can comment out that line later.

function displayOutput()
setTimeout("displayOutput()", 300000); // Recursive JavaScript function calls displayOutput() every 5 minutes, 1800 seconds'GET', 'get_records.php', true);
httpRequest.onreadystatechange = handleResponse;
catch( e1 )
// Unable to open file
alert('Caught Exception: ' + e1.description);

The next step is to handle the data. We've made the HTTP request, we've called the PHP script, we've got the data. What are we going to do with the data?

If everything went well, readystate should be == 4(complete) and httpRequest.status should be == 200. All ok .. Proceed to set the innerHTML with the data.

Read about innerHTML:

function handleResponse()
try {
if (httpRequest.readyState == 4) {
if (httpRequest.status == 200) {
document.getElementById("data").innerHTML = httpRequest.responseText;
} else
alert('There was a problem with the request.');
catch( e2 )
alert('Caught Exception: ' + e2.description);

Our final step is to display the data:

\<\body onload\=\"displayOutput\(\)\;\"\>
\<\div id\=\"data\"\>\<\/div\>

To be continued ...

Crash A Wedding

Living in a boring city that does nothing during the weekends?

Crash a wedding!

The important tip to remember is , "Dress Appropriately"

Read more:

How To: Crash A Wedding

Watch the movie, Wedding Crashers

Friday, October 12, 2007

Parse error: syntax error, unexpected ':'

If short open tags are enabled and if the HTML content in a PHP file has a <\?, PHP will display the error, Parse error: syntax error, unexpected ':'

Tags such as <\? could be used to open XML tags or other non PHP based tags.

The solution is to disable the short_open_tag directive in the \/etc\/php.ini file. This would force PHP to parse PHP code with tags that begin with <\?php

Thursday, October 11, 2007

Winamp's Redesign Interface .. Thumbs Down

A friend of mine once mentioned, "But Winamp looks old". I had to agree with her on this one.

We were talking about media players. Media players that support a variety of formats thrown at them, support ripping and burning on the fly and Yes - Look Modern.

It is Winamp's 10th anniversary. "A completely redesigned interface, including Album Art" says the updated version history. I have been looking out for a Winamp redesign since version 3. The fact that Winamp version 3 Wasabi was dumped wasn't a good thing, but that is another story.

So I proceed to download, click the download link, hit save, 8 minutes later I run the installer. A few pre-install questions and 5 seconds to go. Tada! The new "Bento redesigned interface" appears. The default color scheme is dark, pasty and bland. I am not impressed at all. Nothing to wow about. Fonts do _not_ look smooth and are in need of anti-aliasing.

The three pane layout feels fossilized. I remember Winamp version 1 and 2 looking the same. Screen elements look clumsy. I need to click a handler inorder to figure out what they do.

I am on a 1280x800 resolution display at 120 DPI. Winamp should have looked gorgeous. I fail to understand why the redesign did not include better and _modern_ color schemes. The royal blue color scheme looks hideous. There is a total absence of gloss or the glass effect found on Windows Vista, Windows Media Player, the Windows Media Center application etc. Even Windows Mobile 6 and the new Motorola UI look shiny.

So what happened? Nullsoft is owned by AOL. Is AOL trying _not_ to get into the Radio business? AOL has probably secured deals with a dozen other apps.

Monday, October 01, 2007

Bad ; sign errors in crontab file, can't install

Editing crontab with PICO editor might display the error:

"bad ; sign errors in crontab file, can't install"

The ; character is used to combine and run multiple commands in one statement. Your cron job might look like:

# Command One; Command Two
*/3 * * * * cd /usr/home/; php -q whatever.php

The above statement consists of two commands.
The second command would be executed even if the first were to fail.

The solution is to get rid of the ; character. Use the && character instead.

The && character will _not_ execute command two if command one were to fail.

To get rid of the error, edit your cronjob like this:

*/3 * * * * cd /usr/home/ && php -q whatever.php