Permalink
Browse files

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
  • Loading branch information...
1 parent c7e5d7e commit dc83b3ea490b28f3b6154820fe7d173e82c62dfc @eostrom eostrom committed Apr 5, 2012
@@ -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
@@ -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>
@@ -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) {
@@ -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;
@@ -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;
@@ -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

0 comments on commit dc83b3e

Please sign in to comment.