Also called Related Drop Down fields or Dependant Drop Down lists or Dynamic Drop Downs or Dependent Drop Downs.

What you want to have happen is something that will look and act like this
If you select Veg’s

and then if you select Meat :

Also, in the underlying html select tag code, you want values stored and names displayed so you can a)change or correct the names, b) display the names in a different languages but keep the underlying key values.

In the bad old days you might have them select the first value and the go to a new page for the related values, or at best refresh the entire page. Thankfully this is the days of shinny and we haz ajax!! But we still need to get the ducks lined up and quacking in order for this to work. This is my code to do that.

Note that this solution has been tested with RoR 2.3.5 and jQuery 1.4.2 (standard flavours as of early 2010)

you need to have jQuery loaded on the page and the easest way (althought not always the best way) is to pull all the script for m the public/javascrip direcroty of your application with :

in the sample I assuming a Section field and a dependent Sub-Section field. From a data model perspective the Section mode has a Id and a Name and has_one :sub_section; and the SubSection has a Id, a Name and a Section Id and belongs_to :section

in the sub_sections controller

this is a pretty straight forward piece of code that uses an id passed in the parameters, returns all the subsection objects for that section_id, sorts that collection of subsections by the subsection.name, and renders that collection as a json object.

As per the notes on the rails wiki for SQL Injection, you need to sanitize the variables being passed as a parameter, and Ruby on Rails has a built in filter for special SQL characters which you need to apply, as above. :conditions => [" section_id = ?", params[:id]]

Note, you could also use a Dynamic attribute-based finders to get the subsection object :

which is shorter code (less change of a syntax error?) and, as a bonus, automatically applies the sanitize countermeasure.

Further, you might want to create a custom json view for this routine with, only the sub section name and sub section id, if you a) have values want to keep private, or b) the SubSection objection has a lot of data (since we are only interested in 2 fields). That’s the reason its in the SubSections Controller, to keep related stuff together.

in the new or edit view for (in this case) gallery

Again, a fairly typical piece of Rails ERB code for display a html select tag used to create a select list (or drop-down list).

The collection_select help used for the Section field displays all the valid value Name’s and stores the id’s, notes the selected value (as needed in a edit) and a empty string prompt (as needed in a new).

In the case of the Sub Section field the “extra” stuff is to populate the drop down for an edit of an exiting value.

That one line “< %= collection_select(:gallery, :section_id, Section.all, :id, :name , options ={:prompt => “”} ) %>” replaces all of my 2005 posting Building a Better Drop Down Selection List for Ruby on Rails written for Rails 1.x. That’s progress!!

There’s the magic sauce for all of this, assuming that you are including the jQuery javascript library (tested with version jQuery 1.4.2) on the page. I have this in a partial used in the new and edit pages for the gallery.

The Code is wrapped up in standard jQuery code for doing unobtrusive javascript, waiting for the DOM to finish load and then watching for changes on the select tag with the gallery_section_id tag id.

The first section of code (lines 5-9) just reacts if the Section field is set to my default prompt of blank, in which case it blanks out the sub section values and does nothing else.

The next piece (line 14-16) is the meat of the $.ajax request: setting the dataType to “json” (which ensures the controller routine renders as expected), doing “cache: false” is best for development but is someting to look at in production if your supporting data is very very static. setting the url is Key! in this case ” url: ‘/sub_sections/for_sectionid/’ + id_value_string ” so that it calls the “sub_sections” controller and the “for_sectionid” routine and passes the id string.

If the ajax returns successfully, then the code removes the exiting option’s (important! it works on the option part of the DOM) from the sub_section select tag, adds my default blank line, and than append the id and name values from the returned json object.

Using Firefox firebug extension will make your life much easier in debug this, in particular confirming the ajax request fires off the way (and to the url) you expected, and returns what you expect.

Update : thanks to Tom Meinlschmidt’s feedback I’ve added “.sort_by{ |k| k['name'] }” to the function in the sub_sections controller to return the results in order by the sub section name, as it should have been. (and I fixed up a typo!)

Several thing stood out is this year (my 4th Mesh) :

