Use AJAX to update answers in place.

So we don't have to refresh the page.

Also disabled the form until both questions are answered, so I wouldn't
have to handle validation errors.

https://www.pivotaltracker.com/story/show/27396213

app/controllers/answers_controller.rb

@@ -28,8 +28,14 @@ def update
     else
       flash.notice = 'All fields are required for your answer'
     end
-    redirect_to :back
+
+    if request.xhr?
+      render :partial => 'assessments/assessment_question',
+        :locals => {:answer => @answer}
+    else
+      redirect_to :back
+    end
   end
 
 
-end
+end

app/views/assessments/_assessment_question.html.erb

@@ -27,7 +27,7 @@
   </div>
   <h3 class="prompt plain"><%= answer.question_description %></h3>
   <div class="answer <%= dom_id(answer) %>" style="display:none;">
-    <%= form_for answer do |a| %>
+    <%= form_for answer, :remote => true, :html => {:'data-type' => 'html'} do |a| %>
     <table>
       <tr>
         <td>

public/javascripts/artsready.js

@@ -149,22 +149,20 @@ $('a.does-not-apply').live('click', function() {
 	question.find('.answers').html("<a href='#' class='button weak reconsider'>reconsider</a>");
 });
 
-$('.button.save-response').live('click', function() {
-	var question     = $(this).parents('.question');
-	var response     = question.find('.response');
-	var preparedness = $(this).prev().find('input:radio[name=preparedness]:checked').val();
-	var priority     = $(this).prev().find('input:radio[name=priority]:checked').val();
-	var answers      = priority + '<br />' + preparedness;
-	var na_link      = question.find('.does-not-apply');
-
-	if ((typeof priority != 'undefined') && (typeof preparedness != 'undefined')) {
-		question.addClass('answered');
-		response.addClass('answered');
-		response.find('.respond').hide();
-		response.find('.answers').html(answers);
-		toggleQuestion(this);
-		na_link.hide();
-	}
+$(function() {
+  $('form.edit_answer').live('ajax:complete',
+    function(event, xhr) {
+      $(this).closest('.question').replaceWith(xhr.responseText);
+    }
+  ).find('input[type=radio]').live('change',
+    function(event) {
+      var $form = $(this).closest('form');
+      $form.find('input[type=submit]').attr('disabled',
+        $form.find('input[type=radio]:checked').length < 2);
+    }
+  ).end().each(function() {
+    $(this).find('input[type=radio]:first').change();
+  });
 });
 
 function toggleQuestion(button) {

public/stylesheets/style.css

@@ -994,6 +994,8 @@ tbody tr:hover td {
   box-shadow: 0 1px 1px 1px rgba(255, 255, 255, 0.25) inset;
   -moz-box-shadow: 0 1px 1px 1px rgba(255, 255, 255, 0.25) inset;
   -webkit-box-shadow: 0 1px 1px 1px rgba(255, 255, 255, 0.25) inset; }
+  .button:disabled, a.button:disabled, input[type="submit"]:disabled {
+    opacity: 0.3; }
 
 .button.weak, a.button.weak, input[type="submit"].weak {
   background: #999;

public/stylesheets/style.scss

@@ -1024,7 +1024,11 @@ tbody {
   background-image: -moz-linear-gradient(center top, rgba(255, 255, 255, 0.25), #c31d29);
   box-shadow: 0 1px 1px 1px rgba(255, 255, 255, 0.25) inset;
   -moz-box-shadow: 0 1px 1px 1px rgba(255, 255, 255, 0.25) inset;
-  -webkit-box-shadow: 0 1px 1px 1px rgba(255, 255, 255, 0.25) inset; }
+  -webkit-box-shadow: 0 1px 1px 1px rgba(255, 255, 255, 0.25) inset;
+  &:disabled {
+    opacity: 0.3;
+  }
+}
 
 .button.weak, a.button.weak, input[type="submit"].weak {
   background: #999;

spec/controllers/answers_controller_spec.rb

@@ -0,0 +1,18 @@
+require 'spec_helper'
+
+describe AnswersController do
+  describe 'update' do
+    let(:answer) { Factory.create(:answer) }
+    let(:answer_params) { {} }
+    before do
+      controller.stubs :authenticate!
+      controller.stub(:current_org).and_return(answer.assessment.organization)
+
+      xhr :put, :update, :id => answer, :answer => answer_params
+    end
+
+    it { 
+      should render_template(:partial => 'assessments/_assessment_question')
+    }
+  end
+end