I really like the Chrome web store vertical scroll box functionality so figured I’d write up a tutorial post on how to add them to your site.

Demo

Hover over the boxes below.

Read on for the code!

Read More »

Anyone attempting to do cross domain AJAX will be familiar with the following message:

XMLHttpRequest cannot load http://domain.com/page.php. Origin http://yoursite.com is not allowed by Access-Control-Allow-Origin.

However if you own the server you’re AJAXing data from, there’s a simple way to make this possible using a callback. Here’s an example:

server.php (On a different domain):

<?php
	$response = 'your response here'.
 
	if ( !isset($_GET['callback']) ) $_GET['callback'] = '';
 
	echo $_GET['callback'] . '('.json_encode(array('response'=>$response)).');';

client.php (with JQuery):

$.getJSON('http://yourdomain.com/server.php?callback=?', function(json) {
	alert( json.response );
});

That’s all there is to it. Remember the ?callback=? URL segment or it won’t work.

Read More »

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 »

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 »

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 »