In the first part of this tutorial we looked at reading a document from CouchDB and keeping our markup separate from our code using Haml templates. We arrived at the point where we clicked on a link, but nothing happened. Today we are going to put that right with some very simple routing.

The URL Module

The basis of all routing is the URL. Fortunately, Node has some basic functions which handle reading the URL so we can then decide what the user is actually trying to do.

First, we want to make sure we have included the URL module.

var sys = require('sys'),
fs = require('fs'),
http = require('http'),
url = require('url');

The next step is to extrapolate the path name from the URL that the user has visited:

var url_parts = url.parse(req.url);
sys.puts(url_parts.pathname);

Now, when I go to http://127.0.0.1:8000/create in Chromium, the system output is as follows:
/create
/favicon.ico

As you can see I have to deal with /create but also /favicon.ico – unfortunately I don’t have one. We’ll deal with that later by using a 404 error.

The pages we want to be dealing with are as follows:

• /
• create
• /edit

For simplicity’s sake we’ll put them into a switch statement:

switch(url_parts.pathname) {
case '/':
sys.puts("display root");
break;
case '/create':
sys.puts("display create");
break;
case '/edit':
sys.puts("display edit");
break;
default:
sys.puts("oh dear, 404");
}

If you test this out you should see the relevant text displayed in the standard output.

Tidy up Existing Code

Now we have a basic router telling us that it has detected which page the user wants to display, but is then displaying the default page regardless. To correct this we need to put our existing code within a function and then call that function in the relevant part of the switch statement.

So, create a new (sub) function called display_root() in the main bulk of the http.createServer() function, expecting a url, a server request object and aserver response object as parameters:

function display_root(url, req, res) {
...
}

Within the body of the function, you want to insert the main bulk of the application that we wrote last time. I have included the complete code at the bottom of this tutorial, and all code is of course on GitHub.

Now call this function within the switch statement:

display_root(url_parts.pathname, req, res);

Handling Missing Pages

As said, Chromium is looking for a favicon.ico file, but currently this application doesn’t have one. As such it needs to be able to handle missing files gracefully, with the correct 404 response.

Create a new function within the main bulk of the http.createServer() function:

function display_404(url, req, res) {
res.writeHead(404, {'Content-Type': 'text/html'});
res.write("<h1>404 Not Found</h1>");
res.end("The page you were looking for: "+url+" can not be found");
}

Notice that we have specified the header to be 404.

Now you can call this from within the switch:

display_404(url_parts.pathname, req, res);

You can test it out by going to http://127.0.0.1:8000/qwerty
You should see:

404 Not Found
The page you were looking for: /qwerty can not be found

We could use a Haml template to move the content out of the code, but for the purposes of this tutorial it will suffice.

The Form

Now we want to generate a “Create” page – which will be a form allowing us to enter a list name and 1-5 items. (Note: I have changed from 10 items to 5 for no other reason that I am lazy, and don’t particularly want 10 things on my list, also it keeps the code a bit more clean!)

First, create the Haml template that will be used. We’ll keep this very simple for now. The key part is the form generation. After some trial and error, this mark-up seemed to work:

%form(action=url method="post")
      :each i in [0,1,2,3,4]
        %p %label Item
           %input(type="text" name="item[]")
      %p
        %input(type="submit" value="Create List")

You may want to read up on Haml here: http://haml-lang.com

The function for displaying the page is as follows:

    function display_create(url, req, res) {
	res.writeHead(200, {'Content-Type': 'text/html'});
	fs.readFile('./templates/create.haml', function(e, c) {
	    var data = {
		title: "Create New List",
		message: "Please enter up to 5 things to remember",
		url: url
	    };
	    var html = haml.render(c.toString(), {locals: data});
	    res.end(html);
	});
    }

Now if you fill in the items and submit, the page simply refreshes itelf. We need to get hold of the posted form data and do something useful with it.

This will be what we’ll focus on next time.

Tutorial Recap Part 2

In part 2 of the Node JS tutorial, we started to explore some very basic routing techniques. A number of dedicated routing modules have sprung up, of two of which are listed here:

• Tim Caswell’s node-router
• Tom Hughes-Croucher’s node-routing
• Find more on the Node Modules wiki page

Complete Code

var sys = require('sys'),
    fs = require('fs'),
    http = require('http'),
    url = require('url');
 