• Chris Thorpe, from The Guardian newspaper, did “Data Chemistry” (a older version of which is The New Raw Materials and Data Chemistry)and a Keynote which delved into the work the The Guardian is doing to create a interface allowing full access to the content and / or the data behind that content. I was not aware of the full breadth and depth of what they were doing. It was also interesting to near some of the story behind the curtain. After the conference was the official Guardian announces commercial launch of Open Platform.
• Diana Clarke, from FreshBooks (Online Billing and Bookkeeping) talked about Evolving the Platform and how they moved from legacy php to a RESTful python web service. Excellent!! I use Freshbooks, it always impressed me, and now only more so.
• Joseph Menn’s keynote and book about the new Cyber Crime lord ecology was enlightening and scary.
• one of the panel’s was tapped as part of the TVO’s The Agenda in a discussion about the evolution and changing face of privacy in the digital age with Ann Cavoukian, Mathew Ingram, Joseph Menn, Alan Sawyer, David Fewer.
  

  (Link is here for the above
  The Agenda live from Mesh: Canada’s Web Conference)

  FaceBook came in for heavy criticism, with Leigh Honeywell making the best comment of the session!

  And yes I’m like all over the back ground shots. (Hi Mom! I’m on Television!!)

• The Agenda also tapped 3 interviews form Mesh Speakers : Joseph Menn: Fatal System Error | Chris Thorpe: Future of Newspapers | Avril Benoît: Social Media to the Rescue. Very worth watching.
• All in all a great conference with lots of insight, and good gut check of what people are doing and where they what to go. I’m still recovering and processing. I got my annual Mesh Portrait by the magical Rannie Turingan aka Photo JunkieAlso I got to lick an iPad. Yummy. :Q
• other writeups for Mesh :
  • BlogTo highlights
  • Isaac Garcia does a wrap up
  • from Digital Journal we have : mesh 2010: How social media are transforming newsrooms (Includes first-hand account) and mesh 2010: Dissecting new media’s ‘fast-food content’
  • Soldier of Code’s Kaptain Krispy also had a Mesh 2010 report

  this was extracted this from the Quick links as of May 21th 2010 post, and expanded.

This got me to thinking of the HOW, WHAT, WHERE, WHEN and WHY (The 5 W’s?) of Social Networks for Small Business, and in particular, the small retail business, as apposed to more service orientated businesses.

(this is likely be a expanding list and if you have additional suggestions then make a comment!)

The HOW.

So how are they going to do Social Networking? Probably either via the web browser on their smart phone (in the shop) or on their home computer at home.

They may not have a need for a Internet connection at work because it is so removed from what they do and their customer interaction, or (in the case of some coffee/bake shops) not something they would think of providing to their customers as a service or enticement.

They probably do some bookkeeping and inventory which ends up on the computer but their business are primarily paper based.

Many still have analog cash registers, and not computerized Point of Sells (PoS) systems. (This might be a cost issue of the hardware software?). The good news is that mobile computing is becoming easier and cheaper.

The WHERE

I would be tempted to lead with Twitter, because its open to all, and it does not take long to write 140 characters, although fitting every into 140 characters can be very challanging.

And then place the same message on a public accessible FaceBook FAN with expended additional text, and an added an image (always good) about the product/person/thing.

I would also have the last several Twitter status messages (Twits) on the your website homepage, done auto-magically via a javascript tool.

You can have interesting discussion, (and a whole other posting) about if you need a web page at all now. At most these businesses might have a who are we, where are we, “when we are (our hours), “what are we” (our products, possibly just a high level list of products or suppliers). So 2 to X pages where X is a single digit. “who” and “what” can collapsed, as can “When” and “where”. The “what can be expanded to considerable details but be careful.

You might get away with only a FaceBook FAN page, if it’s open to Google but I’m a little nervous about putting to much of your on line marketing presence in FaceBook’s owned garden. From a medium to long term Marketing and Branding angle it just looks like a bad idea. But very short term is okay.

You probably don’t need to edit your company website more that once a year or season (for Seasonal product), but you do need to keep it up to date when things change. If you can’t update your web site content as easily as your FaceBook FAN page, your doing it wrong. One of the nice things about showing your Twitter stream on the home page (or on a side bar) is it is a trivially easy way to keep some fresh content on the web site.

It would be good to become aware of location based sites like of Yelp and Urban Spoon (or other in your category) as well a the newest up and comers FourSqure and GoWalla.

Seek out and learn about tools that let you know when other people mention you, and your brand.

Your Website should be usable on a mobile web browser. That means to allows for appropriate size and styling, and no flash! (restaurants and hotels are really bad at this!)

The WHAT.

What should you be messaging on?

