Ennovy.org

Edit: Sigh… Either people were too polite to point it out, or they didn’t read the article yet, and I hope it’s the latter, but I must have reset the keywords page to its old content. I’ve updated it now. *feels really embarrassed*

There’s been lots of discussion about Ajax (asynchronous javascript + html) recently. I didn’t pay any attention to it, because I didn’t think I’d be able to use it (it involves javascript, and I don’t understand javascript). But I just played around with it, and wow, it’s so cool!

Yesterday, when I was browsing the pMachine front page, I found a link on Ajax at Dutchcelt’s weblog. He has this mini-calendar which uses Ajax to go backwards and forwards between the different months. It looked pretty easy to get it running. I didn’t want to want to do the same thing with my mini-calendar though, because I don’t click on my mini-calendar that often. So my next thought was to try something with the keywords page for my links blog. You should go there and start clicking on stuff. And then come back and finish reading this article, because I’m going to explain what I did.

Note - when I say "keyword", I mean the same thing as a "tag". It's just that in EE, a tag means a different thing.

What I wanted to do was be able to hover over one of the keywords in the list and have a little popup showing 1) a list of entries that I have tagged with that keyword and 2) a list of related keywords. I can get both of those already by using the Keywords Plugin, but I wanted the information to load without having to refresh the page, which is what Ajax does. So here's what I came up with. Whenever I click on a keyword (not hover unfortunately), a javascript function is called, and a popup box appears. That's done using OverLIB. Inside the popup box, I put in a uniquely identifiable div. A second javascript function is called immediately after, (the ajax part), and it loads another page into the uniquely identifiable div, that is, into the popup box. The page that is loaded can contain javascript, so I can call the ajax javascript function again within the page. The result is it looks like a popup iframe.

When you first click on a keyword, the Overlib popup box will show a 10 entries which have been tagged with that keyword. I decided to limit the number to 10, and then added a link at the bottom to a page with the full list. There is another link to a list of related keywords. When you get to the list of related keywords, you can choose to click to a page with a list of entries that have been tagged with both the original keyword and the related keyword.

It's not perfect. Sometimes the popup box disappears before I can click on any of the links in it, usually because I move my mouse over another link in the list. I'm not sure why my keywords list has the word "linux" in it twice. Also, I think there's a bug in the plugin itself, where if you want to list all the entries tagged with the keyword "design", the plugin will also list the entries that are tagged with the keyword "web-design".

And now here's the code for you ExpressionEngine people, assuming you have OverLIB and the Keywords Plugin installed.

On the main page, the part of the template which lists the keywords looks like this:

{exp:keywords:weblog_keywords keyword_fields="log_keywords" search_fields="log_description" weblog="log" font_smallest="12" font_largest="32" backspace="2"}
<span style="font-size: {font_size}px"><a href="{path="pages/keywords"}{keyword}" onclick="overlib('&lt;div id=\'placeholder\'&gt;Loading....&lt;/div&gt;', CAPTION, '{keyword}', OFFSETX, 0, WIDTH, 200, STICKY); getMyHTML('{path="pages/keywords_entries"}{keyword}', 'placeholder'); return false;" title="{count} entries" onmouseout="return nd();">{keyword}</a></span>,
{/exp:keywords:weblog_keywords}

There are two other templates - one that has the list of entries, and the other has the list of related keywords. I named these two templates keywords_entries and keywords_related. The above code will access these two templates, passing in the keyword through the third segment of the URL.

In my keywords_entries template, I put in the following (and nothing else):

<ol>
{exp:keywords:entries weblog="log" keyword="{segment_3}" search_fields="log_description" keyword_fields="log_keywords" disable="categories|member_data|pagination|trackbacks" sticky="off" limit="10"}
<li><a href="{comment_url_title_auto_path}">{title}</a></li>
{/exp:keywords:entries}
</ol>
<div align="right">
<a href="{path="pages/keywords"}{segment_3}" title="keywords related to {segment_3}" onclick="getMyHTML('{path="pages/keywords_related"}{segment_3}', 'placeholder'); return false;">related keywords &raquo;</a><br />
<a href="{path="pages/keywords"}{segment_3}" title="all entries with the keyword {segment_3}">all entries &raquo;</a>
</div>

In the keywords_related template, I decided to allow php and set the parsing stage to output. Why? Because the related_keywords tag in the plugin will also list the specified keyword as a related keyword, and I didn't want to display the (+/|) links when that keyword is displayed. Here's the code:

<ol>
{exp:keywords:related_keywords weblog="log" keyword="{segment_3}" search_fields="log_description" keyword_fields="log_keywords" disable="categories|member_data|pagination|trackbacks"}
<li><a href="{path="pages/keywords"}{keyword}">{keyword}</a>
<?php
$keyword = "{keyword}";
$current = "{segment_3}";
if ( $keyword != $current ) {
?>
(<a href="{path="pages/keywords"}{segment_3}+{keyword}" title="search for entries with the keywords {segment_3}+{keyword}">+</a>/<a href="{path="pages/keywords"}{segment_3}|{keyword}" title="search for entries with the keywords {segment_3}|{keyword}">|</a> )
<?php } ?>
</li>
{/exp:keywords:related_keywords}
</ol>
<div align="right">
<a href="{path="pages/keywords"}{segment_3}" title="recent entries with the keyword {segment_3}" onclick="getMyHTML('{path="pages/keywords_entries"}{segment_3}', 'placeholder'); return false;">view recent entries &raquo;</a><br />
<a href="{path="pages/keywords"}{segment_3}" title="all entries with the keyword {segment_3}">view all entries &raquo;</a>
</div>


If you use the code, you will obviously need to change all of the tag parameters and the paths to the ones in your own weblog setup (I've put those in bold). You can see the output for these templates for the keyword "html" here and here.

Better Than Ezra - Burned