// Node-CouchDB: http://github.com/felixge/node-couchdb
var couchdb = require('./libs/node-couchdb/lib/couchdb'),
    client = couchdb.createClient(5984, 'localhost'),
    db = client.db('erdnodeflips');
 
// Haml-js: http://github.com/creationix/haml-js
var haml = require('./libs/haml-js/lib/haml');
 
var doc_id = '2d36f401bc4b82c9160e1a4ea936aba3';
 
http.createServer(function (req, res) {
    var url_parts = url.parse(req.url);
 
    switch(url_parts.pathname) {
    case '/':
	display_root(url_parts.pathname, req, res);
	break;
    case '/create':
	display_create(url_parts.pathname, req, res);
	break;
    case '/edit':
	sys.puts("display edit");
	break;
    default:
	display_404(url_parts.pathname, req, res);
    }
    return;
 
    /**
     * Display the document root
     **/
    function display_root(url, req, res) {
	res.writeHead(200, {'Content-Type': 'text/html'});
	db.getDoc(doc_id, function(error, doc) {
	    if(error) {
		fs.readFile('./templates/no-doc.haml', function(e, c) {
		    var data = {
			title: "No Document Found",
			message: "No document could be found",
			link: "/create",
			link_text: "Create a new document"
		    };
		    var html = haml.render(c.toString(), {locals: data});
		    res.end(html);
		});
	    }
	    else {
		fs.readFile('./templates/doc.haml', function(e, c) {
		    var data = {
			title: "Erdnodeflip document: "+doc.name,
			message: "Your Erdnusflip document was found!",
			items: doc.items,
		    };
		    var html = haml.render(c.toString(), {locals: data});
		    res.end(html);
		});
	    }
	});
    }
 
    /**
     * Display the list creat page
     **/
    function display_create(url, req, res) {
	res.writeHead(200, {'Content-Type': 'text/html'});
	fs.readFile('./templates/create.haml', function(e, c) {
	    var data = {
		title: "Create New List",
		message: "Please enter up to 5 things to remember",
		url: url
	    };
	    var html = haml.render(c.toString(), {locals: data});
	    res.end(html);
	});
    }
 
    /**
     * Display the 404 page for content that can't be found
     **/
    function display_404(url, req, res) {
	res.writeHead(404, {'Content-Type': 'text/html'});
	res.write("
<h1>404 Not Found</h1>
");
	res.end("
 
The page you were looking for: "+url+" can not be found");
    }
}).listen(8000);
sys.puts('Server running at http://127.0.0.1:8000/');

1. To list a number of items
2. To remove an item from the list
3. To add an item to the list

Obviously, before getting cracking with this tutorial I had to think up a name for this “killer app” of the Node world.

So I give you ErdNodeFlips! In honour of erdnussflips – the strangely addictive Wotsit type things that taste of peanut butter and stick to the top of your mouth. Yum! (OMG – they even have their own Facebook page!)

All code is available on GitHub.

Directory Structure and Libraries

The first step is to create a directory structure for the application and bring in the relevant libraries. We need two directories underneath the top-level application root: templates (which will hold the haml files) and libs (which will contain 3rd party libraries). We are going to grab two libraries off GitHub:

• Felix Geisendörfer’s node-couchdb – this is what we’ll be using to interact with the Couch database
• Tim Caswell’s haml-js – this is our haml template engine

$ cd /
$ mkdir {libs,templates}
$ cd libs
$ git clone git://github.com/felixge/node-couchdb.git
$ git clone http://github.com/creationix/haml-js.git
$ cd ../

Basic Web Server

Now we can get started. Open up a new file called main.js in your favourite editor. Now, just to make sure that everything is working at this early stage you can copy and paste the http server example from the nodejs.org front page and run that.

http.createServer(function (req, res) {
  setTimeout(function () {
    res.writeHead(200, {'Content-Type': 'text/plain'});
    res.end('Hello World\n');
  }, 2000);
}).listen(8000);

$ node ./main.js

Navigate to http://127.0.0.1:8000/ and after 2 seconds you should see “Hello World” appear. If you see this, all is working. We have the (very basic) base of our application.

Talk to the Database

Once we know that our basic setup is working, we can try and interact with the database. Before we can do this, however, we actually need to create the database and add an record – or document.

CouchDB comes with a nifty little utility called Futon. We’ll use this to quickly create our database and add a document.

• Go to http://localhost:5984/_utils/
• Create a new database: erdnodeflips
• Create a new document
• Add Field – name it name
• Double click on the value for name, enter “Don’t forget” (including the quotes)
• Add another field – name it items
• Double click on the value for items enter: ["item 1", "item 2", "item 3"] (including quotes and square brackets)
• Click on Save Document – copy the _id value
• Navigate to: http://localhost:5984/erdnodeflips/[value of "_id"] to see something like: {”_id”:”2d36f401bc4b82c9160e1a4ea936aba3″,”_rev”:”2-3b9f738a50ff9928348ce32b0eb807b2″,”items”:["item 1","item 2","item 3"],”name”:”Rob’s List”}

To read this within node we simply need to know the _id of the document. Save this as a var for now:

var doc_id = ‘2d36f401bc4b82c9160e1a4ea936aba3′;

and replace the setTimeout function with the following:

db.getDoc(doc_id, function(error, doc) {
	if(error) {
	    res.write(JSON.stringify(error));
	}
	else {
	    res.write('Fetched my new doc from couch:');
	    res.write(JSON.stringify(doc));
	}
     res.end("-= Fin =-");
    });

This is pretty simple, and should be relatively straight forward to read. Essentially the code tries to get the document identified by doc_id, invoking a function when done: db.getDoc(doc_id, function(error, doc){});

The function that is invoked has 2 arguments, one containing the error (if any) and the second containing the actual document returned (if any).

Within this function we can then deal with the two arguments as needed. If there is an error, we output that to the browser, if no error and a doc is returned, output that instead.

Finally, we end the server response: res.end(”-= Fin =-”);. Note, we must end the server response within the callback of the getDoc() function. Due to the event driven, asynchronous nature of Node, if we end the response after that function then the server response will more than likely be closed before getDoc() has had a chance to write the additional server responses.

So the code now looks like this:

var sys = require('sys'),
    fs = require('fs'),
    http = require('http');
 
// Node-CouchDB: http://github.com/felixge/node-couchdb
var couchdb = require('./libs/node-couchdb/lib/couchdb'),
    client = couchdb.createClient(5984, 'localhost'),
    db = client.db('erdnodeflips');
 
// Haml-js: http://github.com/creationix/haml-js
var haml = require('./libs/haml-js/lib/haml');
 
var doc_id = '2d36f401bc4b82c9160e1a4ea936aba3';
 
http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    db.getDoc(doc_id, function(error, doc) {
	if(error) {
	    res.write(JSON.stringify(error));
	}
	else {
	    res.write('Fetched my new doc from couch:');
	    res.write(JSON.stringify(doc));
	}
     res.end("-= Fin =-");
    });
 
}).listen(8000);
sys.puts('Server running at http://127.0.0.1:8000/');

