By Mike Gifford

July 31, 2007

So AJAX has been and continues to change the face of the web -- making your browser behave more like your desktop. Drupal's done a good job integrating this type of interactivity since Drupal 5 when they integrated the jQuery library. I was inspire recently by SunlightLabs Mashup API as a way to personalize senators and congressfolks in the USA, and decided to try to implement that here in Canada (but that's for another demo).

I was writing this blog and was interrupted by a wonderful production of Shakespeare's Twelfth Night by torch light non-the-less. Was happy to see when writing up this posting that they're using Drupal to drive their site too.

 
to see photos from this great Ottawa Theatre Company!

Image of Fools
Foolish Company
Shakespeare
In the Park
Twelfth Night
Ottawa Parks
Westboro
Summer Evenings
Parks
Torchlight Shakespeare

Drupal runs with jQuery 1.6 and I developed this code as a static page developed in jQuery 1.9. Caching sucks setting up AJAX scripts. I thought I could just run the javascript in the page and didn't have to stick it in the header or use drupal_add_js(), I was wrong. FireBug came in quite handy for debugging the javascript. There are still some problems with how it displays in the Safari browser that I haven't had time to figure out. There is more information here on jQuery and Drupal's implementation.

<?php

drupal_add_js('
$(document).ready(function(){$(\'#itemsControl\').change(showItemInfo);});

  function showItemInfo() { 
    $(\'div#itemData\').fadeOut(\'slow\').load( 
      \'/sites/openconcept.ca/jquery_target.php\', {
    "fools": $(this).val()
  } ).fadeIn(\'slow\');
  } 
');

?>

$(document).ready(function(){$('#itemsControl').change(showItemInfo);});

function showItemInfo() {
$('div#itemData').fadeOut('slow').load(
'/sites/openconcept.ca/jquery_target.php', {
"fools": $(this).val()
} ).fadeIn('slow');
}

  $(document).ready(function(){
    $('#itemsControl').change(showItemInfo);});
 
  function showItemInfo() { 
    $('div#itemData').fadeOut('slow').load( 
      '/sites/openconcept.ca/jquery_target.php', {
    "fools": $(this).val()
  } ).fadeIn(1200);
  } 

I thought that it would be fun to feature pictures that other people had taken of the play I had just seen, and I had forgotten my camera. Fortunately, I could go grab a bunch off of flicker and feature them, but then I figured, why not just pull down rss feeds of all photos tagged with 'companyoffools'. This way I can get new photos added to this list throughout the summer and into the new year. Fresh content for everyone!

Figured it would be best to actually see if Flickr offered an XML version so that I could just pick the content that I wanted from their feed, and fortunately they did. Discovered that SimpleXMLElement is very picky about variable types, and php's settype() function doesn't quite do what you'd expect it to do.


<?php 

// always make sure there is a number
$number = (!empty($_POST['fools'])) ? convert_to_int($_POST['fools']) : rand(0,20); 

// this seems to be the best way to ensure that it always will be a number 
// function pulled from php.net
function convert_to_int($string) {
    
$y ltrim($string'0');
    
$z $y;
    return 
$z;
}

// pull in the xml
$flickr_url file_get_contents(
"http://api.flickr.com/services/feeds/photos_public.gne?tags=companyoffools&format=xml"
FALSENULL0200000);
$pc_xml = new SimpleXMLElement($flickr_url);
$fool =  $pc_xml->entry[$number];
echo 
$fool->content;
?>