404 page missing kids with JQuery

I took a little insipration from @shanselman to add a missing kids list on our 404 pages.  So I whipped this out really quickly.  With JQuery, it was easy but slightly different than the MS Ajax dependent version Scott shows.  You can added it to any website where you have control of the 404 page content and access to the jquery library.  Code is below.  Please consider doing it or something similar.

   1:   
   2:  <style type="text/css">  
   3:   .missingkid { clear:both; }   
   4:  </style>
   5:   
   6:   
   7:  <script type="text/javascript">
   8:    $(document).ready(function() {
   9:      getKids();
  10:    });
  11:    
  12:    function getSrc(url) {
  13:        var lastIndex = url.lastIndexOf('=');
  14:        return url.substring(lastIndex+1);
  15:     }
  16:    
  17:    function getKids()
  18:    {
  19:    var statecode = "ZZ";
  20:      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";    
  21:      $.ajax({
  22:        url: dataurl,
  23:        dataType: 'json',
  24:        success: function(results, status){ 
  25:          $.each(results.query.results.locations.location, function(i,item){
  26:              var html = '<div class="missingkid" style="vertical-align: text-top"><img src="'+getSrc(item.medpic)+'" width="60" style="align:left">'
  27:              html = html+item.firstname+' '+item.lastname+', Age: '+item.age+' from '+item.city+', '+item.st
  28:              html = html+'<br/>Contact: '+item.policeadd+' at '+item.policenum+'<br/><br/></div>'
  29:              $(html).attr("src", item.picture).appendTo("#images");
  30:            });
  31:          }
  32:      });
  33:    }
  34:  </script>
  35:   
  36:   
  37:   
  38:  <h1>Oops!</h1>
  39:   
  40:  <p>
  41:  <strong>The page you requested is not available. Please leave a message after the beep "beeeeep" (kidding)</strong>
  42:  </p>
  43:   
  44:   
  45:  <p>
  46:  <strong>We may not be able to find the page, but perhaps you could help find one of these missing children:</strong>
  47:  </p>
  48:   
  49:   
  50:   
  51:  <div id="images"></div>
 
March 2, 2010 12:32 by josh
E-mail | Permalink
blog comments powered by Disqus


about josh

another programmer blogging about his misadventures in writing code.

Contact

contact us for website & software consulting

Decide

decide on pragmatic solutions

Develop

develop your product together

Succeed

achieve your goals with our services