Change form multiple partials

Question

I'm following this railscast on nested forms to create a similar application.

In Ryan's application he has a structure like:

1. Surveys ---> 2. Questions ---> 3. Answers

So a user can create a survey and add/delete questions, with corresponding answers that they can add/delete.

I'm trying to do it a little differently. I have:

1. Surveys ---> 2. Questions ---> 3. Answers Or Comment

For my application, after a user has created a question, the user can create an answer (just like Ryan's app). But there is a select box next to each answer, with the default being "Answer" and the other being "Comment". I'm trying to get basically the same functionality of Ryan's app, but with two tables: comments table and answers table.

My code mimics the railscast, except for my answer_fields partial looks like:

<fieldset>
   <%= f.label :content, "Answer" %>
   <%= f.select :switch_answer_table options_for_select(["Answer", "Comment"]), class: "change-type" %>
   <%= f.text_field :content %>
   <%= f.check_box :_destroy %>
   <%= f.label :_destroy, "remove" %>
</fieldset>

and I have a comment_fields partial that looks like:

<fieldset>
   <%= f.label :content, "Comment" %>
   <%= f.select :switch_answer_table options_for_select(["Comment", "Answer"]), class: "change-type" %>
   <%= f.text_field :comment_content %>
   ... (leaving out some stuff) ...
   <%= f.check_box :_destroy %>
   <%= f.label :_destroy, "remove" %>
</fieldset>

My question.rb model looks like:

class Question < ActiveRecord::Base
  belongs_to :survey
  has_many :answers
  has_many :comments
  accepts_nested_attributes_for :answers, allow_destroy: true
  accepts_nested_attributes_for :comments, allow_destroy: true
end

I've been working on this, and I'm stuck. My jQuery only looks like this so far:

jQuery ->
   $('form').on 'click', '.remove_fields', (event) ->
     $(this).prev('input[type=hidden]').val('1')
     $(this).closest('fieldset').hide()
     event.preventDefault()

   $('form').on 'click', '.add_fields', (event) ->
     time = new Date().getTime()
     regexp = new RegExp($(this).data('id'), 'g')
     $(this).before($(this).data('fields').replace(regexp, time))
     event.preventDefault()

   $('form').on 'change', '.change-type', (event) ->
     # Confused on how to change partials

Basically, I need a way to onChange, the partial for the selected answer/comment.

Answer 1

alejandro babio is correct. render both partials. give one of them a style of display:none and then toggle the class in your coffescipt onchange handler. In the case that a user starts to type an answer and then switches to a comment you'll also want to clear the fields associated with the newly hidden fields otherwise on submit you could have both comment and answer submitted.

Answer 2

First at all, you must render both partials (answer_fields and comments_fields) with the form.

At the comments_partial replace <fieldset> with <fieldset style="display:none">

Change visibility of partials with coffeescript:

$('form').on 'change', '.change-type', (event) ->
  $('.change-type').each ->
    $(@).closest('fieldset').each ->
      if $(@).is(':visible')
        $(@).find('input').val('')           # reset all filels to empty values
      $(@).toggle()

I thing that do the trick.

I clear only input fields, but there must be all of them to prevent save de hidden element (like says hraynaud)