更改表單多個部分

Question

我正在關注嵌套表單上的this railscast以創建類似的應用程序。

在瑞安的應用程序，他有如下的結構：

1. 調查---> 2.問題---> 3.答案

所以用戶可以創建一個調查，並添加/刪除問題，並提供可添加/刪除的相應答案。

我試圖做一點不同。我有：

1. 調查---> 2.問題---> 3.答案或評論

我的應用程序，用戶已經創建了一個問題之後，用戶可以創建一個答案（就像Ryan的應用程序一樣）。但每個答案旁都有一個選擇框，默認爲「答案」，另一個爲「評論」。我試圖獲得Ryan的應用程序基本相同的功能，但有兩個表：評論表和答案表。

我的代碼模仿railscast，除了我answer_fields部分看起來像：

<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> 

，我有一個comment_fields部分看起來像：

<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> 

我question.rb模式是這樣的：

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 

我一直在努力解決這個問題，而且我被卡住了。我的jQuery不僅看起來像這樣至今：

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 

基本上，我需要一種方法來的onChange，部分所選答案/評論。

Answer 1

首先，您必須將兩個部分（answer_fields和comments_fields）與表單一起呈現。

在comments_partial與泛音與CoffeeScript的<fieldset style="display:none">

變化知名度更換<fieldset>：

$('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() 

我一件事情做的伎倆。

我只清除輸入字段，但必須有所有的人，以防止保存德隱藏的元素（如說hraynaud）

Answer 2

我還沒有測試過這個，但也許你想用dependent-fields-rails。根據選擇框的狀態，您可以顯示評論框或答案框。

GitHub的網頁上給出的例子（使用簡單的形式，但你可以在同一個適用於您的form_for）：

= simple_form_for(@filing) do 
    = f.input :registration_office, collection: ['habm', 'dpma'] 

    .js-dependent-fields[data-select-id='filing_registration_office' data-option-value='habm'] 
     = f.input :language, collection: ['english', 'german'] 

那我猜你使用fields_for滿足例如您的has_many關係：

f.select :switch_answer_table, collection: ['answer', 'comment'] 
    .js-dependent-fields[data-select-id='question_switch_answer_table' data-option-value='answer'] 
     f.fields_for :answers do |abuilder| 
     ... 
    .js-dependent-fields[data-select-id='question_switch_answer_table' data-option-value='comment'] 
     f.fields_for :comments do |cbuilder| 
     ... 

再次，沒有測試和最好的猜測，但它有希望推動你走向正確的方向。

Answer 3

亞歷babio是正確的。渲染這兩個部分。給他們中的一個顯示風格：無，然後在coffescipt onchange處理程序中切換類。在用戶開始輸入答案然後切換到評論的情況下，您還需要清除與新隱藏字段相關聯的字段，否則在提交時您可能同時提交評論和答案。

Answer 4

部分字段由link_to_add_fields輔助方法生成爲數據屬性。然後js獲取數據對象並呈現它。考慮以下（這是未經測試，但應該是一個很好的指導）：

1. 最簡單的方法是將有單獨的「添加應答」和「添加評論」鏈接，配有獨立的輔助方法，或
2. 允許用戶在單擊要添加的鏈接之前選擇「應答」或「評論」，並將每個不同的部分作爲不同的數據屬性。例如

_form.html.erb

<select id="response_type_select_field"> 
    <option value="comment">Comment</option> 
    <option value="answer">Answer</option> 
</select> 

<%= link_to_add_reply_fields "Add Reply", f, :answers, :comments %> 

surveys_helper.rb

module SurveysHelper 
    def link_to_add_reply_fields(name, f, association_1, association_2) 
    object_1 = f.object.send(association_1).klass.new 
    object_1_id = object_1.object_id 
    object_1_fields = f.fields_for(association_1, object_1, child_index: object_1_id) do |builder| 
     render(association_1.to_s.singularize + "_fields", f: builder) 
    end 

    object_2 = f.object.send(association_2).klass.new 
    object_2_id = object_2.object_id 
    object_2_fields = f.fields_for(association_2, object_2, child_index: object_2_id) do |builder| 
     render(association_2.to_s.singularize + "_fields", f: builder) 
    end 

    link_to(name, '#', class: "add_reply_fields", data: {id_1: object_1_id, id_2: object_2_id, object_1_fields: object_1_fields.gsub("\n", ""), object_2_fields: object_2_fields.gsub("\n", "")}) 
    end 
end 

咖啡腳本：

jQuery -> 
    $('form').on 'click', '.add_reply_fields', (event) -> 
    time = new Date().getTime() 
    reply_type = $("#response_type_select_field option:selected").val() 

    if reply_type is 'answer' 
     data_attribute = 'object_1_fields' 
     regexp = new RegExp($(this).data('id_1'), 'g') 
    else if reply_type is 'comment' 
     data_attribute = 'object_2_fields' 
     regexp = new RegExp($(this).data('id_2'), 'g') 

    $(this).before($(this).data(data_attribute).replace(regexp, time)) 
    event.preventDefault()