• The arrival of new products, a special shipment or season item.
• Your having a sale.
• You had to close the store temporally due to : medical emergency; water/gas leak; a holiday. But you will be open tomorrow!! (please visit)
• You are back from the Holiday, hope you enjoyed yours and am eager to service you!
• You are all out of stock, but more will be in on Monday! (don’t you wish you had come by earlier? Don’t worry you too can get one of these popular things on Monday, While supplies last)
• Wish Dave a happy birthday and get a discount.
• The First 4 people to say the secret word today, get a free Gadget-Thingy!!
• This wonderful event is happening in the neighborhood! Check it out! (don’t we live/work in a great place?)
• The store next door is having a promotion! (and come visit us too!)
• We were mentioned in the local/national newspaper (with the link to the mention).
• Here’s a interesting Fact about something we sell, it’s name comes from A meaning B, or it’s made from solvent green!!
• Sharing information about your industry.
• Re Twitter things that other people Twitted about your business or the neighbor. (and thank them)
• Regular customer Sue is doing this big deal thing

Don’t be purely promoting your self, that is “traditional” marketing and quickly becomes being seen as spam. Do promote your neighbors and neighborhood, your customers; and promote your “industry” and peers. Grow the pie, not (just) your piece of it.

You can do this in a funny manner, just be careful they share or understand your sense of humour. It should be done in a informal tone. Make it a win for your customers. Over all, it should be Sincere, Positive, and it should be you.

The WHEN.

This is a function of the HOW and the WHAT : At most daily (except for emergencies. and likely done at the beginning or the end of the work day.

Of course, the lack of time is another reason these business don’t do “Social Networking”). Try to do it at minimum weekly (this is where the neighbourhood stuff and interesting facts come in handy) and never never less than monthly. Try doing a little learning about this “Social Networking” every day/week or month. It is a challenge to do these, when running your business is a full time job (or more). Ask for help! Pay someone (like me) for help!

The WHY.

Social Networking, done well, is the most cost effective advertising and marketing available.

• Give them a reason to visit you.
• Exceed their expectations;
• Do not disappoint your customers (and potential customers);
• Telling them your story and how your are different; but a face to your business.
• Experiment, but remember the “Golden Rule” (Treat others as you would wish to be treated).
• Showing them you are connected to the place(s) you share.
• Be Patient.
• Generate positive word of mouth.

People are -probably- already talking about you, if you know about it you can : learn from listening, apologies for mistakes; correct errors; inform and educate; connect.

It’s all about being Social!

June 14 update

Mashable post Why Small Businesses Shouldn’t Take Social Media for Granted makes some good points, including : “Simple Works”, and “Your Size Works in Your Favor” and makes a great suggestion :

Who are your most frequent customers? Make a Twitter List called “Regulars,” and add your regulars on Twitter to it.

To which I would add making a Twitter list of your (premium) suppliers!

In the beginning of this year it was disclosed that Google (as well as and 20+ other companies) had been the victim of Chinese cyber attack, attackers called the operation “Aurora” . Microsoft had admitted that Explorer was used in Google China hack (via BBC), and it now known that the attack took advantage of a zero-day vulnerability in Internet Explorer 6 – CVE-2010-0249 – to drop malware onto compromised systems. (via The Register)

This has promoted France, Germany (and then Australia) to suggesting that its citizens switch from Internet Explorer.

Thomas Kristensen, the chief security officer for Secunia a company that specializes in looking for security vulnerabilities, commented :

“Currently it is evident that running IE6 on XP or Windows 2000 is a very bad idea, and any other browser would be a better choice for XP and Windows 2000 users,”

In other news :

Goggle has announced Modern Browsers for Modern Applications declaring :

Many other companies have already stopped supporting older browsers like Internet Explorer 6.0 as well as browsers that are not supported by their own manufacturers. We’re also going to begin phasing out our support, starting with Google Docs and Google Sites. As a result you may find that from March 1 key functionality within these products — as well as new Docs and Sites features — won’t work properly in older browsers.

But more importantly, Google-owned YouTube will end support for Internet Explorer 6 on March 13, just two weeks after ending support on Google Docs.

This will have the effect of getting many non corporate users to upgrdae their browsers off of IE6, and more than a few off of Internet Explorer altogether.

This has lead to the announcement that “Internet Explorer Six, resident of the interwebs for over 8 years, died the morning of March 1, 2010 in Mountain View, California, as a result of a workplace injury sustained at the headquarters of Google, Inc.”

Hence, a funeral services for Internet Explorer Six will be held at 7pm on March 4, in Denver, Colorado.

Can someone be sure to put a stake in it’s heart to ensure it does not come back?

