View results into a dropdown

Located in:

A department at work organises and hosts events on a regular basis and they finally wanted to get their info up on the website. However, even before they had their first events listed, they wanted an archive of past events and wanted to have a dropdown on their page which listed monthly archives (ie. September 2010, August 2010 etc.). I decided to approach this using Views. Building the view to list past events was no problem, but loading this information into a dropdown was much more involved than I had expected.

Apparently Views does not do Everything

If Views had a "Select" display to complement the usual "Attachment", "Block", "Feed" and "Page" displays (or a "Select" style), then this would have been a 10 minute job. (ie. the views display wouldn't be a regular article listing, it would be a populated dropdown menu) However, no such luck. I built my view and then had to overwrite views-view-unformatted.tpl.php to get at the piece of code that outputs regular lists. (as always, thanks to the Theme Developer module for giving possible template names) The result was that now when I inserted my view into the web page, it pops out as a dropdown instead of a typical list.

Upcoming events listed and then event archive in a dropdown. Both created by Views.

A Bit of Javascript and We're Good to Go

Now that I had the view's results going into the dropdown, I needed to make the dropdown functional. One thing I have yet to figure out (or maybe it doesn't yet exist) is an easy way to include a javascript file for one particular node. Perhaps it can be done through CCK, but I haven't investigated. I'm used to using drupal_add_js from a module. In this case, I made a generic module just so I had a place to load this (and future) .js files for arbitrary nodes. (thus the module being named "One Node, One Node Only") Once I had my javascript loading for the node, it was easy to go to the selected page on the dropdown's change event.

Done? Not quite.

Now that things were pretty much working as expected I had to account for users/devices that don't have javascript enabled. In this case we need to have a submit button for the dropdown and then the server-side code to take them to the right place. I built this functionality into the One Node, One Node Only module also.

Dropdown with submit button for non-js users

And that was pretty much it. Using the insert_view module (NB: Use with caution - permissions holes), the view can be inserted into the corresponding node without using any php code. (ie. page editing is non-techie friendlier/safer)

Average: 1 (1 vote)
Your rating: None

Social mediatize it!

Twitter Twitter Facebook Facebook     
How about that! I'm a Drupal association member.

Attention IE user!

It turns out you are using an outdated browser and my site might look a bit weird for you. (images are off colour, text gets cut off, layout is wacky) This is because your browser does not implement web standards. Please consider an upgrade.

Alternatively, you can try other browsers like Google Chrome, Mozilla Firefox, Opera or Apple's Safari. Every web developer on the planet will thank you! (and that's not really an exaggeration)

Hide this notice for the rest of your visit