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

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

ただいまの
回答率

88.76%

edit画面で複数のimageのうち1つずつ画像を削除したい

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 724

show_kanazawa

score 12

■解決したいこと
メルカリのようなフリマアプリの出品した商品の
出品した商品の編集画面にて非同期にて商品の複数画像のうち1つずつ削除できるような機能を実装しております。
編集画面に行き、保存されている画像の下に削除ボタンを設置し押したら該当の画像のみ画面から削除できるようにしたいです。
現在実装した内容では削除を押した段階で出品した商品全てが削除されてしまいます。
■自力で調べた内容
viewの削除ボタンをクリック→発火
コントローラーに定義したimage_destroyにjson通信。
コントローラーでjsで取得したimageIDのレコードを削除。
■仮説と検証作業の結果
通信は走っているがコントローラーで削除ができていない??

.new-conteiner
= render 'shared/new_header'
.new-main
.new-mainbox %h2 商品の情報を入力 = form_for @product do |f| .image %h4 出品画像 .imageimages

  • @image.each_with_index do |i, index|
  • if i.image_url.present?
    .imageimagesbox{"data-image-id": "#{i.id}"}
    = image_tag(i.image_url.url, id: "product_image", class: "image-top imagemain#{index}", height: '120', width: '120')
    .delete_btn 削除

$( document ).on('turbolinks:load', function() {
$(function(){
$(".delete_btn").on('click', function(){
var deleteConfirm = confirm('削除してよろしいでしょうか?');

if(deleteConfirm == true) {
var clickEle = $(this)
// var productEle = $(this).parent().parent().parent().parent(this); 
var imageID = clickEle.parent().attr('data-image-id')

$.ajax({
url: 'image_destroy',
type: 'POST',
data: {'image_id': imageID,
'_method': 'DELETE'}
})

.done(function(){
clickEle.parent('img').remove();
})

.fail(function(){
alert('削除できませんでした')
});
} else {
(function(e){
e.preventDefault()
});
};
});
});
});

route.rb
resources :products do
member do
get :buyer_show
end
collection do
get 'get_category_children', defaults: { format: 'json' }
get 'get_category_grandchildren', defaults: { format: 'json' }
end
member do
get 'get_category_children', defaults: { format: 'json' }
get 'get_category_grandchildren', defaults: { format: 'json' }
end

member do
get 'image_destroy', defaults: { format: 'json' }
end
end

```controller.rb

def edit

@product = Product.find(params[:id])
@user = current_user
@image = Image.where(product_id: @product)
@category_parent_array = ["---"]
Category.where(ancestry: nil).each do |parent|
@category_parent_array << parent.name
end
end

def destroy
@products = current_user.products
if @product.saler_id == current_user.id
@product.destroy
redirect_to show_exhibit_user_path(current_user)
else
render :show, notice: '削除できませんでした'
end
end

def show
end

def update
if @product.update(product_params)
redirect_to product_path
else
render 'buyer_show'
end
end

def buyer_show
end

def image_destroy
image = Image.find(params[:image_id])
image.destroy
render 'edit'
end

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

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

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

関連した質問

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