It’s still the most dreaded 3 letters in a web developers life.

Beta New just published (March 1) Let the Internet Explorer 6 death watch begin will many amusing statements :

IE6’s heart turned evil long ago. .. During IE6’s reign of terror Website designers paid tribute by using a DOCTYPE .. Meanwhile, IE6 amassed a great group of worshipers — malware writers looking to exploit security vulnerabilities for profit. .. IE6 will be missed by malware worshipers and enterprise IT managers too dependent on ActiveX controls to easily switch browsers.

(and how soon till we can start the “Flash Death Watch”? It’s the IE6 of the 10’s!)

Update March 5th : Post ie6 funeral report: IE6 Laid To Rest. Pictures, Videos, And Flowers From Microsoft. and Protesters (!?!).

And see CSS Squirrel, Kyle Weems, for Goodbye, Six, and good riddance. So Say We All! and then read the related blog post.

works fine in FireFox (v3) but not in Internet Explorer ( v6), in particular it seems the the

fails giving a “Object doesn’t support this property or method”

thankfully

worked just fine. but I still worried about the Fail.

I think the problem was that in some cases the

was a

element and strictly speaking Div’s do have children. Is this a difference in the DOM between IE and FF?

perhaps $(’someIdName’).parentNode.childNodes would work?

Similar in aim to FaceBooks “friends in common”, adjusted to reflect twitter’s asymmetrical following as opposed to FaceBooks symmetrical Friending. i.e. in Facebook we both have to agree to be “Friends”, but it Twitter it only takes one of us to follow the other, following back is optional.

It order to use this script you need to have the GreaseMonkey extension installed, add the script, and then go to a users profile page on Twitter.com, like Robert Scoble’s twitter page, (or Ashton Kutcher’s!)

FollowRank tells you how many, and which, of the people you follow are also following Robert Scoble (or Ashton Kutcher).

Follows in Common tells you how many, and which, of the people you follow are also followed by Robert Scoble (or Ashton Kutcher).

If you look at your own profile you will see a) 100% Follows in Common, b) How many of the people you follow who follow you back!

Notice the small gray down arrows? (This is visible if the result is none zero.) Clicking on the text line will reveal the avatar picture of the people who contribute to the score. Hovering over the picture will show their name and clicking on it open their user profile page (and compute their Follow Rank and Follows in Common).

Clicking on the text line a second time (see the small gray up arrows?) will collapse the view of Follow Rank or Follows in Common user avatar’s. The data is cached so reopening the view is super fast.

So Why Follow Rank?

This information lets me know this persons relevance and weight in my social network, the people I have choicen to follow (my first Order Social Network in Twitter).

It lets me know, quickly, why they discovered me, or why I might follow them.

How am I doing this?

All JavaScript, using the Twitter’s API calls for their Social Graph Methods (Twitter REST API Method: friends ids and Twitter REST API Method: followers ids), lots of caching of results (but only for a period of time using my aged Cache function – persistent, but not too persistent!! ) to get around the Twitter throttle limit (currently ~150 requests per hour limit, see Rate limiting), and lots of JSON AJAX calls of those api calls. Plus, taking advantage of Twitters.com’s use of jQuery on their web pages, their own plug-in’s and css and images. Easy!!

What’s next

There is still work to be done and features to be added add to the GM script (LiC : Lists in Common?), and then to go beyond what can be done in a GreaseMonkey script!

I’m thinking of exposing your 2nd order Twitter Social Network : Who are the people being followed by the people you follow? What’s their Follow Rank? Also, who of them follows almost the same people who follow?

I think this would make a organic “Suggested Users List”, personalized just for you because it based on your social network.

Now do that for your -1 & -2 order networks.

Plus sorting (by alpha, by Follow Rank, by FiC), and searching of all that.

This will keep me busy! Whatcha think?

Values set using the “GM_setValue” function are saved in the Firefox preferences back end and can be manually changed by typing “about:config” in the address bar and searching for the preference name “greasemonkey.scriptvals.namespace/name.foo” or the key that you set.

So there are several changes made to the code :
In rereading the Grease Monkey Wiki I spotted the GM_deleteValue function in it’s api wiki. ack!!

I moved 2 variables (MaxCacheAge and currentTime) outside the function themselves. They could almost be constants, but as long as they are only calcualted once and not hard coded! Also “currentTime” is stored in it’s milliseconds format since this is the only format I use it in.

