JQuery Data Tables is an incredibly handy tool that can make a developers life alot easier – notably by handling search, pagination, filtering and sorting for you. The default functionality is very good, however you’ll often need a bit of customization. This post will detail how to add custom filters and position them to nicely theme with your table. The filters’ state will also be saved so they’ll still be there if you reload the page.

You can see the demo page for this post here. Select a filter and reload the page to see it in action.

Read More »

If you’re reading this page (or my blog in general) it’s a pretty safe bet you already have Google+. If you’ve uploaded any photos to Google+ from Chrome or FF, you would also have noticed its snazzy HTML5 file uploader at work. This weekend I took it upon myself to whip up a quick and dirty version of that uploader and share its inner workings with the world.

Google+ Image Uploader

Here’s a short video of my uploader at work:

https://www.youtube.com/watch?v=AXx8cu6rxV4

Requirements:

• PHP4+
• HTML5-enabled browser (File API – including drag and drop, XHR2)
• Some images to upload

Disclaimer: Currently only Firefox and Webkit based browsers meet the requirements above. Opera supports the File API and probably XHR2 (I haven’t tested), however it doesn’t have drag and drop so this tutorial won’t work with it. If you’re curious about whether or not IE will work with this tutorial, I’m already laughing at you.

Download the finished script here.

Read More »

It appears JQuery Form Validation supports returning a string when using the remote validator but it’s not immediately clear how to do this and the examples tab doesn’t have an example for doing so. Getting this working is actually very easy. All you need to do is return a JavaScript string in your response. Here’s an example:

Firstly, the javascript:

$(document).ready(function() {
	$("#form").validate({
		rules: {
			username: {
				required: true,
				remote: "/your/url.php"
			}
		},
		messages: {
			username: "Username is required."
		}
	});
});

Pretty standard, nothing out of the ordinary here. Now for the server side response. As I’m sure you’re aware, you can return ‘true’ or ‘false’ however if you want a string, it needs to be formatted as a javascript string:

// /your/url.php
echo '"This username is already taken. Please enter a different username and try again."';

Read More »

I discovered recently a little quirk with accessing a JQuery UI Dialog‘s options and methods from within the dialog itself. I was AJAXing the dialog’s contents and was having difficulty figuring out how to access the dialog’s methods. As it turns out, from the contents of the dialog you don’t use

$(this).closest('.ui-dialog').option()

which returns a javascript object, but instead use

$(this).closest('.ui-dialog-content').option()

Seeing as this post would otherwise be pretty short, let’s do a little more than simply retrieving options. Below I’ll explain not only to open a AJAX dialog from a HTML link, but also tell the dialog what element opened it. This could be useful in such instances as when you need to click a link which opens a dialog allowing you to upload a user avatar, and upon uploading, replaces the link with the avatar image.

For the lazy, you can download the complete tutorial files here.

Read More »

Update Jul 02 2011: crossdomains.xml should be crossdomain.xml
Update Jun 29 2011: Updated S3 upload URL – no more security error

If you’ve ever wanted to allow people on your website to upload files to Amazon S3, you’ll know the only real way to do this is with flash – as it allows the client to upload directly instead of funneling all traffic through your server. You could write your own script for this, however there’s already a nifty little prebuilt tool I’m sure you’ve already heard of called Uploadify which can not only do the job for you, it can do so with great flexability.

For the lazy: Download the entire script here

Read More »

Recently while randomly browsing I came across a method of displaying multiple tabs using only HTML and CSS (see here for the explanation or here for an amazing demo). This presented an interesting concept – tabs with no JavaScript. There are quite a few drawbacks but in the right conditions this could be a good addition to your site.

Read More »

Earlier tonight I wanted to remove the ancient version of JQuery automatically loaded on the WordPress front end and replace it with the much speedier latest version (currently 1.4.2). This turned out to be more difficult than planned, however after a bit of scrounging I found the solution; add the following code to your template’s functions.php file:

if( !is_admin() )
{
	wp_deregister_script('jquery');
	//Add latest JQuery back into header. Comment this line out to remove JQuery alltogether
	wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false, '1.4.2');
	wp_enqueue_script('jquery');
}

Enjoy your blazingly fast JavaScript experience 🙂

Read More »

UPDATE 15 Feb 2012: This post is woefully out of date. See my new PHP WebSocket Chat Application 2.0 post for a working tutorial compatible with the latest WebSocket spec as of Feb 15, 2012.

Today I’ll be doing an in-depth tutorial on how to create a simple, real-time chat application with HTML5 web sockets.

Disclaimer: Due to the relative infancy of web socket technology, this tutorial will currently only work on Google Chrome and the spec isn’t finalized yet so it may break in the future (specifically during the handshake phase).

UPDATE Nov 14, 2010: Since the writing of this post, the handshake spec has changed in such a way that browsers requiring the new spec will return the error code INVALID_STATE_ERR upon connection. I checked the PHPWebSocket page for an updated version but it looks like the developer hasn’t released one yet so instead I now recommend using Bohuco’s excellent websocket script instead.

Read More »