Use the 404 page to find missing children

Scott Hanselman blogged about an excellent idea that he had seen where a PHP developer had created a 404 page that displayed a list of missing children.

In my opinion this is a great idea – as people always end up seeing a 404 page and by displaying a list of missing kids – who knows, we might just be able to find a missing kid. Scott created a 404 page using only Javascript (the original used server side PHP). Scott’s implementation uses the ASP.Net AJAX Library and specifically uses the DataView control.

I wanted to make a few modifications to Scott’s implementation of the 404 page:

1. Make the page so that it is a lot more easier for someone to download the code and reuse it.
2. Use only JQuery
3. Geolocate the user using their IP address.

The reason I wanted to use only JQuery was that I didnt think it was necessary to download an extra javascript library just to display the data, when JQuery could do it all. (In addition, I used direct references to jQuery – instead of the $, as it makes it easier to include on a DotNetNuke site).

The biggest improvement in my opinion is the use of the client’s IP address to geo-locate them. By geo-locating the end user, I can customize the list of children to the state from where the user is. This in my opinion increases the probability of finding missing children as the list is smaller and more relevant to the user.

For geo-locating the user, I use two techniques. Because JQuery is loaded using Google’s content delivery network I can use Google’s API to try and determine the location of the user. If this fails (and it does many times), I use IPInfoDB’s webservice to try and geo-locate the user.

Here is where you can take a look at my implementation of the 404 page with geolocation capabilities: http://www.aggregatedintelligence.com/404.html

Note:

As I use the Google API, you will need to generate a Google API key to use the code on a webserver (if you are testing – you dont need to do anything). To get the key go to : http://code.google.com/apis/ajaxsearch/signup.html. Once you generate the key, plug it into the file at line: 33 (or search for “YourGoogleApiKeyHere” to find the location).

Download the 404 page from: Google Docs FileShare