遭遇している不具合はタイトルの通りなのですが、これだけだとよく分からないと思いますので、順を追って説明します。
まず、以下のような二つの画像が投稿できるformをajaxで実装しています。
イメージとしては、Itemモデルがあり、そのモデルは画像①(必須)、画像②(任意)を持つという形になっています。
######formのコードイメージ(画像投稿部分だけの簡易ver)
ruby
1= form_for(item, url: path , html:{id:'item_form', data_parsley_validate:"" ,multipart: true}, remote: true) do |f| 2 3 .form-group 4 .image_box 5 label for="top_image" 6 | 画像①(必須) 7 = f.file_field :top_image, accept: 'image/*', id: "top_image", class: "image_item pointer" 8 9 .form-group 10 .image_box 11 label for="top_image_2" 12 | 画像②(任意) 13 = f.file_field :top_image_2, accept: 'image/*', id: "top_image_2", class: "image_item pointer" 14 15 .form-group 16 = f.submit 'Submit', class:"btn", data: { disable_with: "Sending..." }
その上で、一点よく分からない不具合が発生しています。
例)
1・すでに投稿したアイテムの画像②を追加投稿しようとする
2・画像容量など何らかのバリデーションにかかる(不具合発生させるためにわざとです。)
3・投稿画面にエラーが表示される
--ここからが問題---
4・前述の投稿フォームの画像①のfile_field(表示時はinputタグ)が画像②のfile_fieldの位置に動き、画像②のfile_field(inputタグ)がHTML上から消えている。以下のイメージです。
######エラー発生後のformのコードイメージ
ruby
1= form_for(item, url: path , html:{id:'item_form', data_parsley_validate:"" ,multipart: true}, remote: true) do |f| 2 3 .form-group 4 .image_box 5 label for="top_image" 6 | 画像①(必須) 7 8 .form-group 9 .image_box 10 label for="top_image_2" 11 | 画像②(任意) 12 = f.file_field :top_image, accept: 'image/*', id: "top_image", class: "image_item pointer" 13 14 .form-group 15 = f.submit 'Submit', class:"btn", data: { disable_with: "Sending..." }
ちなみにページ自体を再読み込みしてあげると最初の正しいformに戻ります。
Controller側は以下の通りです。シンプルな処理しかしてません。
######更新時のControllerのupdateアクション
ruby
1def update 2 @item = Item.find(params[:id]) 3 if @item.update(item_params) 4 @sussess = true 5 respond_to do |format| 6 format.js { flash[:info] = '情報が更新されました。' } 7 end 8 else 9 respond_to do |format| 10 format.js 11 end 12 end 13end
######Controller側で処理した後のupdate.js.slim
ここもシンプルです
ruby
1 - if @success == true 2 | window.location.href = "/managements/articles/#{@article.id}/edit"; 3 4- else 5 | $('.alert').remove(); 6 | $(" #{ j( render 'managements/shared/error_messages', object: @article )}").insertAfter(".x_title");
###自分で把握できていること
1・file_field(inputタグ)の場所が勝手に動くタイミングは、update.js.slimが実行された直後
2・試しにinputタグを画像②のfile_fieldの後に直書きした場合、name属性の有無で挙動が変わった。
ruby
1 .form-group 2 .image_box 3 label for="top_image" 4 | 画像①(必須) 5 = f.file_field :top_image, accept: 'image/*', id: "top_image", class: "image_item pointer" 6 7 .form-group 8 .image_box 9 label for="top_image_2" 10 | 画像②(任意) 11 = f.file_field :top_image_2, accept: 'image/*', id: "top_image_2", class: "image_item pointer" 12 13 .form-group 14 .image_box 15 input.image_item accept="image/*" name=""
【name属性のあるinputタグ】画像①のinputタグが画像②のinputタグに移り、画像②のinputタグがこの直書きしたinputタグに移った
ruby
1 .form-group 2 .image_box 3 label for="top_image" 4 | 画像①(必須) 5 6 7 .form-group 8 .image_box 9 label for="top_image_2" 10 | 画像②(任意) 11 = f.file_field :top_image, accept: 'image/*', id: "top_image", class: "image_item pointer" 12 13 14 .form-group 15 .image_box 16 = f.file_field :top_image_2, accept: 'image/*', id: "top_image_2", class: "image_item pointer"
【name属性のないinputタグ】画像①のinputタグが画像②のinputタグに移り、画像②のinputタグが消失。追加したname属性がないinputタグはそのまま。
ruby
1 .form-group 2 .image_box 3 label for="top_image" 4 | 画像①(必須) 5 6 7 .form-group 8 .image_box 9 label for="top_image_2" 10 | 画像②(任意) 11 = f.file_field :top_image, accept: 'image/*', id: "top_image", class: "image_item pointer" 12 13 .form-group 14 .image_box 15 input.image_item accept="image/*"
3・このフォームがあるページのjsを完全にコメントアウトしても、この事象は発生。
4・type="file"ではないinputタグでは発生しない。
数時間悪戦苦闘したものの、結局原因は分からず。。。form_forが勝手に処理しているのでしょうか?どなたか原因らしきことが分かれば教えて頂けると嬉しいです。
あなたの回答
tips
プレビュー