jump to navigation

These Chains of Selects October 29, 2008

Posted by reidmix in Code, Example, Javascript.
Tags: , , , , , ,

I was looking for javascript library that would manage select (HTML) elements that are dependent on one another.  These are the drop-downs you often see on online car sites where you select a make and it populates the next drop-down with the models for that car make.

I was hoping that there would be a libary that was publically available, object oriented, small, backed by JSON, and would even like it to be based on the Prototype library.  All I could find was a library that may satisfy one of my requirements but not all.  Libraries I found were either procedural, terribly bulky and complicated, and never backed by JSON.

In my buy it or build it moment, I decided to build it: here is a chained_selects javascript library.  It’s fairly lightweight, it runs in about 85 lines (comments and whitespace included), you can initialize it with javascript objects or JSON, it’s object oriented and relies on just a little bit of Prototype.

You need the heirarchy of data to back a ChainedSelect object, the form, and selects that are assoicated with each “level” in the heirarchy.  It can have as many levels you want in the hierarchy from 2 up.  So, in my car example, imagine you have a two car makes (Acura and Volkswagen) and the Acura make has two models (the RL and the TL, sweet!), and the Volkswagen make has three models (Beetle, Jetta, and the Passat).  Each of the models have a database id.  My JSON for this heirarchy would look like:

var data = {"Acura":{"RL":1, "TL":2},"Volkswagen":{"Beetle":3,"Jetta":4,"Passat":5}}

You can see the first level is the outer-most hash with the makes, and the inner mosts hashes have the models and their db ids.  For rails programmers, this could be a rails hash that you run to_json with.

I set up my HTML form, with a select for each level in the heirarchy, like so:

  <form id="cars" method="post" action="/choose_car">
    <select name="make"></select>
    <select name="model"></select>

Then I can setup the ChainedSelect object to manage these selects, using the data above:

new ChainedSelect(data, 'cars', ['make','model']);

This says, created a chained select with my data for the form with id ‘cars’, with the first level select with the name ‘make’ and second level select with the name ‘model’.

The first select will load with three elements:

  • Choose make…
  • Acura
  • Volkswagen

When Volkswagen is selected, the second select will load:

  • Choose model…
  • Beetle
  • Jetta
  • Passat

If Acura is then chose, the second select will refresh with the correct data. If the ‘model’ is chosen let’s say Jetta, then the id for that model is sent in the form (4).  For rails developers, the name of the select needs to be different from the label (“Choose model…”), you can specify a label and a select name separately, with an embedded array, like so:

new ChainedSelect(data, 'cars', ['make',['car[model]','model']]);

Oftentimes, we have an edit page with the values already prefilled on our forms, we can add another array parameter that specifies the path to the selection:

new ChainedSelect(data, 'cars', ['make','model'], ['Volkswagen','Jetta']);

Lastly, when the final select is chosen, sometimes we want to take an action or an AJAX call, we can supply an onComplete function to run which is yielded a the value chosen:

new ChainedSelect(data, 'cars', ['make','model'], null, function(choice) { alert("You chose:"+choice); } );

You can use all of these elements together to get the behavior you want, I also have a little rails form helper to create my javascript for me:

  def chained_selects(tree, form, selects, active, oncomplete=nil)
    %(new ChainedSelects(#{tree}, '#{form}', #{selects.inspect}, #{active.inspect}, #{oncomplete || 'null'});)

I know that the script can be improved in many ways (Doug McInnes added the onComplete feature).  Please feel free to send patches or any bugs you may find.

Include Health October 29, 2008

Posted by reidmix in Example, Plugins & Gems, Rails.
Tags: , , , , ,
1 comment so far

I created a little plugin to make it easier to offer health check URLs in all our applications called Health.  These URLs are a necessity for our SysAdmins to hook into Big Brother or Nagios.  These monitoring systems systematically poll an application at this URL to check the status of the application.

To get started, install the health plugin and include it in your Application controller:

class ApplicationController < ActionController::Base
  include Health

That's it.  You should be able to navigate to <a href="http://localhost:3000/check_heath">http://localhost:3000/check_heath</a>. Health sets up the named route '<span class="s1">check_health' and</span> by default it will check the connection of the database by running a "<strong>select 1</strong>" SQL statement.  If all goes well you should see "SERVERUP".  If there's a problem with the query you will see "DBDOWN" or an 500 error depending on the level of problem.  You can turn off the DB checking (our SysAdmins wanted it):

ApplicationController < ActionController::Base
  include Health
  health_check :with_db => false

One more trick, it does is handle any additional / custom checks that you may require. Pass a block, Proc, or a symbol that represents the name of the method to the health_check directive:

ApplicationController < ActionController::Base include Health health_check do |controller| controller.has_donut? || "no donut" end end [/sourcecode] In this case, assuming the controller has a method called has_donut? which does not return false or nil, you will see the “SERVERUP” message, otherwise you will see what was last evaluated in a message like “PROCDOWN no donut”

And you can mix and match all three types of blocks, Procs, and symbols — more examples are in the README.

Adding vi keybindings to irb, script/console, and mysql October 19, 2008

Posted by John Dewey in Rails, Ruby.

I loves me my vi, and sun keyboard mappings (although it drives people crazy when they peer on my macbook).

Add the following on OS X 10.5:

john@emopop:~> cat .editrc
bind -v

This will work for OS X 10.4 and other operating systems:

john@emopop:~> cat .inputrc 
set editing-mode vi

Hyphenated XML tags in Builder October 13, 2008

Posted by John Dewey in ActiveRecord, Example, Rails, Ruby.

I typically use to_xml when building a shallow representation of my model in XML. It becomes hella difficult to maintain the format of my XML when nesting numerous levels deep. Sometimes you gotta use a Builder.

If you would like your tags to be hyphenated (like the to_xml default), here is a nice trick:

xml.__send__('hyphenated-tag-name'.to_sym) do
  xml.tag "data"

Coverage Nagging October 10, 2008

Posted by John Dewey in Code, Command Line, Example, Rails, RSpec.
add a comment

I like to keep an eye on my coverage every so often. I run the following in my applications root, for occasional coverage reminders.

while : ; do rake spec:rcov ; open coverage/index.html; sleep 3600 ; done