Q&A
#前提・実現したいこと
フリマアプリを作っています。
出品機能で入力したデータをdbに保存したいのですがdbに保存されません。
itemsテーブルに出品データを保存し、imagesテーブルに画像を保存するように進めています。
#発生している問題・エラーメッセージ
エラーは出ていないのですが、出品機能のデータがdbに保存されない状態になっています。
#該当のソースコード
haml
.exhibition .header .header__logo = image_tag asset_path("logo.png"), size: "200x50" .main %section.main__block = form_with model:@item, url:user_items_path , local:true do |f| -# %h2.sell__block__head -# 商品の情報を入力 .sell__block__form .sell__block__form__upload %h3.sell__block__form__upload__head 出品画像 %span.require 必須 .kai 最大5枚までアップロードできます .post__drop__box__container .prev-content .label-content %label{for: "item_images_attributes_0_image", class: "label-box", id: "label-box--0"} %pre.label-box__text-visible クリックしてファイルをアップロード .hidden-content = f.fields_for :images do |i| = i.file_field :image, class: "hidden-field" %input{class:"hidden-field", type: "file", name: "item[images_attributes][1][image]", id: "item_images_attributes_1_image" } %input{class:"hidden-field", type: "file", name: "item[images_attributes][2][image]", id: "item_images_attributes_2_image" } %input{class:"hidden-field", type: "file", name: "item[images_attributes][3][image]", id: "item_images_attributes_3_image" } %input{class:"hidden-field", type: "file", name: "item[images_attributes][4][image]", id: "item_images_attributes_4_image" } .border .details .details__title2 .details__title2__mozi2 商品名 .details__title2__hissu2 必須 .details__type = f.text_field :name, placeholder:"商品名（必須 40文字まで)",size:67,maxlength:40 .details__description .details__description__mozi3 商品の説明 .details__description__hissu3 必須 .details__description-input = f.text_field :introduction, placeholder:"商品の説明（必須 1000文字まで)",size:67,maxlength:1000 .border .product-details .product-details__mozi4 商品の詳細 .product-details__categories .product-details__categories__mozi5 カテゴリー .product-details__categories__hissu4 必須 .product-details__categories-input .product-details__brand .product-details__brand__mozi6 ブランド .product-details__brand__nini 任意 .product-details__brand-input = f.text_field :brand, placeholder:"任意",size:67 .product-details__status .product-details__status__mozi7 商品の状態 .product-details__status__hissu5 必須 .product-details__status-input = f.collection_select :condition, Condition.all, :id, :value, {prompt:'--'} .border .shipping .shipping__mozi8 配送について .shipping__burden .shipping__burden__mozi9 配送料の負担 .shipping__burden__hissu6 必須 .shipping__burden-input = f.collection_select :postage_payer, PostagePayer.all, :id, :value, {prompt:'--'} .shipping__area .shipping__area__mozi10 発送元の地域 .shipping__area__hissu7 必須 .shipping__area-input = f.collection_select :prefecture_code, JpPrefecture::Prefecture.all, :name, :name, include_blank: true .shipping__days .shipping__days__mozi11 発送までの日数 .shipping__days__hissu8 必須 .shipping__days-input = f.collection_select :preparation_day, PreparationDay.all, :id, :value, {prompt:'--'} .border .price .price__mozi12 価格（¥300〜9,999,999） .price__selling-price .price__selling-price__mozi13 販売価格 .price__selling-price__hissu9 必須 .price__selling-price__circle ￥ .price__selling-price__price-input = f.text_field :price, placeholder:" 0",size:23 .price__commission .price__commission__mozi14 販売手数料（10%） .price__commission__display ー .price__border .price__profit .price__profit__mozi15 販売利益 .price__profit__display2 ー .price__red-mozi = f.submit "出品する" -# .price__return -# = f.submit "もどる" .price__notes 禁止されている行為および出品物を必ずご確認ください。偽ブランド品や盗品物などの販売は犯罪であり、法律により処罰される可能性があります。 また、出品をもちまして加盟店規約に同意したことになります。 .footer8 .title8 .title8__a プライバシーポリシー .title8__b メルカリ利用規約 .title8__c 特定商取引に関する表記 .item8 = image_tag "logo-white.png", size: "200x60" .logo8 © FURIMA, Inc.
items_controller.rb
class ItemsController < ApplicationController def new @item = Item.new @item.images.new end def create @item = Item.new(item_params) if @item.save redirect_to :root_path else render :new end # binding.pry end private def item_params params.require(:item).permit(:name, :introduction,:price, :brand_id, [images_attributes: [:url]]) end end
javascript
$(document).on('turbolinks:load', function(){ $(function(){ //プレビューのhtmlを定義 function buildHTML(count) { var html = `<div class="preview-box" id="preview-box__${count}"> <div class="upper-box"> <img src="" alt="preview"> </div> <div class="lower-box"> <div class="update-box"> <label class="edit_btn">編集</label> </div> <div class="delete-box" id="delete_btn_${count}"> <span>削除</span> </div> </div> </div>` return html; } // ラベルのwidth操作 function setLabel() { //プレビューボックスのwidthを取得し、maxから引くことでラベルのwidthを決定 var prevContent = $('.label-content').prev(); labelWidth = (620 - $(prevContent).css('width').replace(/[^0-9]/g, '')); $('.label-content').css('width', labelWidth); } // プレビューの追加 $(document).on('change', '.hidden-field', function() { setLabel(); //hidden-fieldのidの数値のみ取得 var id = $(this).attr('id').replace(/[^0-9]/g, ''); //labelボックスのidとforを更新 $('.label-box').attr({id: `label-box--${id}`,for: `item_images_attributes_${id}_image`}); //選択したfileのオブジェクトを取得 var file = this.files[0]; var reader = new FileReader(); //readAsDataURLで指定したFileオブジェクトを読み込む reader.readAsDataURL(file); //読み込み時に発火するイベント reader.onload = function() { var image = this.result; //プレビューが元々なかった場合はhtmlを追加 if ($(`#preview-box__${id}`).length == 0) { var count = $('.preview-box').length; var html = buildHTML(id); //ラベルの直前のプレビュー群にプレビューを追加 var prevContent = $('.label-content').prev(); $(prevContent).append(html); } //イメージを追加 $(`#preview-box__${id} img`).attr('src', `${image}`); var count = $('.preview-box').length; //プレビューが5個あったらラベルを隠す if (count == 5) { $('.label-content').hide(); } //ラベルのwidth操作 setLabel(); //ラベルのidとforの値を変更 if(count < 5){ //プレビューの数でラベルのオプションを更新する $('.label-box').attr({id: `label-box--${count}`,for: `item_images_attributes_${count}_image`}); } } }); // 画像の削除 $(document).on('click', '.delete-box', function() { var count = $('.preview-box').length; setLabel(count); //item_images_attributes_${id}_image から${id}に入った数字のみを抽出 var id = $(this).attr('id').replace(/[^0-9]/g, ''); //取得したidに該当するプレビューを削除 $(`#preview-box__${id}`).remove(); console.log("new") //フォームの中身を削除 $(`#item_images_attributes_${id}_image`).val(""); //削除時のラベル操作 var count = $('.preview-box').length; //5個めが消されたらラベルを表示 if (count == 4) { $('.label-content').show(); } setLabel(count); if(id < 5){ //削除された際に、空っぽになったfile_fieldをもう一度入力可能にする $('.label-box').attr({id: `label-box--${id}`,for: `item_images_attributes_${id}_image`}); } }); }); })
どなたか解決よろしくお願いいたします。
回答1件
0
今後のことも考えてbyebugなどでデバッグしてみることをおすすめします。
byebug公式
Ruby on Rails初心者必見。Railsでのデバッグの味方byebug（バイバグ）。
またTeratailsでは推奨していない質問というものがあります。
今回は、6つのうち2つに該当するかと思いますので、今後はご注意下さい。
https://teratail.com/help/avoid-asking
- コードをください・デバッグしてください等の丸投げの質問
- 過去に投稿した質問と同じ内容の質問
とくに「コードをください・デバッグしてください等の丸投げの質問」に関しては、どういったことを何通り試したか？その結果、どうなったかなどを書くことで丸投げとはみなされなくなるかと思います。
投稿2020/03/18 14:13
総合スコア3365
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。