Ajax Response Helper for PHP

In Ajax programming development, passing data back and forth between client and server is a common task. There are two major data formats that one can use for this purpose, namely XML and JSON. My personal preference is JSON because I find it's less verbose and easier to parse.

Although latest PHP provides a very handy function (json_encode) for outputting data in JSON format, for almost every Ajax request I handle on the server side, I have to routinely format the data in a certain way so I can use it conveniently on the client side. For example, to indicate whether it is a valid Ajax request, I embed an field called has_error in every response. I find it's getting annoying after a while, so I wrote a class to automate things a bit.

Continue reading

A Useful JavaScript Image Loader

I released a YUI implementation of image gallery script a month ago. While it was quite an enjoyable experience to explore the potential of YUI and JavaScript, I found I have created many userful code snips (for instance this Loading Panel) along the way.

Today I am going to show you another useful JavaScript code snip: Image Loader. What! You might ask. I admit that name is too generic, but it does what it does - it helps you to load images using JavaScript. Just give it an image URL, it will return a DOM image object that can be used for dynamic loading of images. This script provides a loading completion event, which is very useful for displaying preloader or extra information when the image is being loaded.

The original image loader I created relies on YUI, but I want to make it as portable as possible, so I created a standalone version.

Continue reading

A YUI Loading Panel Widget

Probably needless to say, but here it is. A web page which is processing a lengthy Ajax request and doesn't provide a loading indicator of any kind will mostly mislead the user to think that the page has stopped responding. So the solution? Use a loading indicator of course. Here's a very handy loading indicator widget for Ajax programmers who use YUI.


How to Use

First, create a new instance of loading panel. After that, you can call show or hide method on the loading panel object.

The user can close the loading box by clicking on the cancel link. If you want to handle this situation, you can subscribe to the cancelEvent:

Continue reading

YUI Based Lightbox – Final

My previous YUI implementation of the lightbox, which was released for beta evaluation, now has nearly gone gold. This page will be devoted for upcoming updates and bug fixes. So if you've found any bugs, feel free to report them in the comment section of this post.

Also, I would like to thank many who reported bugs and gave feedbacks after the release of previous image lightbox. As many have requested, I implemented navigation for the new lightbox. In addition to the navigation, numerous new features have been added and bugs have been fixed.


Continue reading

A Compilation of YUI Callback

I have been coding JavaScript with YUI for quite a while now. Still, I am consistently confused by various callback functions in YUI. The thing that troubled me the most was the parameters those callback functions take. The API documentation does not provide any information about this. For example, if you go to YAHOO.util.Event, under addListener method, the description for parameter fn as follow: <Function> The method the event invokes.

Yes, it's a straightforward description, but it doesn't help too much. What I really need is the signature of this callback function. For the purpose of my own use, and to benefit the community, I decided to make a compilation of callbacks in YUI.

Continue reading