Posted (Updated ) in Javascript

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 »

Posted (Updated ) in Javascript

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 »

Posted (Updated ) in Javascript, PHP

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 »

Posted (Updated ) in Javascript

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 »

Posted (Updated ) in Javascript, PHP

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 »

Posted (Updated ) in Javascript, PHP

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 »