現状、背景
フリマアプリの出品した商品を編集する機能を実装していて、ここでは gem "gon" を使用して、出品した写真のデータ等を追加、削除できる機能実装したところ、
他の機能(商品出品、メインページにかけてるJS等)で、JSを使用したところが効かなくなるエラーが出てしまっている状況です。
エラー内容
他のJavascriptが効かなくなっている!!
該当コード
items.controller
def update
@item = Item.find(params[:id])
@images = @item.images
ids = @item.images.map{|image| image.id }
exist_ids = registered_images_params[:ids].map(&:to_i)
exist_ids.clear if exist_ids[0] == 0
if (exist_ids.length != 0 || new_image_params[:images][0] != " ") && @item.update!(item_update_params) # ||はor(または)
unless ids.length == exist_ids.length
delete_ids = ids - exist_ids
delete_ids.each do |id|
@item.images.find(id).destroy
end
end
unless new_image_params[:images][0] == " "
new_image_params[:images].each do |image|
@item.images.create(image_url: image, item_id: @item.id)
end
end
# flash[:notice] = '編集が完了しました'
respond_to do |format|
format.js { render ajax_redirect_to(item_path(@item)) }
end
else
flash[:alert] = '未入力項目があります'
rener :edit
end
end
def get_category_children
@category_children = Category.find_by(name: "#{params[:parent_name]}", ancestry: nil).children
end
def get_category_grandchildren
@category_grandchildren = Category.find("#{params[:child_id]}").children
end
private
def item_update_params
params.require(:item).permit( :name, :description, :category_id, :size_id, :brand_id, :prefecture_id, :condition_id, :delivery_charge_id, :delivery_way_id, :delivery_days_id, :price)
end
def registered_images_params
params.require(:registered_images_ids).permit({ids: []})
end
def new_image_params
params.require(:new_images).permit({images: []})
end
def set_category
@category_parent_array = ["---"]
Category.where(ancestry: nil).each do |parent|
@category_parent_array << parent.name
end
end
def set_gon
@item= Item.find(params[:id])
@images = @item.images
gon.item = @item
gon.images = @item.images
# @item.images.image_urlをバイナリーデータにしてビューで表示できるようにする
require 'base64'
gon.images_binary_datas = []
if Rails.env.production?
client = Aws::S3::Client.new(
region: 'ap-northeast-1',
access_key_id: ENV["AWS_ACCESS_KEY_ID"],
secret_access_key: ENV["AWS_SECRET_ACCESS_KEY"],
)
@item.images.each do |image|
binary_data = client.get_object(bucket: 'freemarket-sample66e', key: image.image_url.file.path).body.read
gon.images_binary_datas << Base64.strict_encode64(binary_data)
end
else
@item.item_images.each do |image|
binary_data = File.read(image.image_url.file.file)
gon.images_binary_datas << Base64.strict_encode64(binary_data)
end
end
end
end
Edit.JS
$(function() {
var dropzone = $(".item__img__dropzone__input");
var dropzone2 = $(".item__img__dropzone2__input2");
var appendzone = $(".item__img__dropzone2")
var input_area = $(".input-area");
var preview = $("#preview");
var preview2 = $("#preview2");
var images = [];
var registered_images_ids =[]
var new_image_files = [];
gon.images.forEach(function(image, index) {
var img = $(`<div class= "add_img"><div class="img_area"><img class="image"></div></div>`);
img.data("image", index)
var btn_wrapper = $('<div class="btn_wrapper"><a class="btn_edit">編集</a><a class="btn_delete">削除</a></div>');
img.append(btn_wrapper);
binary_data = gon.images_binary_datas[index]
img.find("img").attr({
src: "data:image/jpeg;base64," + binary_data
});
images.push(img)
registered_images_ids.push(image.id)
})
if (images.length <= 4) {
$('#preview').empty();
$.each(images, function(index, image) {
image.data('image', index);
preview.append(image);
})
dropzone.css({
'width': `calc(100% - (20% * ${images.length}))`
})
} else if (images.length == 5) {
$("#preview").empty()
$.each(images, function(index, image) {
image.data("image", index);
preview.append(image);
});
appendzone.css({
display: "block"
});
dropzone.css({
display: "none"
});
preview2.empty();
} else if (images.length >= 6) {
var pickup_images1 = images.slice(0, 5);
$('#preview').empty();
$.each(pickup_images1, function(index, image) {
image.data('image', index);
preview.append(image);
})
var pickup_images2 = images.slice(5);
$.each(pickup_images2, function(index, image) {
image.data('image', index + 5);
preview2.append(image);
})
dropzone.css({
'display': 'none'
})
appendzone.css({
'display': 'block'
})
dropzone2.css({
'display': 'block',
'width': `calc(100% - (20% * ${images.length - 5}))`
})
if (images.length == 10) {
dropzone2.css({
display: "none"
});
}
}
var new_image = $(
`<input multiple= "multiple" name="item_images[image][]" class="upload-image" data-image= ${images.length} type="file" id="upload-image">`
);
input_area.append(new_image);
$("#edit_item .item__img__dropzone, #edit_item .item__img__dropzone2").on("change", 'input[type= "file"].upload-image', function() {
var file = $(this).prop("files")[0];
new_image_files.push(file)
var reader = new FileReader();
var img = $(`<div class= "add_img"><div class="img_area"><img class="image"></div></div>`);
reader.onload = function(e) {
var btn_wrapper = $('<div class="btn_wrapper"><a class="btn_edit">編集</a><a class="btn_delete">削除</a></div>');
img.append(btn_wrapper);
img.find("img").attr({
src: e.target.result
});
};
reader.readAsDataURL(file);
images.push(img);
if (images.length <= 4) {
$('#preview').empty();
$.each(images, function(index, image) {
image.data('image', index);
preview.append(image);
})
dropzone.css({
'width': `calc(100% - (20% * ${images.length}))`
})
} else if (images.length == 5) {
$("#preview").empty()
$.each(images, function(index, image) {
image.data("image", index);
preview.append(image);
});
appendzone.css({
display: "block"
});
dropzone.css({
display: "none"
});
preview2.empty();
} else if (images.length >= 6) {
var pickup_images = images.slice(5);
$.each(pickup_images, function(index, image) {
image.data("image", index + 5);
preview2.append(image);
dropzone2.css({
width: `calc(100% - (20% * ${images.length - 5}))`
});
});
if (images.length == 10) {
dropzone2.css({
display: "none"
});
}
}
var new_image = $(
`<input multiple= "multiple" name="item_images[image][]" class="upload-image" data-image= ${images.length} type="file" id="upload-image">`
);
input_area.append(new_image);
});
$("#edit_item .item__img__dropzone, #edit_item .item__img__dropzone2").on('click', '.btn_delete', function() {
// 削除ボタンを押した画像を取得
var target_image = $(this).parent().parent();
var target_image_num = target_image.data('image');
target_image.remove();
images.splice(target_image_num, 1);
if (target_image_num < registered_images_ids.length) {
registered_images_ids.splice(target_image_num, 1);
} else {
new_image_files.splice((target_image_num - registered_images_ids.length), 1);
}
if(images.length == 0) {
$('input[type= "file"].upload-image').attr({
'data-image': 0
})
}
if (images.length <= 4) {
$('#preview').empty();
$.each(images, function(index, image) {
image.data('image', index);
preview.append(image);
})
dropzone.css({
'width': `calc(100% - (20% * ${images.length}))`,
'display': 'block'
})
appendzone.css({
'display': 'none'
})
} else if (images.length == 5) {
$('#preview').empty();
$.each(images, function(index, image) {
image.data('image', index);
preview.append(image);
})
appendzone.css({
'display': 'block',
})
dropzone2.css({
'width': '100%'
})
dropzone.css({
'display': 'none'
})
preview2.empty();
// 画像が6枚以上のとき
} else {
// 1〜5枚目の画像を抽出
var pickup_images1 = images.slice(0, 5);
// 1〜5枚目を1段目に表示
$('#preview').empty();
$.each(pickup_images1, function(index, image) {
image.data('image', index);
preview.append(image);
})
// 6枚目以降の画像を抽出
var pickup_images2 = images.slice(5);
// 6枚目以降を2段目に表示
$.each(pickup_images2, function(index, image) {
image.data('image', index + 5);
preview2.append(image);
dropzone2.css({
'display': 'block',
'width': `calc(100% - (20% * ${images.length - 5}))`
})
})
}
})
$('.edit_item').on('submit', function(e){
e.preventDefault();
var formData = new FormData($(this).get(0));
if (registered_images_ids.length == 0) {
formData.append("registered_images_ids[ids][]", 0)
} else {
registered_images_ids.forEach(function(registered_image){
formData.append("registered_images_ids[ids][]", registered_image)
});
}
if (new_image_files.length == 0) {
formData.append("new_images[images][]", " ")
} else {
new_image_files.forEach(function(file){
formData.append("new_images[images][]", file)
});
}
$.ajax({
url: '/items/' + gon.item.id,
type: "PATCH",
data: formData,
contentType: false,
processData: false,
})
});
});
長々しくてすいません
解決策
Edit.js
$(function(){
if (typeof gon != "undefined") { //gonがundefinedじゃなかったらという条件分岐
var dropzone = $(".item__img__dropzone__input");
var dropzone2 = $(".item__img__dropzone2__input2");
var appendzone = $(".item__img__dropzone2")
var input_area = $(".input-area");
var preview = $("#preview");
var preview2 = $("#preview2");
これを記述する事で ”Gon"を使用したところだけにEdit.jsが効くことになり、無事エラー解決しました!
そもそも "gon"って何よ!から始まりました...
最後に
このやり方は、すごく複雑なので、もっといい方法があると思います!!
しかし、難しいことを実装して、エラー解決できた事は、少し自信がつきました!!