Earlier today a friend asked me if I knew of a slick plugin for jQuery that makes it easy to show and hide form fields based on the selected value in a <select> box. Unfortunately, I don't — I've always just done stuff like that manually. And that definitely starts to get hairy with large complex forms where you want to show and hide different combinations of fields.

A light bulb went off in my head though, and I quickly put together this example for him. Using a combination of jQuery and some cleverly placed CSS class names, you can very easily find the elements you want to show, and from there it's cake.

So what I've put together here is a form with a select box, and each option has a value from 0 to 4. The form also contains 5 paragraphs (could just as easily be table rows, divs, fieldsets, or a plethora of other things), with class names like "show0" and "show3" — indicating which status of the drop-down they should be displayed for. Luckily for us, you can assign multiple classes to an object which makes it insanely simple to setup different combinations of visible elements.

In the example below, only a single paragraph is displayed for options 0, 1, and 4 — but for options 2 and 3, two different paragraphs are shown. Selecting option 3 shows paragraphs 2 and 3 because they both have the class "show3", while selecting option 2 only shows paragraph 2 because while it does have the class "show2" none of the other paragraphs do.

Update: Thanks to Charlie Griefer for reminding me of some of the root functionality of jQuery that I mistakenly left out of this example. I'm updating my example according to his comments.

Here's a working demo for you.

Yesterday, Ray posted Ask a Jedi: Using ColdFusion Ajax to set Client Variables. Now, far be it from me to steal from Ray — but what it looks like is that the question asker also posted his question to Stack Overflow; and after composing my response there I decided it would make a good blog entry too.

As it turns out, Ray's response is really clever. I'm quite fond of it, actually. But I still think mine is a bit more robust and closer to what you might call the "right" way to do it.

The question, to save you the clicking if you haven't seen either of those two pages, was how to get and set ColdFusion client variable values with JavaScript. As for dependencies, my solution uses jQuery and the returnFormat parameter added in ColdFusion 8.

What you want to do is write what would be called a Client Facade

ClientFacade.cfc: try { client[arguments.name] = arguments.val; return(true); }catch (any e){ return(false); } if (structKeyExists(client, arguments.name)){ return(client[arguments.name]); }else{ if (len(trim(arguments.defaultVal)) eq 0){ return(''); }else{ return(arguments.defaultVal); } }

And to use this component, you need to write some client-side JavaScript. As I said before, I used jQuery — because I never leave home without it.

test.cfm: foo: Set Value Alert Value $(document).ready(function(){ //attach functionality to our alert button $("#alertValue").click(function(e){ var clientVal = 'initialdata'; $.getJSON( 'clientFacade.cfc', { method:"get", returnFormat:"json", name:"foo" }, function(d){ clientVal = d; alert(clientVal); } ); //prevent the button from doing anything else e.preventDefault(); }); //attach functionality to our set button $("#setValue").click(function(e){ var success = false; var valu = $("#foo").val(); $.getJSON( 'clientFacade.cfc', { method:"set", returnFormat:"json", name:"foo", "val":valu }, function(d){ success = eval(d); if (!success){ alert('Failure'); } } ); //prevent the button from doing anything else e.preventDefault(); }); }); Note that I'm using "xscript" instead of "script" tags so that Mango will allow me to post it.

This code remotely (via AJAX) accesses ClientFacade.cfc to send data back and forth. It lets you specify a default value when getting, instead of dealing with non existence.

We start with a few simple form fields: a textbox, a button to save the value, and a button to get and alert the value. To demonstrate that it really is working over AJAX and not just reloading the page faster than can be perceived, you could simply CFDump the Client scope on the page. This would show that the values in server memory are changing without the page reloading.

Then, some click event handlers are binded to our buttons that use jQuery's getJSON method to interact with the server, and the return data is managed with anonymous callback functions.

One final note: Notice that in the SET operation, I'm quoting the variable name:"val":valuThis is because "val" is a JavaScript reserved word. I should have thought of that when writing my CFC, but I didn't, and this is how you get around the issue. (Or just rename the CFArgument, but who has time for that?)

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:

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:

...

Posted in ...

...

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:

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:

Choose One:

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.