simple_form - 중첩 된 입력 텍스트 상자가있는 라디오 단추를 만드는 방법

Question

simple_form을 사용하여 양식을 렌더링하고 다음과 같은 동작을 얻으려고합니다. 클라이언트가 3 가지 옵션 중에서 선택하도록합니다. 모든 옵션에서 추가 필드를 제공합니다.
그래서 나는이 같은 싶습니다 다음과 같이

Please set your preferences: 
o Pay me on a specific day - [input field to get the day] 
o Pay me a specific amount of money - [input field for the amount] 
o Pay me on a regular basis - [radio buttons to choose between weekly/monthly basis] 

내가 라디오 버튼을 만들 수 있지만 아래에 중첩 된 필드를 추가 할 수 없습니다

<%= simple_form_for @client, action: 'edit_payment_method' do |f| %> 
    <%= f.input :payment_type, label: 'Please set your preferences:', 
     collection: [ ['Pay me on a specific day', :specific_day], 
     ['Pay me a specific amount of money', :specific_money], 
     ['Pay me on a regular basis', :regular_basis] 
    ], as: :radio_buttons %> 

    <%= f.button :submit, 'Submit' %> 
<% end %> 

은 무엇 최선의 방법이 될 것입니다 중첩 된 텍스트 상자를 만들려면 어떻게해야합니까?
필자는 필드를 다른 컨트롤러 (pay_type_type)로 보낼 필요가 없습니다. 모든 메소드를 하나의 메소드로 보내고 그가 선택한 지불 유형에 따라 관련 값을 읽는다면 괜찮습니다.

감사합니다. Zach

Answer 1

OK .. 나는 이것을 어떻게 든 해결할 수 있었지만 그것이 최선의 대안인지 확신 할 수 없었지만, 누군가 그것을 필요로한다면 적어도 시작해야 할 것이있다.

단순형을 사용하여 "일반"양식을 만든 다음 JQuery를 사용하여 라디오 버튼 옆에있는 내부 입력 필드 (규칙적으로 생성 된)를 이동했습니다.

은 레일 응용 프로그램에 JQuery와 지원을 추가

• 이 Gemfile
• bundle install
• rails generate jquery:install

에 내가 사용했던 양식 (일반 simpleform를) gem "jquery-rails" 추가 :

입력란에 첨부 된 라디오 단추 및 ID에 연결된 클래스를 확인하십시오. 나중에 요소를 이동하는 데 사용하겠습니다. 같은 페이지에서

<%= simple_form_for @client, url: 'update_payment_data' do |f| %> 
    <%= f.input :payment_type, label: t('account.update_payment_method.title'), 
      input_html: { class: 'payment_method_options' }, 
      collection: [ [t('account.update_payment_method.sum_based.title'), :amount], 
         [t('account.update_payment_method.days_in_month_based.title'), :days_in_month], 
         [t('account.update_payment_method.optout.title'), :optput] 
      ], as: :radio_buttons %> 
    <%= f.input :payment_amount, label: "Payment amount threshold", 
      input_html: { id: 'payment_amount_box' } %> 
    <%= f.input :payment_days_in_month, label: "Payment days in month", 
      input_html: { id: 'payment_days_in_month_box' } %> 
    <%= f.button :submit, t('account.update_payment_method.update') %> 
<% end %> 

- JQuery와 코드 :

<script> 
    $(document).ready(function() { 
     var amount_box = $("#payment_amount_box"); 
     var amount_box_parent = amount_box.parent(); 
     amount_box.detach().appendTo($(".payment_method_options:eq(0)").parent()); 
     amount_box_parent.remove(); 

     var dim_box = $("#payment_days_in_month_box"); 
     var dim_box_parent = dim_box.parent(); 
     dim_box.detach().appendTo($(".payment_method_options:eq(2)").parent()); 
     dim_box_parent.remove(); 

    }); 
</script> 

나는 꽤 단정 생각, 그냥 (ID로) 내부 입력 필드가 될 것입니다 무엇을 찾습니다 각 라디오 버튼에 대해 simpleform이 생성되는 span 아래의 적절한 위치로 이동합니다.
내가 원했던 것처럼 보이게하려면 CSS를 약간 연주해야했지만 (예 : display:block) 그게 더 많거나 적습니다.

는 simple_form collection_radio_buttons 당신이 원하는 것을 가능성이 자크

Answer 2

.. 희망이 도움이. 옵션 매개 변수는 각 라디오 버튼으로 렌더링되는 것을 사용자 정의 할 수있는 블록을 허용합니다. rdocs here의 예제를 살펴보십시오.

편집 : 여기

당신이 상대적으로 일반적인 방법으로 할 필요가 (테스트되지 않았습니다,하지만 비슷한 실행 해요) 기본적으로 무엇이다. 각 라디오 버튼에 대한 부분에 추가 컨트롤을 넣어 : 당신의 부분이 필요하지 않는 경우가 :locals과 함께 추가 제어를 필요로하지 않는 라디오 버튼에 대한 :partial를 생략 할 수 있습니다

<% radio_buttons = [ 
     { :text => 'Pay me on a specific day', :value => :specific_day, :partial => "<textbox_partial_name>", :locals => { :any_locals => :your_partial_needs} }, 
     { :text => 'Pay me a specific amount of money', :value => :specific_money, :partial => "<textbox_partial_name>", :locals => { :any_locals => :your_partial_needs} }, 
     { :text => 'Pay me on a regular basis', :value => :regular_basis, :partial => "<radio_partial_name>", :locals => { :any_locals => :your_partial_needs} }, 
    ] %> 

<%= simple_form_for @client, action: 'edit_payment_method' do |f| %> 
    <%= f.label t("account.update_payment_method.title") %> 
    <% f.collection_radio_buttons :payment_type, (collection.collect do |r| [r[:text], r[:value], r[:partial].nil? ? "" : r[:partial], r[:locals].nil? ? {} : r[:locals]] end), :second, :first do |builder| %> 
    <%= builder.label{builder.radio_button(:class => 'payment_method_options') + builder.text} %> 
    <% unless builder.object[2].blank? %> 
     <%= render :partial => builder.object[2], :locals => builder.object[3] %> 
    <% end %> 
    <% end %> 
    <%= f.button :submit, 'Submit' %> 
<% end %> 

. 상황에 따라이 코드를 단순화하는 방법도 있지만이 예제에서는 필요한 경우 각 라디오 단추에보다 복잡한 컨트롤 구조를 추가하는 방법을 보여줍니다.