This plugin has been a long time in the making. It's something I knew from the outset that I would want in Mango, but after getting my feet wet by writing a few other small plugins, I knew I could do it. I made it as simple as I could, but there are still a couple of things you will need to know; one of which is that you might need to modify your theme to broadcast a new event in a couple of places. This new event is going to be a part of future versions of Mango, so there isn't any worry about future-compatibility and worries when upgrading.
First of all, though you need a small update to the core of Mango. Even if you've got the latest version of Mango (1.1)! Laura posted a comment on the plugin ideas page with a link to the update zip file, and an explanation that it included a new plugin (home page chooser), some core modifications that were needed to support that plugin, and most importantly, some bug fixes — one of which is necessary for back-linking of related entries to work correctly. So before you do anything else, make sure you grab and install that update!
Once you've got the Mango update installed, go ahead and download my Related Entries plugin.
Now about that event. It's really simple to add. Open up your theme's index.cfm and post.cfm files (and archives, and other places you may want to show related entries…). The code to broadcast the event is really simple:
<mango:Event name="beforePostContentEnd" />
Simple, right? And where do you put it? Anywhere, really… within reason. It uses contextual information to look up related entries data for the current post, so you must broadcast it inside of a <post> (custom tag) block. So for example, here's the relevant information from my theme's index.cfm template:
<mango:Posts count="5">
<mango:Post>
...
<mango:Event name="beforePostContentEnd" />
<p class="date">Posted in ...</p>
...
</mango:Post>
</mango:Posts>
That's almost it! After you install the plugin, and add the event broadcast to your theme, there's just 2 more things.
First, relate a couple of entries. Edit a post, and look at the bottom of the form.
This new section should be displayed at or toward the bottom of the form. As it explains, you select a category from the left column to see its entries from the selected categories (use control to select multiple). Then click on any entries from the center column that you want to relate to the current entry; they will be displayed in the right column. (This is all done with jQuery ajax!) To remove an entry from the right column, double click it. When you submit the form, the posts in the right column will be marked as related to the current entry; and in addition to that, the current entry will be related to those posts.
When you submit the form, if you get an error that looks like this, then you didn't install the update!:
If you don't get the above error, then your data should be good to go. Now, you just need to style it.
When you've got related entries data, the event you're broadcasting is going to be replaced with some code along this line:
<div class="related">
<h2 id="RelatedEntries">Related Entries:</h2>
<ul>
<li><a href="http://server/post/your-post">Post Title</a></li>
<li><a href="http://server/post/your-post">Post Title</a></li>
<li><a href="http://server/post/your-post">Post Title</a></li>
</ul>
</div>
So, you can define some css rules for .related, #RelatedEntries (or .related h2), and .related ul, .related ul li, .related ul li a.
That's it. Enjoy!
One note for the future: The update I talk about above should be included in Mango 1.2, so if you've got 1.2 (or later) installed, don't worry about the update.
In case you missed the link before, you can Download my Related Entries Mango Blog Plugin right here.
Posted in
AJAX |
ColdFusion |
JavaScript |
Mango |
My projects
| 23 Responses
September 10 2008
I've been watching the Stack Overflow site and it's developers pretty closely, because I hope to help bring a little bit of the ColdFusion community to their site once it's online; and I would encourage you to do the same. I saw this note on their blog, that they will reportedly be using jQuery as part of their application stack, and I thought I would just take a moment to pimp that to the CF and larger Adobe Community.
To be quite honest, I haven't taken the time to learn jQuery myself yet — but it's on the list and I will… someday.
Posted in
Adobe |
AJAX
June 15 2008
I am pretty late to the game on this one – I have nearly 500 unread posts in my RSS aggregator in my "ColdFusion & Tech" folder alone! But I thought it would be pertinent to mention Joel's recent post, Strategy Letter VI. Whether you agree or disagree, he raises an excellent point for discussion — much like one of my favorite TV shows: Penn & Teller: BS.
Joel thinks that developers should focus on features, and let the efficiency catch up later:
The winners are going to do what worked at Bell Labs in 1978: build a programming language, like C, that?s portable and efficient. It should compile down to ?native? code (native code being JavaScript and DOMs) with different backends for different target platforms, where the compiler writers obsess about performance so you don?t have to.
There is some controversy on the article, and I'm a little surprised at how little attention it's gotten. It was only dugg a handfull of times, it only returns 280-something results in a Technorati Search, and even gets some staunch criticism on his own section of Reddit. I also happened to read the critique at Ajaxian – with more valid points and a pretty decent discussion going on in the comments.
It will be interesting to see how things pan out. Personally I think it will be somewhere in the middle. Maybe Google will be the ones to develop the NewSDK that Joel goes on about.
Or they buy it. ;)
Posted in
AJAX
October 11 2007
I am admittedly behind the times when it comes to knowing how to code and use AJAX; I simply haven't had time to learn it. However, the need came up today to do some AJAX processing, and instead of spending days researching and learning how to do it properly, I just planned out and executed what I'm lovingly calling "Poor Man's Ajax." It took me about 2 hours, and it was a piece of cake. Of course, it would have been even easier with the new AJAX framework built into CF8, but alas, my client isn't quite ready to upgrade.
A bit of semantics: While my solution doesn't make use of XML, neither does "AJAX" that uses JSON instead of XML to pass data back and forth. I don't think there is any reason you can't call what I'm doing AJAX: It's asynchronous, is controlled by JavaScript, and instead of XML or JSON, it simply uses embedded JavaScript in a hidden iFrame.
The problem: Once a JavaScript event is fired, I need to do a SELECT from my database, and use that value to inject some new code into a DIV on my page.
The solution:
To make things asynchronous, I added a hidden iFrame to my page, whose SRC attribute I will change with JavaScript when my event is triggered:
[viewcode] src="poormansajax.txt" showsyntax=no lines=1 geshi=html[/viewcode]
In order to accept some data back from the asynchronous processing, I have to create a callback function:
[viewcode] src="poormansajax.txt" showsyntax=no lines=2-4 geshi=javascript[/viewcode]
And we have to trigger the request when an event occurs, which in my case was handled by a Flash movie. In order to initiate my request, all I have to do is change the SRC attribute of the iFrame:
[viewcode] src="poormansajax.txt" showsyntax=no lines=5-7 geshi=javascript[/viewcode]
After we change the SRC attribute of the iFrame, the request has begun! From here on out, it's out of our hands. The CFML page requested in the iFrame will take care of any data processing, and then send its result back to the specified callback function. Remember that all I wanted to do was a SELECT and return the value:
[viewcode] src="poormansajax.txt" showsyntax=no lines=8-16 geshi=cfm[/viewcode]
Conclusion:
There are a few important things to note here; particularly:
- This page was used as part of a company intranet, where security is less of a concern, as the user base is limited and should be trusted to some degree. On a public facing site, you should check the validity of anything sent into the iFrame (via its query string), including the name of the callback function; and use
CFQUERYPARAM in the query.
- Though I didn't test it, I believe that you can only pass simple values (strings and numbers) between pages in this fashion. However, it would be fairly easy to create a struct or array in JavaScript (inside your iFrame page), dynamically fill in its content with your CF code, and then use JSON to convert it to a string, pass it back, and then convert it back to a JavaScript object. Depending on your situation, you may even be able to use WDDX to serialize the data you want to pass back and forth.
- Notice that I defaulted my callback function variable to "void" in ajaxProcessor.cfm. In case we forget to specify a callback, nothing will happen, including throwing a JavaScript error.
Posted in
AJAX |
ColdFusion
August 01 2007