Skip to content

Instantly share code, notes, and snippets.

@h-sakano
Last active October 11, 2017 14:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save h-sakano/a4d28422014d7f43f7524df228bc4036 to your computer and use it in GitHub Desktop.
Save h-sakano/a4d28422014d7f43f7524df228bc4036 to your computer and use it in GitHub Desktop.
nested_form + bootstrapでネストしたモデルの入力フォームをタブ表示する ref: http://qiita.com/h-sakano/items/3f7c253b461aa9cfc7ab
<%= bootstrap_nested_form_for(@model_a, layout: :horizontal, label_col: "col-xs-2", control_col: "col-xs-10") do |f| %>
<%= f.text_field :column_a, label: "カラムA" %>
<%= f.text_field :column_b, label: "カラムB" %>
.
.
.
<ul class="nav nav-tabs" role="tablist" id="model-b-tab-list">
</ul>
<div class="tab-content" id="model-b-tab-contents">
<%= f.fields_for :nested_model_tables, wrapper: false do |nf| %>
<div class="tab-pane fields" role="tabpanel">
<%= nf.text_field :column_a, label: "カラムA" %>
<%= nf.text_field :column_b, label: "カラムB" %>
.
.
.
</div>
<!-- link_to_addを呼び出したいだけで、出力結果は使用しないので、<%= %>ではなくて<% %>で囲む。 -->
<% f.link_to_add "タブ追加", :part_number_sequences, data: { target: "#model-b-tab-contents" } %>
<% end %>
</div>
<% end %>
$ ->
$(document).on 'ready', ->
nested_form_tab('model-b-tab-list', 'model-b-tab-contents', 'タブ', '<i class="glyphicon glyphicon-plus"></i>', 'nested_model_tables')
$("#model-b-tab-contents").children('div').first().addClass('active')
$(document).on 'nested:fieldAdded:nested_model_tables', (event) ->
nested_form_tab('model-b-tab-list', 'model-b-tab-contents', 'タブ', '<i class="glyphicon glyphicon-plus"></i>', 'nested_model_tables')
$("#model-b-tab-contents").children('div').removeClass('active')
event.field.addClass('active')
nested_form_tab = (target_ul_id, target_div_id, tab_name_prefix, add_tab_name, assoc) ->
$("##{target_ul_id}").empty()
for value, index in $("##{target_div_id}").children('div')
$(value).attr('id', "#{target_div_id}-#{index + 1}")
$("##{target_ul_id}").append($("<li role='presentation'><a aria-controls='#{target_div_id}-#{index + 1}' href='##{target_div_id}-#{index + 1}' data-toggle='tab' role='tab'>#{tab_name_prefix}#{index + 1}</a></li>"))
$("##{target_ul_id}").append($("<li role='presentation'><a data-target='##{target_div_id}' class='add_nested_fields' data-association='#{assoc}' data-blueprint-id='#{assoc}_fields_blueprint' href='javascript:void(0)'>#{add_tab_name}</a></li>"))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment