(Ruby, Rails, Javascript) Managing nested models using javascript windows, etc...?

Question

Hi All,

I'm currently developing a Rails app with 4 nested models (as per THIS POST). I've considered using javascript to manage them all on one page. It appears doable (as do many things in Rails), however, it doesn't come highly recommended.

That said, I'm looking to manage via proxy pages. Currently the model structure is as follows:

Sites 'has_many' Buildings 'has_many' Controllers 'has_many' Measurements

My current goal is to manage items via Javascript "windows". For instance, the "Sites" index page will have "Manage Buildings" beside each site listing. Clicking the link will then bring up a "Building" index page with only the existing buildings for that Site as well as the ability to add new ones. Then, of course, each Building page will have "Manage Controllers", and so on and so forth for each.

With that in mind, and before I bury myself in tearing apart "active_scaffold", etc. does anyone have any recommendations/suggestions for implementing this type of object management? Mainly my question pertains to the necessary Javascript, etc., however, if you have any "gotchas" I'd certainly like to be made aware as well.

Best.

Answer 1

Sounds like an interesting interface, just a thought...you might want to consider making the controllers or measurements into dialog box views, just to reduce UI clutter. Here goes:

In your routes:

map.resources :sites do |site|
  site.resources :buildings do |building|
    building.resources :controllers do |controller|
      controller.resources :measurements
    end
  end
end

You'll probably want to break out the nested resources in the preceding to reduce complexity.

Site view

(written in HAML for conciseness):

%ul#sites{:style => 'float:left'}
  [email protected] do |s|      
    %li= link_to s.name, site_buildings_path(s)

%ul#buildings
  %li click on a site to view buildings for that site

 

Site JavaScript (jquery):

$('ul#site > li a').live('click', function(){
  link = $(this).attr('href');
  $.get(link, function(data, textStatus){
    $('#buildings').empty().append(data)
  });
);

 

Buildings partial returned after submitting the $.get request above:

[email protected] do |bldg|
  %li= link_to bldg.name, building_controllers_path(bldg)

Hope this helps!