First Steps with Node.js: exciting stuff

Posted: November 29th, 2009 | Author: Rob Searles | Filed under: JavaScript, Opinion | Comments

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.

Read the rest of this entry »

Fixed – jQuery DatePicker not working in Thickbox

Posted: January 27th, 2009 | Author: Rob Searles | Filed under: JavaScript | Comments

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:

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

It worked fine, problem solved!

jQuery: Link override with search box

Posted: November 26th, 2008 | Author: Rob Searles | Filed under: JavaScript | Comments


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.

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