質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.94%

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,037

score 14

環境: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とかにするやり方はありませんか?追加されるフォームでそれぞれランダムな数字になってしまうので追加されたフォームは1,2,3...と続けて作られるようにしたいです。

<%= 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
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Mugheart

    2020/06/08 18:26

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

    キャンセル

  • Masashige1005

    2020/06/08 18:28

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

    キャンセル

  • Mugheart

    2020/06/08 18:37

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

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

    キャンセル

  • maisumakun

    2020/06/09 09:42

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

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

    キャンセル

回答 2

checkベストアンサー

0

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"がパラメータのキーに来ることによってどう困るのかにもよりますが、ある程度割り切ってしまって使用するのがいいのかなと思います。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.94%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る