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

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

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

0回答

4864閲覧

rails 動的フォームのfile_fieldにそれぞれのサムネイル画像を表示させたい。

TakumaN

総合スコア120

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2016/04/01 01:05

###ざっくり言うと
動的フォームで生成されたそれぞれのフォームに個別のidを振り分けたい。(データベースから引っ張ってきたそれぞれの画像を表示させたい)

###解決したいこと
railsのアプリケーションにcoffeescriptを利用した動的フォームを導入したいのですが、つまづいてしまっています。
追加や削除といったフォームの増減はちゃんと機能しており、そこにfile_fieldで選択された画像を表示させられるようにしたいです。(バリデーションに引っかかった時やedit時に)

下記のフォームのコードにある<% @work = @gallery.works[0] %>内のidを、
それぞれのフォームごとに適したidに振り分けることが、できれば問題が解決するところまではわかっています。

フォームごとに、このidをうまく振り分けるアイデアがあれば教えて欲しいです。

また、もっと簡単なやり方があればそちらも教えていただけると幸いです。

###フォームを作る時に参考にした記事
Railsで階層化された複数モデルに対応するフォームの作り方
Railsで階層化された複数モデルに対応するフォームの作り方【JavaScript/CoffeeScriptによる動的処理追加】

###使っている機能
iPrevew --- input fileに画像がアップされるとその画像をプレビュー表示する。
carrierwave --- 画像をアップロードするgem。バリデーションに引っかかった時やedit時にそれぞれのinput fileに適したサムネイル画像を表示してくれたりもする。

###試したこと
idのところにiを代入して、jqueryで0から1ずつカウントされるようにしましたが、全てのフォームには0しか適応されませんでした。

<% @work = @gallery.works[i] %> ←追加ボタンが押されるたびに1ずつカウント

###追加されるフォーム

Rails

1 <div class="field work_field"> 2 3 <div class="file"> 4 <%= f.file_field :work_image, accept: 'image/*' %> 5 <% @gallery.works.find do |work| %> 6 <% @work = @gallery.works[0] %>**ここの数字を、一つ目のフォームには0、二つ目のフォームには1、三つ目のフォームには2、というようにさせたい。** 7 <%= image_tag @work.work_image.thumb.url if @work.work_image? %>**ここでプレビュー表示される** 8 9 <% end %> 10 <%= f.hidden_field :work_image_cache %> 11 </div><br> 12 13 <%= f.text_field :work_title, class: 'text_field', placeholder: "作品タイトル" %><br> 14 15 <%= f.hidden_field :id %> 16 17 <%= link_to_remove_field("削除", f, {class: 'remove_field'}) %> 18 <script> 19 $('input[type=file]').iPreview(); 20 </script> 21 </div>

###追加ボタン、削除ボタンが押された時のcoffeescriptでの動作

coffeescript

1# coffeescript 2$(document).on 'ready page:load', -> 3 4 5 6 # 追加ボタンを押されたとき 7 $('form').on 'click', '.add_field', (event) -> 8 # 現在時刻をミリ秒形式で取得 9 time = new Date().getTime() 10 # ヘルパーで作ったインデックス値を↑と置換 11 regexp = new RegExp($(this).data('id'), 'g') 12 # ヘルパーから渡した fields(HTML) を挿入 13 $(this).before($(this).data('fields').replace(regexp, time)) 14 event.preventDefault() 15 16 # 削除ボタンを押されたとき 17 $('form').on 'click', '.remove_field', (event) -> 18 19 20 21 # 削除ボタンを押したフィールドの _destroy = true にする 22 $(this).prev('input[name*=_destroy]').val('true') 23 # 削除ボタンが押されたフィールドを隠す 24 $(this).closest('div').empty() 25 event.preventDefault()

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問