Generate Nicer Output

If you run the above code, you should get something along the lines of:

Fetched my new doc from couch:{”_id”:”2d36f401bc4b82c9160e1a4ea936aba3″,”_rev”:”2-3b9f738a50ff9928348ce32b0eb807b2″,”items”:["item 1","item 2","item 3"],”name”:”Rob’s List”}-= Fin =-

So it works, but it doesn’t look very good.

First, lets create a Haml template that we can use to output something better.

!!! Strict
%html(lang="en")
  %head
    %title&= title
  %body
    %h1&= title
    %p&= message
    :if items.length === 0
      %p There are no items to remember
    :if items.length > 0
      %ul
        :each item in items
          %li&=

I’m not going to go into great depth. You can find more information on Haml at the Haml homepage and also have a look at Tim’s excellent tutorial on his Haml-js library.

Essentially, this template is going to build an XHTML strict page that will have a title, a message and then should loop through the items in the list. To get this displayed, we then need to open up the template file, render it and then output it as a server response. The code to do that is:

fs.readFile('./templates/doc.haml', function(e, c) {
		var data = {
		    title: "Erdnodeflip document: "+doc.name,
		    message: "Your Erdnusflip document was found!",
		    items: doc.items,
		};
		var html = haml.render(c.toString(), {locals: data});
		res.end(html);
	    });