I’ve included two utility functions : getIntersect (which returns an array with all elements in arr1 that are in arr2 as seen in a JavaScript Function to get the Intersect of 2 Arrays) and Array_diff (which returns an array with all elements in arr1 that are NOT in arr2)

The biggest change is the addition of 3 functions : GM_setCachedDataTrackingValueKey, GM_removeCachedDataTrackingValueKey and GM_flushCachedData which track the keys I have put in the Cache and ensure that nothing too old is ever stored there. I believe the first two are straight forward but it is flushCachedData that is more interesting / complicated. flushCachedData excepts a number which is the max age of all values in the cache which might be 48 hours (MaxCacheAge * 2) or 0 (Zero) in which case all values tracked in the cache are removed. I can see some further optimizations for these functions, but they solve the basic problem of all that cached data always accumulating and never getting cleared away.

The basic usage remains the same. The only thing I would add is that I have used it in the beginning of my GM script to do a cleanup

If you wanted to blow away all the values stored by a GM script just include (once only!!) this:

Hope you find this useful. cache away...

If you wish t see and use it in practice then check out Follow Rank and Follows in Common for Twitter User Profiles

UPDATE : Revised

All well and good, but I wanted to store some data there (the results of a AJAX GET request), but didn’t want to store ithem forever just for a day or two or at least a couple of hours.

and so I “created” 2 functions, GM_setCachedDataValue and GM_getCachedDataValue, which allow use of the GM persistent data function’s as a aged Cache! This allows me to “say” get me this value, unless it is older that X milliseconds old.

How to use this :

before doing my Ajax request I check my aged cahce to see if the value is there and is no older (in milliseconds) that a given age. If it returns a non blank value that take that as the value and proceed, otherwise assume that it is either non there or a stale value, in either case that means I have to fetch fresh data which then needs to be stored. Clear as mud?

here is a sample javascript code to show how to use it

This is generally faster than waiting for the calling service to return the get request, and if that service has a throttle limit (for Twitter it is 150 requests per hour limit, see Rate limiting) it will (might) save you from hitting that too soon.

UPDATE : Revised

I needed the javascript array equivalent, so that given an array A = ["a","b","c", "d"] and B = ["b", "d", "e"], getIntersect(A, B) = ["b", "d"]

Update:

In the comments, Jeffery suggests a version using a javascript hash table (also called an associative array or a map), which would be much faster especially if arr2 was much shorter than arr1. I will do some benchmarking with some live data (from the app I extracted this from) to see how badly my version does. (See below : he sunk me big time! use his version.)

He is also too kind to point out one inefficient / bad practice in the code above : that I should have stored the lengths of the arrays in a variable, rather than recalculating it again and again. Nevermind ...

And elsewhere, Pete pointed out the Underscore, a utility-belt library for JavaScript that provides a lot of the functional programming support, and its _.intersect function .

Further update:

Now with benchmark results and less smoke up my ass! (repeat after me : "test your assumptions before making an ass of yourself (again)", now repeat 100 times).

I created the (very) simple benchmarking file that would actual work, a html file with embedded javascript with has the 2 functions for testing and 2 arrays : one with elements 4646 and one with 1103 elements.

The file is http://www.falsepositives.com/files/test_array_interect_file.html. There is also a version which iterates the test 100 tests, and shows the average result in a table as below.

I also rewrote the test from using firefox's console.log and console.time functions to using document.write and some raw javascript to log the time it took for a given function to run so I could run this in different browsers. (more about this later)

So the raw results where that Jeffery's version blew my version out of the water! in FF 3.3 mine ran ~ 85 to 90 ms and his ~1 to 2 ms !! So creating the hash and searching it are really really optimized.

The second surprise was that my suggested optimization of my version ("storing the lengths of the arrays in a variable") added several ms of run time! I think this is because a) the lengths are already calculated and stored as a property of each array, and b) their is some overhead of storing the 2 length values as local variables. Since object properties are really hashs, and we have just learned that hashs are really really fast the result make some sense. Storing a value instead of recalculating it is still a "really good idea", just not this time.

Having rewritten the test in more browser generic fashion here are the results for different browsers (times are in milliseconds) :

Your mileage will vary. The absolute number are not as interesting as the relative values.

I have also run my test against Underscore, and its _.intersect function for some interesting results:

So not as fast as even my humble version, but keep in mind that the Underscore _.intersect function handls any number of arrays to intersect, and has 50 additional utility functions.

So what can we learn from this?

Hashes are very fast; Jeffery is smart; IE stinks; Ian needs to test his ASSumptions!