Skip to content
Menu
Justin Ball
  • About
  • Privacy Policy
Justin Ball

Hierarchies, trees, jQuery, Prototype, script.aculo.us and acts_as_nested_set

Posted on January 18, 2009November 1, 2021

‘single_message’ should normally be set to false. I added it in just in case I needed to render a single message for an ajax call. If you aren’t rendering an entire tree and thus have only one node then passing ‘single_message = true’ will force the method to call the database to get the level of the node in the tree.

If you want to render a true tree structure (not just indents) then you’ll need to do a bit of recursion. Assuming @message is a root level message you can do this:


    <% render_messages(@message) do |message| -%> <%= message.text %> <% end -%>
</pre>

module MessagesHelper

def render_messages(message, &block)
  concat('
  • ', block.binding) yield(message) concat('
      ', block.binding) if has_children?(message.id) children_of(message.id).each do |child| render_messages(child, &block) end end concat('</li>
    ', block.binding) end # HACK these methods assume a variable named @messages is defined. # This hack prevents us from having to pass messages all over def has_children?(message_id) @messages.any?{|message| message.parent_id == message_id} end def children_of(message_id) @messages.find_all{|message| message.parent_id == message_id} end end </pre></code> (*Note that I've not fully tested the code above and I am betting it is not the most efficient. At the very least you'll want to cache the resulting html.) Next you'll need to add some script to get the drag and drop to work. It will look something like this. Honestly I can't remember if I got this code from somewhere online or if I wrote it. I am sure someone could make it generic, but in this instance we use css class names to add drag and drop functionality to the various nodes:
    
    jQuery(document).ready(function() {
    
    	jQuery(".messageContainer").draggable({
    		zIndex : 1000000,
    		revert : 'invalid',
    		opacity : 0.5,
    		scroll : true,
    		helper : 'clone'
    	});
    
    	jQuery("#messageList").droppable({
    			accept: ".messageContainer",
    			drop: function(ev, ui) {
    				var source_li = jQuery(ui.draggable);
    				var child_ul = jQuery(this).children('ul');
    				var message_id = source_li.children('input').val();
    				var parent_id = 0;
    				if(same_parent(source_li, child_ul)){
    					return;
    				}
    				insert_alphabetic(child_ul, source_li);
    				update_parent(message_id, parent_id);
    	    }
    		});
    
    	jQuery(".messageContainer").droppable({
    	  accept: ".messageContainer",
    	  hoverClass: 'messageContainer-hover',
    	  tolerance : 'pointer',
    		greedy : true,
        drop: function(ev, ui) {
    			var source_li = jQuery(ui.draggable);
    			var target_li = jQuery(this);
    			var message_id = source_li.children('input').val();
    			var parent_id = target_li.children('input').val();
    			if(target_li.children('ul').length <= 0){
    				target_li.append('
      '); } var child_ul = target_li.children('ul'); if(same_parent(source_li, child_ul)){ return; } jQuery(this).children('ul:hidden').slideDown(); insert_alphabetic(child_ul, source_li); update_parent(message_id, parent_id); } }); jQuery(".submit-delete").click(function() { if(jQuery(this).parents('li:first').siblings('li').length <= 0){ jQuery(this).parents('li:first').parents('li:first').children('.expander').remove(); } return false; }); function insert_alphabetic(child_ul, source_li){ var kids = child_ul.children('li'); var source_text = source_li.children('span.link').children('a').html().toLowerCase(); for(i=0; i<kids.length; i++){ var current_text = jQuery(kids[i]).children('span.link').children('a').html().toLowerCase(); if(source_text < current_text){ source_li.insertBefore(kids[i]); return; } } source_li.appendTo(child_ul); } function same_parent(source_li, child_ul){ return source_li.parent() == child_ul; } function update_parent(message_id, parent_id){ var path = jQuery('#updatePath').val(); jQuery.post(path + '/' + message_id + '.js', {parent_id: parent_id, action: 'update', _method: 'put', only_parent: 'true' }, function(data){ apply_expander(); if(data.length > 0){ var result = eval('(' + data + ')'); if(!result.success){ jQuery.jGrowl.error(result.message); } } }); return false; } apply_expander(); function apply_expander(){ jQuery(".expander").remove(); jQuery(".messageContainer ul:hidden li:first-child").parent().parent().prepend('<a class="expander" href="#"><img src="expand.png" /></a>'); jQuery(".messageContainer ul:visible li:first-child").parent().parent().prepend('<a class="expander" href="#"><img src="collapse.png" /></a>'); jQuery(".expander").click(function(){ var img = jQuery(this).children('img'); var target_ul = jQuery(this).siblings('ul'); if(img.attr('src') == 'expand.png'){ img.attr('src', 'collapse.png'); target_ul.slideDown(); } else { img.attr('src', 'expand.png'); target_ul.slideUp(); } return false; }); } }); </pre>
      In two of the projects I have removed prototype and script.aculo.us in favor of jQuery. Personally I prefer jQuery and the jRails plugin makes the transition simple. However, there are probably more people using the default libraries. Prototype actually comes with the ability to create a nice drag and drop ordered tree built in. However, I don't love the fact that their 'onUpdate' callback doesn't give the node that was dropped. Instead you are supposed to serialize the entire tree. awesome_nested_set makes it very easy to move just one node and that seems more efficient so you'll see a hack in the code below that constantly records the dropped node into a hash table on the 'onChange' event. That data is then sent to the server on the 'onUpdate' event.
      
      window._token = '#{form_authenticity_token}'; // Rails requires this token to validate forms so we'll need to pass it in the ajax request
      window._message_updates = new Hash;
      Sortable.create('message_tree', {tree:true,
                                          dropOnEmpty:true,
                                          scroll:window,
                                          constraint:false,
                                          onChange:function(element) {
                                            // this is a bit of a hack, but basically we just pull the message id from the id of the html element
                                            var child_id = element.id.replace('message_', '');
                                            var parent_id = element.up().id.replace('ul_message_', '');
                                            var previous = element.previous();
                                            var sibling_id = '';
                                            if(previous){
                                              var sibling_id = previous.id.replace('message_', '');
                                            }
                                            window._message_updates.set(child_id, [parent_id, sibling_id]);
                                          },
                                          onUpdate:function(element) {
                                            window._message_updates.each(function(pair) {
                                              var child_id = pair.key;
                                              var parent_id = pair.value[0];
                                              var sibling_id = pair.value[1];
                                              window._message_updates.unset(child_id);
                                              var url = '/messages/' + child_id + '.js?parent_id=' + parent_id + '&sibling_id=' + sibling_id;
                                              new Ajax.Request(url, {
                                                method: 'PUT',
                                                parameters: {
                                                  authenticity_token: window._token
                                                }
                                              });
                                            });
                                          }
                                          });
      </pre>
      
      Here is a link to the default script.aculo.us tree example
      http://script.aculo.us/playground/test/functional/sortable_tree_test.html
      
      I borrowed many of the ideas from there.  I'm sure there are a few bugs in this so if anyone tries out the code and has problems let me know and I'll make changes as needed.
      
    • Leave a Reply Cancel reply

      You must be logged in to post a comment.

      Recent Posts

      • Around and Back to WordPress
      • Last Lagoon (This Year)
      • Logan Sunset
      • Grami Del
      • FanX (and Lagoon)

      Recent Comments

      1. Around and Back to WordPress – Justin Ball on Gatsby 2.0 and Forestry
      2. More Stuff You Shouldn’t Hit on a Bike – Justin Ball on Why Cyclists Shave Their Legs. The Most Disgusting Post I Will Ever Make
      3. First Real Ride on the New Trek Madone 6.9 – Justin Ball on Rode Blacksmith Fork Canyon Tonight
      4. First ride up Black Smith Fork canyon this season – Justin Ball on Why Cyclists Shave Their Legs. The Most Disgusting Post I Will Ever Make
      5. How New Carpet and Rattlesnake turned me into a Consultant or What the Hell Happened? – Justin Ball on Why Cyclists Shave Their Legs. The Most Disgusting Post I Will Ever Make

      Archives

      • November 2021
      • October 2021
      • September 2021
      • January 2020
      • February 2018
      • January 2018
      • December 2017
      • November 2017
      • October 2017
      • February 2017
      • November 2016
      • September 2016
      • August 2016
      • May 2016
      • March 2016
      • February 2016
      • November 2015
      • September 2015
      • June 2015
      • May 2015
      • February 2015
      • January 2015
      • October 2014
      • September 2014
      • July 2014
      • June 2014
      • May 2014
      • April 2014
      • March 2014
      • February 2014
      • January 2014
      • December 2013
      • October 2013
      • September 2013
      • August 2013
      • June 2013
      • May 2013
      • April 2013
      • February 2013
      • January 2013
      • December 2012
      • October 2012
      • September 2012
      • June 2012
      • January 2012
      • December 2011
      • September 2011
      • August 2011
      • July 2011
      • June 2011
      • May 2011
      • March 2011
      • February 2011
      • January 2011
      • December 2010
      • November 2010
      • September 2010
      • August 2010
      • July 2010
      • June 2010
      • May 2010
      • March 2010
      • February 2010
      • January 2010
      • December 2009
      • November 2009
      • October 2009
      • September 2009
      • August 2009
      • July 2009
      • June 2009
      • May 2009
      • April 2009
      • March 2009
      • February 2009
      • January 2009
      • December 2008
      • November 2008
      • October 2008
      • September 2008
      • August 2008
      • July 2008
      • June 2008
      • May 2008
      • April 2008
      • March 2008
      • February 2008
      • January 2008
      • December 2007
      • November 2007
      • October 2007
      • September 2007
      • August 2007
      • July 2007
      • June 2007
      • May 2007
      • March 2007
      • February 2007
      • January 2007
      • December 2006
      • November 2006
      • October 2006
      • September 2006
      • August 2006
      • July 2006
      • June 2006
      • May 2006
      • April 2006
      • March 2006
      • December 2005
      • November 2005
      • October 2005
      • September 2005

      Categories

      • 2.3.2
      • 3g
      • 3tera
      • 420
      • 51weeks
      • 64bit
      • accessibility
      • ActionView::MissingTemplate
      • activemerchant
      • ActiveRecord
      • activesalesforce
      • acts as taggable
      • acts_as_facebook_user
      • acts_as_nested_set
      • acts_as_state_machine
      • advertising
      • Affiliate Marketing
      • air quality
      • ajax
      • Alyssa
      • ama
      • amazon
      • amazon s3
      • amazon wishlist
      • amazon.com
      • ancestry
      • animal cookies
      • antshares
      • apache
      • API
      • apis
      • apollo
      • apollo client
      • apple
      • Apple Store
      • Apple Time Capsule
      • application
      • applications
      • Art
      • ASP.Net
      • assert_sent_email
      • asyncronous processing
      • Atomic Jolt
      • Aubrey
      • Authentication
      • authorize.net
      • Autumn
      • babelphish
      • back problems
      • backbone.js
      • backup software
      • backups
      • bacon
      • Battlestar Galactica
      • big companies
      • birthday.
      • bitcoin
      • black cherry vanilla coke
      • Black Smith Fork Canyon
      • blockchain
      • blog
      • Blogging
      • bluehost
      • books
      • BoomStartup
      • bread
      • buddypress
      • bug
      • bugs
      • business
      • business. mother's animal cookies
      • cache county
      • cache valley
      • California
      • Cancun
      • canvas
      • capistrano
      • Catholic Church
      • cereal
      • chauvet obey 40
      • checkbox list
      • checkboxes
      • chess
      • Chicago
      • china
      • chocolate
      • Christmas
      • Chrome
      • church
      • Cinderella
      • Cisco
      • cloud computing
      • cms
      • code generation
      • code sprint
      • coke
      • Comcast
      • commerce
      • Common Lisp
      • communities
      • Community
      • complex
      • Computers
      • conference
      • conference software
      • configuration
      • consulting
      • cookies
      • cooking
      • COSL
      • cosmos
      • count
      • courts
      • cows
      • create
      • creative commons
      • cryptocurrencies
      • cryptography
      • css animations
      • cucumber
      • currency
      • Cycling
      • database
      • dataloader
      • date
      • death
      • death ray
      • debugging
      • decentralized applications
      • dell dimension 8400
      • democray
      • deployment
      • developing
      • development
      • Devin
      • diet
      • digg
      • Digital Ocean
      • digital-photography
      • disease
      • disguise
      • disgusting
      • disney
      • disneyland
      • DiSo
      • disposable
      • DMX
      • Docker
      • domain name
      • domains
      • doom
      • dr strangelove
      • driving
      • Dryers
      • DVI
      • ec2
      • economics
      • economy
      • ecto
      • edge rails
      • Education
      • EFF
      • Egypt
      • ElasticSearch
      • elastra
      • elections
      • elixir
      • email
      • Ember
      • Ember.js
      • encoding
      • energy
      • engine yard
      • engines testing
      • engineyard
      • enterprise
      • epp
      • error
      • errors
      • ethereum
      • Event Machine
      • expercom
      • facebook
      • failure
      • Family
      • family history
      • family reunion
      • family search
      • family trip
      • Family Vacation
      • familysearch
      • familysearch.org
      • farmers market
      • fashion
      • fences
      • field trip
      • file uploads
      • Firebase
      • fireeagle
      • fix
      • flat tax
      • flowers
      • folksonomy
      • food
      • France iPad Internet access
      • free book
      • freedom
      • friendfeed
      • friends
      • fuel
      • Fun Stuff
      • funeral
      • Funny
      • funny kids
      • gadgets
      • galleries
      • gamenight
      • garden
      • gardens
      • garter snake
      • gatsby
      • gatsbyjs
      • gearsynper
      • geek
      • gelatin
      • gem
      • gems
      • gems ruby on rails
      • genealogy
      • genius
      • geocaching
      • geotagging
      • girl's camp
      • gistr
      • git
      • github
      • global
      • gmail
      • godaddy
      • Goliath
      • Google
      • google bomb
      • google docs
      • google hacks
      • Gorden B Hinckley
      • government
      • gps
      • grand master
      • grand-teton-national-park
      • graph ql
      • graphcool
      • graphql
      • graphqlsummit
      • great firewall
      • grocery
      • gross
      • group work
      • HABTM
      • Hacks
      • halloween
      • happy
      • has and belongs to many
      • has_many
      • hashgraph
      • Hawaii
      • health
      • health insurance
      • heirachy
      • Heirarchies
      • helps
      • Heroku
      • Holiday
      • home building
      • home improvement
      • home plans
      • homebrew
      • homework
      • hosting
      • house plans
      • House Stuff
      • housing
      • human rights
      • hyperledger
      • i18n
      • ice cream
      • icls2008
      • idaho
      • ideas
      • identity
      • identity_theft
      • iiw2006b
      • image
      • image processing
      • inbox
      • induglences
      • insane
      • inspiration
      • install
      • Instructure
      • Interesting
      • internet
      • Internet Explorer
      • InvalidAuthenticityToken
      • iPhone
      • jackson-hole
      • jamis buck
      • Javascript
      • JavaScript (Programming Language)
      • Javscript
      • Jenna
      • jeweler
      • jobs
      • joyent
      • jQuery
      • jungle disk
      • jurlp
      • justin ball
      • kids
      • knowledge workers
      • lambad
      • laptop case
      • launchup.org
      • lds
      • LDS church
      • learning
      • legal
      • Lego
      • legos
      • leopard
      • lesson
      • Levi Leipheimer
      • Liahona
      • library
      • life
      • lifestream
      • Links
      • litecoin
      • LMS
      • loans
      • localization
      • logan
      • Logan Canyon
      • logistics
      • logitech
      • LTI
      • lucene
      • lucene.net
      • Lucifer
      • luvfoo
      • mac
      • Mac OSX 10.6
      • Mac Ports
      • macbook
      • macbook pro
      • Maker
      • Maker Faire
      • manage
      • marginal changes
      • marion
      • marriage
      • Matt Mullenweg
      • me
      • medicine
      • Meetings
      • merb
      • Mexico
      • micro-blogging
      • microcontent
      • microformats
      • Microsoft
      • Middle East
      • migrations
      • mom
      • money
      • Monitor
      • morph
      • morph exchange
      • morphexchange
      • mortgage
      • mosso
      • motorcycle
      • mountain biking
      • Mountain West Javascript
      • Mountain West Ruby
      • mountain west ruby conference
      • mountainwestrubyconf
      • mozy
      • MRI
      • mtnwestrubyconf
      • muck
      • multi-user
      • music
      • mwjs
      • mwrc
      • mysql
      • mysql gem
      • MYTecC
      • Neat Stuff
      • neighbors
      • newgem
      • No Programming
      • node.js
      • nuclear weapons
      • nutcracker
      • Oahu
      • Oauth
      • oauth-plugin
      • Obama
      • Obie Fernandez
      • OER
      • OER Glue
      • olympic torch
      • olympics
      • omniauth
      • Open Assessments
      • open source
      • OpenContent
      • opened2007
      • OpenID
      • opensocial
      • optimism
      • ordered tree
      • oreos
      • osx
      • outdoors
      • outsourcing
      • ozmozr
      • pain
      • panasonic plasma
      • Paris
      • password recovery
      • payday lenders
      • paypal
      • pety
      • PGP
      • Phil Windley
      • photography
      • photoJAR
      • photos
      • php
      • pickle soup
      • pickup
      • piclens
      • Pictures
      • plasma tv
      • Playa Del Carmen
      • plugin
      • plugins
      • poinsettia
      • Political
      • politics
      • portablecontacts
      • PostGreSQL
      • PostGresSQL
      • poverty
      • privacy
      • problems
      • product: web
      • professional
      • Programming
      • Projects
      • prophet
      • protect_from_forgery
      • protests
      • prototype
      • psych
      • psychology
      • queue
      • rails
      • rails 2.0
      • rails conference
      • Rails I18n Textmate bundle
      • RailsConf
      • RailsConf07
      • rake
      • rant
      • react
      • react router
      • React.js
      • Reactive
      • reactjs
      • reactrouter
      • realestate
      • recipe
      • recommender
      • records
      • red green
      • redirect_to
      • regular expressions
      • relay
      • religion
      • render
      • replace
      • reputation
      • require.js
      • research
      • REST
      • restaurant
      • rFacebook
      • ridiculous
      • rightscale
      • ringside networks
      • river
      • river trail
      • robots
      • romantic
      • roomba
      • rpsec
      • rspec
      • rspec bundle
      • rss
      • ruby
      • Ruby On Rails
      • Ruby On Railst
      • ruby_on_rails
      • rvm
      • s3
      • sad
      • Salesforce
      • samsung ml1740
      • sarah sample
      • scalability
      • School
      • Science
      • scorm
      • scream
      • script.aculo.us
      • SDK
      • search
      • senate
      • SEO
      • serverless
      • servers
      • sessions
      • shopping
      • shortcodes
      • shoulda
      • sign language
      • simple
      • small business
      • snakes
      • Snelgrove
      • social graph
      • social media
      • social network dilution
      • social networking
      • social search
      • Social Software
      • socialsoftware
      • society2.0
      • soda
      • software
      • software design
      • Software Development
      • solidity
      • solo
      • soviet union
      • sovrin
      • sql
      • sql server
      • SQL Server 2005 Express
      • sql server 2008 express
      • starling
      • start ups
      • startups
      • starvation
      • stm bags
      • stm medium alley
      • storage
      • subversion
      • target
      • tax
      • Teachers Without Borders
      • tech
      • teeth whitening
      • template not foudn
      • templates
      • test-spec
      • testing
      • tests
      • textmate
      • thanksgiving point
      • The Japanese Mafia is controlling the weather
      • The Kids
      • The Plan Collection
      • The Web
      • theming skin
      • theplancollection
      • theplancollection.com
      • time
      • timr
      • tips
      • to_json
      • tools
      • Tour de France
      • transfer
      • translations
      • Travel
      • Travel, Disneyland, LA
      • trees
      • trip
      • truffles
      • tutorial
      • tutorials
      • tv
      • twitter
      • Uncategorized
      • uninsured
      • universe
      • unpack
      • unread
      • upgrades
      • uploader
      • uploads
      • user discovery
      • user interface
      • userfly
      • utah
      • utah government
      • utah senate
      • utf8
      • Vacation
      • values
      • vinegar
      • virtual hosts
      • walmart
      • warranty
      • Waste of Time
      • weather
      • Web
      • web design
      • web development
      • Web RTC
      • Web2.0
      • web2con2006
      • webservices
      • weddings
      • Wesley Connell
      • whereigo
      • wife
      • windows
      • Wired
      • wishlist
      • with
      • word press
      • Wordpress
      • work
      • workling
      • wpmu
      • xml
      • yeast
      • yellowstone
      • zentest
      ©2023 Justin Ball | Powered by SuperbThemes & WordPress