Update: I’ve rewritten the AJAXy part of this to simplify the process, please check out the latest new PipeJAX.

Update: So it turns out that the For Each bug in the Pipes IDE was that I’m really stupid. You have to drag the sub-module onto the foreach loop directly from the left nav - not click the left nav and have the module appear on the canvas and then try to drag it on, as I was doing. I’m feeling embarrassed and excited all wrapped up in one.

Well, I’m still having problems with Yahoo Pipes IDE not wanting to let me do anything with their For Each module - apparently I’m not the only one. Hopefully they’ll fix it. Part of my first pipe was a sub-pipe that takes a search string and a number of elements to return and runs a Technorati search. So, I decide to play around with figuring out how that can be integrated with a website, like say.. this blog. I wanted to do something nice and Ajaxy and felt like learning some JQuery - so here it is. If you’ll notice at the bottom of several of my posts there’s a “Who else is writing about this?”.

Lots of code follows…

This is done quite simply, the first bit was a little php module that pulls the Yahoo Pipe JSON feed and just returns it - I needed this because javascript doesn’t want to let you pull stuff from a non-local server. So, I whipped up this little helper php file:

<?php
header('Content-type: text/javascript');
$string = urlencode($_GET['text']);
echo file_get_contents(’http://pipes.yahoo.com/pipes/AHaR2Y242xGwcHpiZFUMqA/run?text=’ . $string . ‘&num=’ . $_GET['num'] . ‘&_render=json’);

?>

Then, I wrote up this li’l .js file:


function doit(json, main, num) {
var itemorig = main.children('.deasil_who_item');
for( var i=0; i
var item = itemorig.clone(1);
var id = ‘deasil_who_’ + num + ‘_’ + i;
item.attr(’id’, id);
main.append(item);

var title = $(’#’ + id + ‘ .deasil_who_title’);
var link = $(’#’ + id + ‘ .deasil_who_link’);

var cur = json.value.items[i];
title.append(cur.title);
link.attr(’href’, cur.link);
}
itemorig.css(’display’, ‘none’);
main.css(’display’, ‘block’);
}

function who_init() {
var mains = $(’.deasil_who’); mains.each( function (i) { var main = $(this); var text = main.attr(’deasil_text’); if( text ) { $.getJSON( “/wp-content/pipe.php”,
{num: 3, ‘text’: text},
function (json) { doit( json, main, i ); }
); } }
);}

$(document).ready(who_init);
That’s all the programming involved. It did take me awhile to figure out some of the JQuery nuances - strange things like nodes are either JQuery special nodes that give you nice features or regular ol’ DOM nodes. Periodically JQuery special nodes will spew forth a regular DOM node that needs to be enspecialized by a handy function - that was a key find. But I digress…

Now, to use this, all you need to do is add these lines to the head of your html page:

Of course you’ll need to update the paths to jquery.js and similar.js (which is the javascript above) to wherever you put them on your server.

Then insert into your html the template for how you want this to look in the places you want it to show up. A template simply needs a few things, here’s what I’m using:

Everything else just goes in as normal. Anything you put outside the deasil_who_item will show up either before or after all the related posts.

As the eagle eyed among you might notice I cheated and am setting the value of deasil_text (the search term) to a custom field I set for the post in Word Press. Ultimately, I want to use the Content Analysis module to do that for me, but for now, this is where I am at.

This is probably not the best instruction, but I wanted to put this up.

← newer Google Maps and Subway Stations  ↑  I get no Google love older →

TwitterCounter for @nybble73
Feb 10th, 2007 · Comments RSS · · · · · Tags: javascript · pipes