Notice that I am simply ending the response with the generated HTML. Again, it is worth keeping an eye on exactly where the response is being ended otherwise you might find you are trying to add to a conversation that has already ended.

We can do the same for the “document not found” route:

!!! Strict
%html(lang="en")
  %head
    %title&= title
  %body
    %h1&= title
    %p&= message
    %p %a{href: link}&= link_text

fs.readFile('./templates/no-doc.haml', function(e, c) {
		var data = {
		    title: "No Document Found",
		    message: "No document could be found",
		    link: "/create",
		    link_text: "Create a new document"
		};
		var html = haml.render(c.toString(), {locals: data});
		res.end(html);

Quick Recap for this Tutorial

In this tutorial we’ve only scratched the surface of what can be done. However, in a relatively short space of time we have our Node web server communicating with a CouchDB database and displaying some valid strict XHTML. Not bad for one sitting!

To recap, our code now looks like this:

var sys = require('sys'),
    fs = require('fs'),
    http = require('http');
 
// Node-CouchDB: http://github.com/felixge/node-couchdb
var couchdb = require('./libs/node-couchdb/lib/couchdb'),
    client = couchdb.createClient(5984, 'localhost'),
    db = client.db('erdnodeflips');
 
// Haml-js: http://github.com/creationix/haml-js
var haml = require('./libs/haml-js/lib/haml');
 
var doc_id = '2d36f401bc4b82c9160e1a4ea936aba3';
 
http.createServer(function (req, res) {
    res.writeHead(200, {'Content-Type': 'text/html'});
    db.getDoc(doc_id, function(error, doc) {
	if(error) {
	    fs.readFile('./templates/no-doc.haml', function(e, c) {
		var data = {
		    title: "No Document Found",
		    message: "No document could be found",
		    link: "/create",
		    link_text: "Create a new document"
		};
		var html = haml.render(c.toString(), {locals: data});
		res.end(html);
	    });
	}
	else {
	    fs.readFile('./templates/doc.haml', function(e, c) {
		var data = {
		    title: "Erdnodeflip document: "+doc.name,
		    message: "Your Erdnusflip document was found!",
		    items: doc.items,
		};
		var html = haml.render(c.toString(), {locals: data});
		res.end(html);
	    });
	}
    });
 
}).listen(8000);
sys.puts('Server running at http://127.0.0.1:8000/');

The exciting thing here is that we’ve thrown in a link! However, if you click on it, it will simply reload the page.

Being able to handle this kind of basic page navigation and actually adding stuff to the database is for next time.

Feedback always welcome. You can find all the code on my GitHub pages.

Valuable Node resources:

• The official Node JS site
• The Node Github page
• How To Node – a great place for tutorials and other tips
• Node Blogs – which appears to be down at the moment, but again is very useful
• NodeJS Google Group – keep your finger on the pulse

For example, one thing that has been bugging me is to validate a URL the user must type in the initial http://. But why? Can the validation not just assume that if, for example, www.robsearles.com is typed in, that the user actually meant http://www.robsearles.com?

Well, after a quick read of the documentation and a hack around this little irritant is now gone. It’s all down to addMethod() which lets you add a custom validation method. Lets create one called complete_url().

jQuery.validator.addMethod("complete_url", function(val, elem) {
    // will contain our validation code
}, 'You must enter a valid URL');

A quick word about return values. If the method returns true, everything is considered OK. However, if false is returned then validation is assumed to have failed.

Our new method needs to do three things:

1. If no url, don’t do anything
2. Check that the user had entered http:// in their URL, if not, add it in for them.
3. Check that the URL is now valid. For this I just used the source for the original url validation method.

Lets translate this into some code:

jQuery.validator.addMethod("complete_url", function(val, elem) {
    // if no url, don't do anything
    if (val.length == 0) { return true; }
 
    // if user has not entered http:// https:// or ftp:// assume they mean http://
    if(!/^(https?|ftp):\/\//i.test(val)) {
        val = 'http://'+val; // set both the value
        $(elem).val(val); // also update the form element
    }
    // now check if valid url
    // http://docs.jquery.com/Plugins/Validation/Methods/url
    // contributed by Scott Gonzalez: http://projects.scottsplayground.com/iri/
    return /^(https?|ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(val);
});

Validating the form with this new method is very straight forward:

$("#form1").validate({
    rules: {
        url: "complete_url"
    }
});

Feel free to use/copy/modify as you see fit. If you do use it, why not let me know, or drop me a trackback?

Have fun

Other jQuery Specific Posts

• IE 7 indexOf() Replacement
• Fixed – jQuery DatePicker not working in Thickbox
• jQuery: Link override with search box

After proclaiming that Node.JS is exciting stuff, today was the first time I’ve actually had the time to play around with it properly. I’ve been thinking about writing a custom FTP server for a project that we’re working on at the moment, and instead of starting from scratch, I thought I’d see if anyone else has tried to do the same. Fortunately I found Andrew Johnston started an FTP server only a few months ago: NodeFTPd on GitHub. I quickly created a clone and tried it out. It didn’t work! Node.JS is such a fast moving target that a lot of the API has been changed in the 3 months since Andrew initially released nodeftpd.

Perfect! This meant that I could play around with Node!

I’ve been hacking about on it for 4 hours or so, you can see my results at GitHub.

So what have my 4 hours of hacking around taught me about Node? Well, it’s not just exciting, it also bloody good fun!

The reason for my hate/love feelings today was due to a bug caused by IE 7 not supporting the indexOf() method. I have no idea why IE doesn’t support this method, but it is annoying never-the-less. However, there is an easy fix if you are using jQuery – the inArray() function.

The inArray() function is pretty simple to use.

Instead of having:

haystack_array.indexOf("needle")

You should use:

jQuery.inArray("needle", haystack_array)

For those of you crazy nutters that aren’t using jQuery, there is a good post on this blog that will help you out.

During my Saturday morning reading yesterday I fell over something called Node.js.  According to the website

Node’s goal is to provide an easy way to build scalable network programs.

which is kind of exciting, but not mind blowing, however, Ryan Dahl’s GitHub page describes it as

evented I/O for v8 javascript

Which is slightly more exciting. However, it is when you start to play around with it that things begin to get very exciting indeed.

Simon Willison’s latest blog post was the first I’d heard of Node and he offers a very good introduction and tutorial, bringing in a Djanjo slant. Towards the end of the post he mentions database connectivity and when I think about the possibilities with CouchDB my mind explodes with possibilities!

Over at Naked Javascript, there is another great post, offering a more detailed tutorial, including a client that gets a Twitter search. Again, this article is very enthused about Node and its future direction.

Ryan Dahl’s presentation on Node is hugely compelling, and provides excellent insights into the philosophy behind Node: PDF download.

With all this excitement in the air, I thought I better download me a copy and see what all the fuss is about.

Downloading and installing both Google’s V8 JavaScript Engine (which Node is built upon) and Node was effortless. I won’t go into the details of installation here as it is covered in both the articles above and the Node homepage, needless to say that and I had them up and running on a clean Debian VirtualBox install in about 5 – 10 minutes.

I copied and pasted the “Hello World” example from Simon Willison’s article, ran it and I was away.

The code used is extremely simple, as you can see

var sys = require('sys'),   http = require('http');
 
http.createServer(function (req, res) {
 res.sendHeader(200, {'Content-Type': 'text/plain'});
 res.sendBody('Hello World');
 res.finish();
}).listen(8000);
 
sys.puts('Server running at http://127.0.0.1:8000/');

To run I simply ran

$ node hello.js
Server running at http://127.0.0.1:8000/

and then navigated to the page in my browser where I was greeted with a rather plain but not boring “Hello World”

The res.finish() call tells the client that the server has finished and it should consider the message complete.

This started me thinking, it would be possible to complete all the stuff that needs to be sent to the client, finish the conversation with the client, but then still carry on, without losing any efficiency. So I hacked apart the “hello world” app to see what happened if you did stuff after the send. The new code looks like this:

var sys = require('sys'),   http = require('http');
 
var test_func = function() {
 setTimeout(
 function() {
 sys.puts('Called func');
 }, 5000);
}
 
http.createServer(function (req, res) {
 res.sendHeader(200, {'Content-Type': 'text/plain'});
 res.sendBody('Hello World');
 res.finish();
 test_func();
}).listen(8000);
 
sys.puts('Server running at http://127.0.0.1:8000/');

I added the timeout to represent time needed to execute other processes, such as connecting to a  database etc. It is heavily exaggerated but it should give me an idea what’s going on. Running the program now starts off as before:

$ node hello.js
Server running at http://127.0.0.1:8000/

But then when navigating to the page, 5 seconds later the command line reported:

Called func

So it is clearly completing the conversation with the client first, then executing the function.

I have played around with Apache Benchmarking to see how this handles large requests, and it seems to hold up, but obviously more stringent tests are required before including this technology into a production environment.

However, this is still very exciting. It opens up the possibility of having an HTTP server that waits for requests, getting the key information and saying “bye” before processing the request. Something like a queue server, but very fast and very efficient. And when coupled with CouchDB or similar, well, things start to get very interesting.

So I am going to spend the rest of this weekend hacking around with Node, I want to know everything about it, and you should too.

Node is definitely something to keep an eye on.

Update: Just found another good blog post, this time with an example for Long Polling.

Update: If you are looking for a NodeJS tutorial, visit this post: NodeJS Tutorial with CouchDB and Haml.

Eventually I found that other people were having the same problem, and a comment by Kevin Luck (the author of DatePicker) flicked my brain into gear.

The problem was that I was initialising the datepicker on page load, not on the loading of the thickbox content.

For example, at the start of the page the Thickbox was going to be loaded in I had this:

<script type="text/javascript">
	$(function(){
		// initiate date picker
		$('.pick-date').datePicker();
	});
</script>
</head>

However, I found that if I removed that from the head, and instead inserted it in the Thickbox content, e.g:

<div id="MyThickboxContent">
<script type="text/javascript">
	$(function(){
		// initiate date picker
		$('.pick-date').datePicker();
	});
</script>

It worked fine, problem solved!

Just been working on a little something for a client involving Google Custom Search Engines.

The app we’re building uses 4 different search engines which are all specialised in a certain area. There is a central “Overview” page that gets the top results for the search from each of the search engines, plus there are normal links above the search box that, when clicked on should take the user directly to the Custom Search Engine results page for the string in the search box.

Sounds quite straightforward, but the links also save the current search (which may be different to the search box if the user has just entered a search into the box) so in this case, the old search needs to be stripped and the new search carried forward to the Custom Search Engine.

So it’s a little more tricky, but fortunately using jQuery and the URL Parser plugin by Mark Perkins I was able to cut out most of the tricky stuff.

Below is a little demo to illustrate the main part of the jQuery usage. Before you conduct a search, you should be able to click on the links to go and search Google for those keywords (jQuery, CakePHP, Ruby On Rails and No Search conducted). If you enter a string in the box and hit the “Search” button, you’ll go to Google and search for the string. However, if you enter a string in the search box but then click on a link, you’ll be taken to Google and search for the string.

This isn’t quite how it works on the client site, but is enough to show how the jQuery is being used.

• No Search
• jQuery
• CakePHP
• Ruby On Rail

Search Google

Javascript code in the <head> tags is:

<script src="/javascript/jquery.1.2.6.js" type="text/javascript"></script> 
<script src="/javascript/jquery.url.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$(function(){
	$("#jQuerySearchExample a").click(function () {
		var path = "http://www.google.co.uk/";
		path += jQuery.url.setUrl($(this).attr("href")).attr("path");
		path += "?"+$("#jQuerySearchExampleInput").serialize();
		$(this).attr("href", path);
	});
});
// --></script>

And the HTML is as follows:

<ul id="jQuerySearchExample">
	<li><a href="http://www.google.co.uk/search" target="_blank">No Search</a></li>
	<li><a href="http://www.google.co.uk/search?q=jquery" target="_blank">jQuery</a></li>
	<li><a href="http://www.google.co.uk/search?q=CakePHP" target="_blank">CakePHP</a></li>
	<li><a href="http://www.google.co.uk/search?q=ruby+on+rails" target="_blank">Ruby On Rail</a></li>
</ul>
Search Google
<form action="http://www.google.com/search" method="get"> 
<input id="jQuerySearchExampleInput" name="q" type="text" /> 
<input type="submit" value="Search" />
</form>

As you can see, I use

jQuery.url.setUrl($(this).attr("href")).attr("path");

To strip out the current query string from the hard coded URL and then

"?"+$("#jQuerySearchExampleInput").serialize();

To replace it with the string within the search box.

Took a bit of faffing about, but works quite well