rails cocoonの追加されたフォームの配列番号がおかしい件について

Question

環境：ruby on rails6

gem: cocoon

現在、cocoonにて複数テーブルの保存をしようとしているのですが、cocoonで追加されたフォームが変な配列番号が入ってしまうのでどうやったら修正できるのか。

<ActionController::Parameters {"0"=><ActionController::Parameters {"big_category_id"=>"7", "small_category_id"=>["19", "20", "37"]} permitted: false>, "1591607240334"=>{"big_category_id"=>"11", "small_category_id"=>["19", "20", "26"]}} permitted: false>
``````1591607240334```の部分を１とかにするやり方はありませんか？追加されるフォームでそれぞれランダムな数字になってしまうので追加されたフォームは1,2,3...と続けて作られるようにしたいです。

```View
<%= f.fields_for :categories_items do |q| %>
  <%= render 'categories_items_fields', f: q %>
<% end %>
<div class = "links">
  <%= link_to_add_association 'add new', f, :categories_items, :partial => 'categories_items_fields', :force_non_association_create => true %>
</div>

<li class="string input optional stringish" id="item_category_input">
  <%= f.label :カテゴリー %>
  <div>
    <%= f.collection_select(:big_category_id, Category.where(genre_div: 0), :id, :name, include_blank: true) %>
  </div>
</li>
<li class="string input optional stringish" id="item_category_input">
  <div class="small_category_field">
    <%= f.collection_check_boxes(:small_category_id, Category.where(genre_div: 1), :id, :name, include_hidden: false) do |b| %>
      <%= b.label { b.check_box + b.text} %>
    <% end %>
  </div>
</li>

def new
  @item = Item.new
  @item.categories_items.build
  @smalls = Category.where(genre_div: 1)
end

def item_params
  params.require(:item).permit(
    :name, :price, :stock, :handling_time, :maker, :model, :description, :memo, :sold_out_div, { small_category_ids: [] }).merge(
    images: uploaded_images, updated_by: current_admin_user.membername, created_by: current_admin_user.membername)
end

Comments

[rhiroe]

僕たちはエスパーではないので、ソースコードを載せていただかないと何もわかりません。

[Masashige1005]

Viewページを追記しました。

[rhiroe]

パラメータをどのように構成するかはinput要素のname属性によるので、
その部分が書かれているであろう _categories_items_fields ファイルがないと何もわかりません。

それ以外にも質問に関連するファイルは全て提示してください。

[maisumakun]

> 1591607240334の部分を１とかにするやり方はありませんか？

なぜそうしたいのでしょうか。この値は入力グループの識別にだけ使われるもので、保存後まで残ることはありません。

Answer 1

link_to_add_associationからフォームが追加される流れを軽く追ってみましたが、おそらくcreate_new_idが質問中の"1591607240334"に当たる部分を生成していると思われます。

var create_new_id = function() {
  return (new Date().getTime() + cocoon_element_counter++);
}

見ての通り現時刻を利用しているため、ここを上書きしないことには 1 や 2 のような数値にするのは難しそうです。
cocoon にここの値を上書きするようなオプションは用意されていませんか？

なければクリックイベントを上書きするしかないかなーと思うんですが...。

  $(document).on('click', '.add_fields', function(e) {
    e.preventDefault();
    e.stopPropagation();
    
    var $this                 = $(this),
        assoc                 = $this.data('association'),
        assocs                = $this.data('associations'),
        content               = $this.data('association-insertion-template'),
        insertionMethod       = $this.data('association-insertion-method') || $this.data('association-insertion-position') || 'before',
        insertionNode         = $this.data('association-insertion-node'),
        insertionTraversal    = $this.data('association-insertion-traversal'),
        count                 = parseInt($this.data('count'), 10),
        regexp_braced         = new RegExp('\[new_' + assoc + '\](.*?\s)', 'g'),
        regexp_underscord     = new RegExp('_new_' + assoc + '_(\w*)', 'g'),
        new_id                = create_new_id(),
        new_content           = content.replace(regexp_braced, newcontent_braced(new_id)),
        new_contents          = [],
        originalEvent         = e;


    if (new_content == content) {
      regexp_braced     = new RegExp('\[new_' + assocs + '\](.*?\s)', 'g');
      regexp_underscord = new RegExp('_new_' + assocs + '_(\w*)', 'g');
      new_content       = content.replace(regexp_braced, newcontent_braced(new_id));
    }

    new_content = new_content.replace(regexp_underscord, newcontent_underscord(new_id));
    new_contents = [new_content];

    count = (isNaN(count) ? 1 : Math.max(count, 1));
    count -= 1;

    while (count) {
      new_id      = create_new_id();
      new_content = content.replace(regexp_braced, newcontent_braced(new_id));
      new_content = new_content.replace(regexp_underscord, newcontent_underscord(new_id));
      new_contents.push(new_content);

      count -= 1;
    }

    var insertionNodeElem = getInsertionNodeElem(insertionNode, insertionTraversal, $this)

    if( !insertionNodeElem || (insertionNodeElem.length == 0) ){
      console.warn("Couldn't find the element to insert the template. Make sure your `data-association-insertion-*` on `link_to_add_association` is correct.")
    }

    $.each(new_contents, function(i, node) {
      var contentNode = $(node);

      var before_insert = jQuery.Event('cocoon:before-insert');
      insertionNodeElem.trigger(before_insert, [contentNode, originalEvent]);

      if (!before_insert.isDefaultPrevented()) {
        // allow any of the jquery dom manipulation methods (after, before, append, prepend, etc)
        // to be called on the node.  allows the insertion node to be the parent of the inserted
        // code and doesn't force it to be a sibling like after/before does. default: 'before'
        var addedContent = insertionNodeElem[insertionMethod](contentNode);

        insertionNodeElem.trigger('cocoon:after-insert', [contentNode,
          originalEvent]);
      }
    });
  });

それをするくらいなら cocoon を使う意味はないのかなと思います。
自分で実装した方がおそらく楽です。
"1591607240334"がパラメータのキーに来ることによってどう困るのかにもよりますが、ある程度割り切ってしまって使用するのがいいのかなと思います。

Answer 2

おそらく、
既存のデータと新規（未save）で分けているのだと思います。
そのまま 取り込んでsaveすると1,2,3,4となるのではないでしょうか。