Real Time In Place Editing For Rails - blogpost

application.html.erb

<script src="http://your-juggernaut-app.herokuapp.com/application.js" type="text/javascript" charset="utf-8"></script>

application.rb

config.active_record.observers = :user_observer

show.html.erb

<script type="text/javascript">
	//setup juggernaut to handle real time updating page changes
	var jug = new Juggernaut({
		secure: false,
		host: 'your-juggernaut-app.herokuapp.com',
		port: 80,
		transports: ['xhr-polling','jsonp-polling']
	});

	//subscribe to the url for the specific user, this is the same url we published to from the model observer
	jug.subscribe("/observer/user/<%= @user.id %>", function(data){
		//set the updated_text with an error message first - will override if a better result
		var updated_text = "There was an update, but a problem displaying. Please refresh.";
		jQuery.each(data.record, function(i, val) {
			//the updated_at of the record is always returned, we just skip it here since it's not important
			if (i != "updated_at"){
				//set the updated_text to the update vaule - this is for simple text areas and fields
				updated_text = val[1];
				//if we updated a collection via dropdown, we need to do some more work
				if ($("#best_in_place_user_<%= @user.id %>_"+i).attr("data-collection") !== undefined) {
					//grab the data values from the best in place dropdown
					var brand = $('#best_in_place_user_<%= @user.id %>_'+i).attr("data-collection");
					var test = $.parseJSON(brand);
					$.each(test, function(index, value) {
						//loop on the json looking for a match
						if(value[0] == val[1]){
							//update the text from the dropdown value
							updated_text = value[1];
						}
					});
				}
				//highlight the changed field and update the text with the value from juggernaut - all users viewing the page will see this
				$('#best_in_place_user_<%= @user.id %>_'+i).css("background-color","#c7f464").html(updated_text).delay(1500).animate({backgroundColor: "#f5f5f5"}, 1000 );
			}
		});
	});
</script>

user_observer.rb

require "juggernaut"
class UserObserver < ActiveRecord::Observer
  
  def after_update(user)
      publish(:update, user)
  end
  
  def publish(type, user)
    Juggernaut.url = ENV['JUGG_URL']
    Juggernaut.publish("/observer/user/#{user.id}", {
      :id     => user.id, 
      :type   => type, 
      :klass  => user.class.name,
      :record => user.changes
    })
  end
  
end