Ordering lists, UI example

jQuery is definitely my javascript library of choice.

Easy to use and you can spit out awesome stuff pretty quickly and easily.

My latest conquest is drag and drop ordering. Basically what I wanted to do was have two lists. Then you can drag options from one list to the other, and order items within each list.

Here’s a demo of the drag and drop functionality in action

Originally I built this to use in a WordPress plugin I was writing. The point would be to give users some options and let them order the options they selected.

The nice part of this is what goes on behind the scenes. When a user moves an item around (either from one list to the other, or within the list itself to reorder things) the code fires off an ajax call and stores/updates the list in a database.

This is the pretty basic instance of this functionality though. The plugin comes with a lot of options that you can use to really customize the user experience.

Some other options you have is triggering an event (an alert, popup, changing colors on something, etc.) when a person selects an item, when they drop the item, when they put one item above or below another item (before or after they drop it there, warnings anyone?). It’s a nice way to give a lot of feedback to the user as they are interacting with the page and the lists.

And the effects don’t have to stop there. By re-ordering a list on one part of the page could effect layout or content or any other number of things on a page.

A Constant Contact “Case Study”

Yeah I put case study in quotes. Not sure if this really qualifies as an official case study, but definitely worth a post.

Recently did a quick job with a client to update some of their mailing lists.

In a nutshell they needed some custom data added for each contact. The data was created using an algorithm provided by the client, but relied on some unique information from each subscriber.

So the process in pseudocode:

1. Connect to Constant Contact’s API
2. Get all of the contacts in a specific list
3. For each contact get some of their information such as the user id, email address, etc.
4. Build a string based on this data
5. Update the contact’s information in Constant contact with this new data

Simple process, but a nice challenge.

Here are a few fun facts I learned:

• Constant Contact returns its contact data in paged lists. So you can’t just ask for all of the contacts in a specific list and get one result set. You have to ask for each page. Yay recursive-ness.
• There are limits to how many characters you can put in a field. Since the url that got built didn’t really fit logically in any of the provided fields I decided to use the custom fields CC provides. Fun fact: you can only put 50 characters in each custom field.
• From the sending side of things, Constant Contact only allows you to enter subscriber fields into an email if the email is XHTML. And you must have valid XHTML or no dice on even getting the email out of draft stage.

All in all it was a bit frustrating, but successful. Which adds up to a fun programming day. And I got this nice little code sample I can post for you guys which includes a PHP class provided by Constant Contact, and my own custom code to use that class to do stuff to subscribers in a list.

If you’re interested in the code you can check it out here: download Constant Contact Class and case use files