Pixelbox

Welcome to Pixelbox. Friday the 5 of September 2008

Skip to content >>

Generic Error messages

Recently I needed an method for displaying error messages that was nicer than alert boxes, unobtrusive and generic.

I wanted to be able to output errors from PHP in the HTML that could then be displayed in an eye catching way, but also use the same method to display errors from JavaScript. This way you have one method for displaying errors to your users, rather than a mix of inline, alerts and error pages.

The solution will run once the DOM is ready and search for elements with the class, "ssError" (server side error). If it finds them it will remove them from where they are and add them to a generic error div at the top of the page, which will then be animated so the user notices it.

This code requires various parts of the YUI library, which must be included before the error.js file. To display server side errors, just add the class ssError to them, and to output client side error just call the function PBdisplayErrors('Your Error here!') with you error as a string.

Click here to simulate an error!

There is an example of the error message and a link to the js file here.

This is the first time I have used the YUI libraries, they are a little confusing at first, but show great examples of best practice. Previously I used prototype, which gives you more finished animations, whilst the YUI is a little more raw. I do really like the event model though, which is really useful for hijax and dealing with XML header requests.

There are no comments yet

Add your own comment