nested_formで下じゃなくて上に要素を追加したい場合

neste_formは可変なサイズの子要素を動的に追加できるGemです。

nested form

いつも大変お世話になっておりますが、今回の案件で追加する先を指定したエレメントの下ではなく上に追加しなければいけなくなり対応しました。

バージョンは

Gemfile.lock
1

nested_form (0.3.2)

での作業となります。

ますnested_formで使われるjsを眺めるとそんなに長くない処理であることがわかります。
その中で追加ボタンを押したときに要素を追加する部分はこの辺りになるようです。

jquery_nested_form:55行目あたり
1
2
3
4
5
6
7
8

insertFields: function(content, assoc, link) {
  var target = $(link).data('target');
  if (target) {
    return $(content).appendTo($(target));
  } else {
    return $(content).insertBefore(link);
  }
},

ここを上書きします。
application.jsで//= require jquery_nested_formの後に以下の処理を書いて上書きしちゃいましよう。

1
2
3
4
5
6
7
8
9
10
11
12

window.NestedFormEvents.prototype.insertFields = function(content, assoc, link) {
  var target = $(link).data('target');
  if ($(link).data('prepend')){
    return $(target).prepend($(content));
  }else{
    if (target) {
      return $(content).appendTo($(target));
    } else {
      return $(content).insertBefore(link);
    }
  }
}

linkのdata-prepend=trueで対象の要素の上にprependで追加されるイメージです。

1
2
3
4
5
6
7
8
9

<table id="tasks">
  <%= f.fields_for :tasks, :wrapper => false do |task_form| %>
    <tr class="fields">
      <td><%= task_form.text_field :name %></td>
      <td><%= task_form.link_to_remove "Remove this task" %></td>
    </tr>
  <% end %>
</table>
<p><%= f.link_to_add "Add a task", :tasks, :data => { :target => "#tasks", :prepend => true } %></p>

簡単でした。

Comments