Put Missing Kids on your 404 Page - Entirely Client-Side Solution with YQL, jQuery, and MSAjax
I noticed a post over at a blog called "The other side of the moon" where the author suggests that we put pictures and details of missing children on on 404 pages. It's a simple and brilliant idea. Millions of 404s are delivered every day. We are reporting on missing pages, but not on missing children. He includes a simple PHP solution. I set out to create an ASP.NET solution, but then realized that a server-side solution wasn't really necessary.
Could I do it all on the client side? This way anyone could add this feature to their site, regardless of their server-side choice. This could make the solution much more palatable to folks who may not be into .NET.
Here's what I came up with. You can see it in action if you request a file that doesn't exist from my site, like http://www.hanselman.com/foo.aspx.
The file is called missingkids404.html and it's just static html. You will need to configure your webserver to serve this page when it needs to serve a 404. For me, as I do run ASP.NET and IIS, I needed to add this to my web.config in the System.Web section:
<customErrors mode="On">
<error statusCode="404" redirect="/missingkids404.html" />
</customErrors>
The file, in its entirety, is this:
<html>
<head>
<title>Missing Kids 404</title>
<style type="text/css">
.sys-template { display:none; }
.missingkid { clear:both; }
</style>
<script src="http://ajax.microsoft.com/ajax/beta/0911/Start.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
Sys.require([Sys.components.dataView, Sys.scripts.jQuery], function() {
$("#missingkids").dataView();
var statecode = "ZZ";
var dataurl = "http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20From%20xml%0D%0A%20Where%20url%3D'http%3A%2F%2Fwww.missingkidsmap.com%2Fread.php%3Fstate%3D" + statecode + "'%0D%0A&format=json&callback=?";
var data = $.getJSON(dataurl, function(results){
Sys.get("$missingkids").set_data(results.query.results.locations.location);
}
);
});
function getSrc(url) {
var lastIndex = url.lastIndexOf('=');
return url.substring(lastIndex+1);
}
</script>
<p>
<strong>Sorry, the page you're trying to find is missing.</strong>
</p>
<p>
We may not be able to find the page, but perhaps you could help find one of these missing children:
</p>
<div id="missingkids" class="sys-template">
<div class="missingkid">
<img sys:width="60" sys:align="left" sys:src="{binding medpic, convert=getSrc}" />
<strong>{{firstname + " " + lastname}}</strong>, Age: {{age}} from
{{city}}, {{st}}</br>
Contact: {{policeadd}} at {{policenum}}<br/>
<br/>
</div>
</div>
</body>
</html>
I'm using the standard {{token}} syntax as well as one custom syntax with a convert=callback so I can pre-process the data. The source data feed includes an unfortunate chunk of html, rather than a direct link to a picture. I need to strip everything after the last equals sign (=) in order to get the image src URL. That method is called getSrc, and the binding looks like:
<img sys:width="60" sys:align="left" sys:src="{binding medpic, convert=getSrc}" />
If this is useful, the next step is to add geolocation. You can look at http://www.hanselman.com/missingkids404geo.html for the beginnings of a geo-location aware one. The open issue right now is that the missing kids feed works only in the US, Canada and the UK. I would need to figure out now to determine the two-letter STATE code from the geolocation API, which doesn't provide codes in that way. Worst case scenario, I'd have a lookup table of state names to abbreviations.
Enjoy! Thoughts?
About Scott
Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.
About Newsletter
