2016-03-26 22 views
0

私がしたいのは、link_to_add( "Add day"ボタン)をクリックしたときに値index + 1を表示することです。Railsでlink_to_addを使って値をインクリメントする方法

edit.html.erb

<div class="row"> 
    <div class="col-md-12"> 
    <%= simple_nested_form_for(@schedule) do |f| %> 
     <%= render 'schedule_form', f: f %> 
     <%= f.link_to_add "Add day", :rooms, data: {target: '#room'}, class: "btn btn-primary" %> 
     <%= f.submit "Edit my schedule", class: "btn btn-primary" %> 
    <% end %> 
    </div> 
</div> 

_schedule_form_html.erb

<%= f.label :title %> 
<%= f.text_field :title, class: 'form-control' %> 
<div id="room"> 
    <%= f.simple_fields_for :rooms do |a| %> 
    <p><b>Day&nbsp;<%= a.index.to_i + 1 %></b></p> 
    <%= a.input :room %> 
    <% end %> 
</div> 

私はDay 1が常に表示され、link_to_addをクリックします。

link_to_addをクリックするとインデックスを増やすことはできますか? または、私に別の解決策を与えることができれば幸いです。

SOLVED!

edit.html.erb

JavaScriptを追加します。

<div class="row"> 
    <div class="col-md-12"> 
    <%= simple_nested_form_for(@schedule) do |f| %> 
     <%= render 'schedule_form', f: f %> 
     <%= f.link_to_add "Add day", :rooms, data: {target: '#room'}, class: "btn btn-primary" %> 
     <%= f.submit "Edit my schedule", class: "btn btn-primary" %> 
    <% end %> 
    <script type="text/javascript"> 
     $(document).on('nested:fieldAdded', function() { 
     var count = $('.day-number-element-selector').length; 
     //alert(count) 
     $('.day-number-element-selector').last().html(count).prepend("Day ").wrap("<b></b>"); 
     }); 
    </script> 
    </div> 
</div> 

_schedule_form_html.erb

クラス= "日数要素セレクタ" を追加します。

<%= f.label :title %> 
<%= f.text_field :title, class: 'form-control' %> 
<div id="room"> 
    <%= f.simple_fields_for :rooms do |a| %> 
    <p class="day-number-element-selector"><b>Day&nbsp;<%= a.index.to_i + 1 %></b></p> 
    <%= a.input :room %> 
    <% end %> 
</div> 

答えて

1

ネストされたフォームでは、data-targetで指定された要素の青写真を送信し、残りはクライアントによって処理されます。オブジェクトを追加または削除するたびにトリガーされる便利なイベントがtheseです。だから、あなたはこのような何かをjavacriptを使用することができます:

$(document).on('nested:fieldAdded', function() { 
    count = $('day-number-element-selector').length; 
    $('day-number-element-selector').last().html(count); 
}); 
+0

@Petr Gazarov、ありがとうございました。できます!私は自分の質問の一番下に行ったことを加えます。 – SamuraiBlue

関連する問題