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-compatability 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 (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.

3 plugins released in 3 days?! Is this guy nuts?

Apparently? Yes.

Today I bring to you a Lightbox2 plugin for Mango. This was really fun to build and is super simple to use. I'll let the project page do the talking:

My new friend Mark Aplet asked me to take over development of the Lightbox2 plugin that he started, and I happily abliged. This plugin will add the necessary JavaScript and CSS to every page Mango outputs (aside from admin), and enables advanced linking in TinyMCE.

In order to use Lightbox, you then simply create a link (its contents can be anything: image, text, etc) and in the link dialogue, on the advanced tab, choose "Lightbox" from the "Relationship page to target" drop-down. That's it!

 

Download the latest version: Lightbox2 Mango Plugin Beta1 (0.1)

 

It's always bothered me that CFSelect validation only worked for multiple-select (list) boxes, and that we were left to our own devices to validate single-select (drop down) inputs. A few weeks ago I found a comment on Ben Forta's Blog that describes how to override the default validation function to properly handle single selects. The one caveat is that, since by nature a single-select input will always have one option selected, you have to have one invalid option. Generally I make it display, "Choose One:" or something like that. The value must be "" (not even a space).

To override the validation function, simply include this in your JavaScript somewhere. I put it in my global JS include so I never have to think about whether or not I'll need it on a given page.

var _CF_hasValue_old = _CF_hasValue;
_CF_hasValue=function(_b,_c,_d){
   if (_b.type == 'select-one'){
      var bSelected = false;
      for (var i=0; i<_b.options.length; i++){
         if ( _b.options[i].selected == true && _b.options[i].value != '' )
         { bSelected = true; break; }
      }
      return bSelected;
   }else{
      return _CF_hasValue_old(_b,_c,_d);
   }
}

Use it like so:

<cfselect name="StateCode" required="true" message="State is required." query="variables.states" queryposition="below" display="StateName" value="StateCode">
   <option value="">Choose One:</option>
</cfselect>

Again, I can't take credit for coding this. I found it on Ben's blog, and thought it should make its way into the various aggregators.

I have been eyeball deep in JavaScript lately, and I've been using two things that have been making life so much easier that I thought they would be good things to share. The first was inspired by my recent foray with Model-Glue: a function I called trace(). It's rather simple, actually. Instead of adding alert()'s in my code, which in some cases – like loops that run more than a few times – required a ridiculous amount of clicking `ok` every page-refresh; I added trace(whatever I might normally alert);. [viewcode] src="javascript_tips.txt" showsyntax=no geshi=javascript[/viewcode] Then all you have to do is add a textarea control to the first (in my case, only) form on the page, named "trace". Now instead of using alerts I use trace, and instead of clicking `ok` on 30 popups, I just see 30 lines of text in a text area. It seems like a really simple, really obvious trick – but it's only just occurred to me now, after several years of writing and debugging JavaScript. The second trick is CFDump… er, JSDump. I found this with a quick google search so again, if you had ever thought, "gee I wish there was a CFDump for JavaScript!" and bothered to search, you've probably seen this. The article I found was Simple Javascript Object Dump Function by Scott Van Vliet. [viewcode] src="javascript_tips2.txt" showsyntax=no geshi=javascript[/viewcode] You may notice that in the post I linked that someone left a comment reporting that Firefox 2 reports an infinite loop. As of today, I've tested in both IE7 and Firefox 2, with no issues and no infinite loops. His article doesn't give any documentation or examples for how to use it, so I thought I would.

/*
@obj - any JavaScript variable/object.
@name - the display name you want to give to the root node of the object tree dump.
@indent - a string to be used as your indenter. Generally use '\t'. It is appended with '\t' for each level of recursion.
@depth - leave blank, defaults to 0. Used for depth checking in recursion.
*/

And an example: [viewcode] src="javascript_tips3.txt" showsyntax=no geshi=javascript[/viewcode] This outputs:

    Foo
        bar: Hello, world!
        success: true
        count: 50
        anotherObj
            bar: Hello, world!
            count: 100
            success: true

Of course, I can't write this post mostly about JSDump without mentioning this amazing JSDump utility that was inspired by CFDump, and looks nearly the same, if not better. I haven't had a chance to play with it yet, because the above function was simpler and more than sufficient. It even paired nicely with my trace function above. But Rey Bango really deserves a lot of credit for taking the idea and running with it.

Today I came across the need to serve up a dynamic javascript include. What does that mean? It means that I had this code in place:

<script language="JavaScript" src="CustomWrappers.js"></script>

And I wanted CustomWrappers.js to return different content based on some query string parameters I would pass in. First, as a quick proof of concept, I simply copied the contents of CustomWrappers.js into a new file I created called CustomWrappers.cfm, and changed the src attribute of my script tag to use this new file.

<script language="javascript" src="CustomWrappers.cfm"></script>

Eventually, I want to be able to do this:

<script language="javascript" src="CustomWrappers.cfm?myVar=#myVal#&myVar2=#myVal2#"></script>

Unfortunately, that did not work – IIS served the template content as text/html, rather than text/plain; which we can't complain about, because that's what it should do when you request a CFM template. I tried adding this line to the top of the template:

<cfcontent type="text/plain">

Later, when I was discussing this issue with Ray Camden, he said this should be all I have to do. And I probably would have agreed with him immediately, if I hadn't already seen it not work. As it turns out, this is a perfectly valid solution – but the reason it wouldn't work for me is that my development environment runs the Developer Edition of MX7, and with debugging enabled; so what is returned when the browser requests that file is:

<META NAME="ColdFusionMXEdition" CONTENT="ColdFusion DevNet Edition – Not for Production Use."> [my javascript content] </td></td></td></th></th></th></tr></tr>………………

And so on, with the debug output; which is obviously not valid JavaScript syntax. Unfortunately, the Meta tag will cause issue with the JavaScript, so using <cfsetting showDebugOutput="false"> won't totally resolve the issue. In order to get around this annoyance, I used the following code:

<cfsavecontent variable="theJS"> [my javascript content] </cfsavecontent> <cfcontent type="text/plain" variable="#CharsetDecode(theJS, 'utf-8')#">

This definitely takes more time to process, but resolved the issue of serving dynamic JS includes with CF in developer mode and debugging enabled.