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.
The aim of this tutorial is to create a Node powered web app using a CouchDB database and Haml based templates. I wanted something relatively simple that I could do in a couple of sittings, but complex enough to be of some actual use. In the end I opted for a “top 10 list” type application. The functionality being as follows:
To list a number of items
To remove an item from the list
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!)
A project we have going on here at ibrow towers involves quite a bit of jQuery Validation. Whilst the Validation plugin is great with the default functions it offers, what makes it truly excellent is the fact that it is easily extendable.
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:
If no url, don’t do anything
Check that the user had entered http:// in their URL, if not, add it in for them.
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 anythingif(val.length== 0){returntrue; }// 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:
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!
Everyday I hate IE a little bit more, and by the same token, everyday I love jQuery that little bit more.
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.
I’ve been struggling today for about an hour trying to get jQuery’s DatePicker working in Thickbox. There appeared to be some kind of conflict. I tried hacking up the Datepicker plugin file, changing the z-index of the CSS but nothing. The date picker wasn’t even being called.
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:
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.
<ulid="jQuerySearchExample"><li><ahref="http://www.google.co.uk/search"target="_blank">No Search</a></li><li><ahref="http://www.google.co.uk/search?q=jquery"target="_blank">jQuery</a></li><li><ahref="http://www.google.co.uk/search?q=CakePHP"target="_blank">CakePHP</a></li><li><ahref="http://www.google.co.uk/search?q=ruby+on+rails"target="_blank">Ruby On Rail</a></li></ul>
Search Google
<formaction="http://www.google.com/search"method="get"><inputid="jQuerySearchExampleInput"name="q"type="text"/><inputtype="submit"value="Search"/></form>