gem "gon"　を利用した時に、他のJSが効かなくなる

解決したいこと

gonで指定したページのみ変数定義させたい

##現状、背景
フリマアプリの出品した商品を編集する機能を実装していて、ここでは　gem "gon"　を使用して、出品した写真のデータ等を
追加、削除できる機能実装したところ、

他の機能で、JSを使用したところが効かなくなるエラーが出てしまっている状況です。

##該当コード

itemcont
1
2  def edit
3  end
4  def update
5    @item = Item.find(params[:id])
6    @images = @item.images
7
8    ids = @item.images.map{|image| image.id }
9  
10    exist_ids = registered_images_params[:ids].map(&:to_i)
11 
12    exist_ids.clear if exist_ids[0] == 0
13
14    if (exist_ids.length != 0 || new_image_params[:images][0] != " ") && @item.update!(item_update_params)  # ||はor（または）
15
16    
17      unless ids.length == exist_ids.length
18      
19        delete_ids = ids - exist_ids
20        delete_ids.each do |id|
21          @item.images.find(id).destroy
22        end
23      end
24
25    
26      unless new_image_params[:images][0] == " "
27        new_image_params[:images].each do |image|
28          @item.images.create(image_url: image, item_id: @item.id)
29        end
30      end
31
32      # flash[:notice] = '編集が完了しました'
33      respond_to do |format|
34        format.js { render ajax_redirect_to(item_path(@item)) }
35      end
36
37    else
38      flash[:alert] = '未入力項目があります'
39      rener :edit
40    end
41
42  end
43  
44  def get_category_children
45    @category_children = Category.find_by(name: "#{params[:parent_name]}", ancestry: nil).children
46  end
47
48  def get_category_grandchildren
49    @category_grandchildren = Category.find("#{params[:child_id]}").children
50  end
51
52  def logout
53  end
54
55  def userprofile
56  end
57
58  private
59  
60  def item_update_params
61    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)
62  end
63  
64  def registered_images_params
65    params.require(:registered_images_ids).permit({ids: []})
66  end
67
68  def new_image_params
69    params.require(:new_images).permit({images: []})
70  end
71
72  def set_category
73    @category_parent_array = ["---"]
74    Category.where(ancestry: nil).each do |parent|
75      @category_parent_array << parent.name
76    end
77  end
78
79  def set_gon
80    @item= Item.find(params[:id])
81    @images = @item.images
82
83    gon.item = @item
84    gon.images = @item.images
85
86
87    # @item.images.image_urlをバイナリーデータにしてビューで表示できるようにする
88    require 'base64'
89    gon.images_binary_datas = []
90    if Rails.env.production?
91      client = Aws::S3::Client.new(
92                             region: 'ap-northeast-1',
93                             access_key_id: ENV["AWS_ACCESS_KEY_ID"],
94                             secret_access_key: ENV["AWS_SECRET_ACCESS_KEY"],
95                             )
96      @item.images.each do |image|
97        binary_data = client.get_object(bucket: 'freemarket-sample66e', key: image.image_url.file.path).body.read
98        gon.images_binary_datas << Base64.strict_encode64(binary_data)
99      end
100    else
101      @item.item_images.each do |image|
102        binary_data = File.read(image.image_url.file.file)
103        gon.images_binary_datas << Base64.strict_encode64(binary_data)
104      end
105    end
106  end
107end

edit
1
2.sell_item_html
3  = render "/items/sheard/icon_header"
4
5  // 商品フォームヘッダー
6#edit_item
7  .item
8    .item__title
9      %h2.edit_title 商品の情報を入力
10    = form_for @item do |f|
11      .item__img
12        %ul.edit_ul
13          %li
14            %h3 出品画像
15          %li
16            .required__icon 必須
17        .clearfix
18        %p.max_10 最大10枚までアップロードできます
19
20        = f.fields_for :images, @item.images.first do |image|
21          .item__img__dropzone.clearfix
22            #preview
23            -# １〜５枚目プレビュー表示
24            .item__img__dropzone__input
25              = image.label :image, for: "upload-image" do
26                .input-area
27                  = image.file_field :image_url, id: "upload-image", class: "upload-image", 'data-image': 0
28
29                .item__img__dropzone__input__description
30                  .item__img__dropzone__input__description__text
31                
32          .item__img__dropzone2.clearfix
33            #preview2
34            -# ６〜１０枚目プレビュー表示
35            .item__img__dropzone2__input2
36              = image.label :image, for: "upload-image" do
37                .input-area
38                  = image.file_field :image_url, id: "upload-image", class: "upload-image", 'data-image': 0
39                .item__img__dropzone2__input2__description
40                  .item__img__dropzone2__input2__description__text
41      
42          .sell_btn
43            = f.submit "編集する", class: 'sell__about__bottom-btn submit edit_sub'
44          .back_btn
45            戻る
46
47  = render "/items/sheard/icon_footer"
48

解決方法、
または
もっといい方法等あればご教授お願いします。

maisumakun

2020/01/27 08:17

Railsのバージョンはいくつでしょうか？

chanken2314

2020/01/27 08:38

rails 5.0.7です

行動規範の内容に同意します

回答1件

自己解決

editjs
1$(function() {
2
3  var dropzone = $(".item__img__dropzone__input");
4  var dropzone2 = $(".item__img__dropzone2__input2");
5  var appendzone = $(".item__img__dropzone2")
6  var input_area = $(".input-area");
7  var preview = $("#preview");
8  var preview2 = $("#preview2");
9
10  var images = [];
11  var registered_images_ids =[]
12  var new_image_files = [];
13
14  gon.images.forEach(function(image, index) {
15    var img = $(`<div class= "add_img"><div class="img_area"><img class="image"></div></div>`);
16
17    img.data("image", index)
18
19    var btn_wrapper = $('<div class="btn_wrapper"><a class="btn_edit">編集</a><a class="btn_delete">削除</a></div>');
20
21    img.append(btn_wrapper);
22
23    binary_data = gon.images_binary_datas[index]
24
25    img.find("img").attr({
26      src: "data:image/jpeg;base64," + binary_data
27    });
28    images.push(img)
29    registered_images_ids.push(image.id)
30  })
31
32  if (images.length <= 4) {
33    $('#preview').empty();
34    $.each(images, function(index, image) {
35      image.data('image', index);
36      preview.append(image);
37    })
38    dropzone.css({
39      'width': `calc(100% - (20% * ${images.length}))`
40    })
41
42  } else if (images.length == 5) {
43    $("#preview").empty()
44    $.each(images, function(index, image) {
45      image.data("image", index);
46      preview.append(image);
47    });
48    appendzone.css({
49      display: "block"
50    });
51    dropzone.css({
52      display: "none"
53    });
54    preview2.empty();
55
56
57  } else if (images.length >= 6) {
58
59    var pickup_images1 = images.slice(0, 5);
60
61    $('#preview').empty();
62    $.each(pickup_images1, function(index, image) {
63      image.data('image', index);
64      preview.append(image);
65    })
66
67    var pickup_images2 = images.slice(5);
68
69    $.each(pickup_images2, function(index, image) {
70      image.data('image', index + 5);
71      preview2.append(image);
72    })
73
74    dropzone.css({
75      'display': 'none'
76    })
77    appendzone.css({
78      'display': 'block'
79    })
80    dropzone2.css({
81      'display': 'block',
82      'width': `calc(100% - (20% * ${images.length - 5}))`
83    })
84
85    if (images.length == 10) {
86      dropzone2.css({
87        display: "none"
88      });
89    }
90  }
91
92  var new_image = $(
93    `<input multiple= "multiple" name="item_images[image][]" class="upload-image" data-image= ${images.length} type="file" id="upload-image">`
94  );
95  input_area.append(new_image);
96
97  $("#edit_item .item__img__dropzone, #edit_item .item__img__dropzone2").on("change", 'input[type= "file"].upload-image', function() {
98    var file = $(this).prop("files")[0];
99    new_image_files.push(file)
100    var reader = new FileReader();
101    var img = $(`<div class= "add_img"><div class="img_area"><img class="image"></div></div>`);
102
103    reader.onload = function(e) {
104      var btn_wrapper = $('<div class="btn_wrapper"><a class="btn_edit">編集</a><a class="btn_delete">削除</a></div>');
105
106      img.append(btn_wrapper);
107      img.find("img").attr({
108        src: e.target.result
109      });
110    };
111
112    reader.readAsDataURL(file);
113    images.push(img);
114
115    if (images.length <= 4) {
116      $('#preview').empty();
117      $.each(images, function(index, image) {
118        image.data('image', index);
119        preview.append(image);
120      })
121      dropzone.css({
122        'width': `calc(100% - (20% * ${images.length}))`
123      })
124
125    } else if (images.length == 5) {
126      $("#preview").empty()
127      $.each(images, function(index, image) {
128        image.data("image", index);
129        preview.append(image);
130      });
131      appendzone.css({
132        display: "block"
133      });
134      dropzone.css({
135        display: "none"
136      });
137      preview2.empty();
138
139    } else if (images.length >= 6) {
140
141      var pickup_images = images.slice(5);
142
143      $.each(pickup_images, function(index, image) {
144        image.data("image", index + 5);
145        preview2.append(image);
146        dropzone2.css({
147          width: `calc(100% - (20% * ${images.length - 5}))`
148        });
149      });
150
151      if (images.length == 10) {
152        dropzone2.css({
153          display: "none"
154        });
155      }
156    }
157
158    var new_image = $(
159      `<input multiple= "multiple" name="item_images[image][]" class="upload-image" data-image= ${images.length} type="file" id="upload-image">`
160    );
161    input_area.append(new_image);
162  });
163  
164  $("#edit_item .item__img__dropzone, #edit_item .item__img__dropzone2").on('click', '.btn_delete', function() {
165
166    // 削除ボタンを押した画像を取得
167    var target_image = $(this).parent().parent();
168
169    var target_image_num = target_image.data('image');
170
171    target_image.remove();
172
173    images.splice(target_image_num, 1);
174
175  
176    if (target_image_num < registered_images_ids.length) {
177      registered_images_ids.splice(target_image_num, 1);
178    } else {
179      new_image_files.splice((target_image_num - registered_images_ids.length), 1);
180    }
181
182    if(images.length == 0) {
183      $('input[type= "file"].upload-image').attr({
184        'data-image': 0
185      })
186    }
187
188    if (images.length <= 4) {
189      $('#preview').empty();
190      $.each(images, function(index, image) {
191        image.data('image', index);
192        preview.append(image);
193      })
194      dropzone.css({
195        'width': `calc(100% - (20% * ${images.length}))`,
196        'display': 'block'
197      })
198      appendzone.css({
199        'display': 'none'
200      })
201
202    } else if (images.length == 5) {
203      $('#preview').empty();
204      $.each(images, function(index, image) {
205        image.data('image', index);
206        preview.append(image);
207      })
208      appendzone.css({
209        'display': 'block',
210      })
211      dropzone2.css({
212        'width': '100%'
213      })
214      dropzone.css({
215        'display': 'none'
216      })
217      preview2.empty();
218
219    // 画像が６枚以上のとき
220    } else {
221      // １〜５枚目の画像を抽出
222      var pickup_images1 = images.slice(0, 5);
223
224      // １〜５枚目を１段目に表示
225      $('#preview').empty();
226      $.each(pickup_images1, function(index, image) {
227        image.data('image', index);
228        preview.append(image);
229      })
230      // ６枚目以降の画像を抽出
231      var pickup_images2 = images.slice(5);
232      // ６枚目以降を２段目に表示
233      $.each(pickup_images2, function(index, image) {
234        image.data('image', index + 5);
235        preview2.append(image);
236        dropzone2.css({
237          'display': 'block',
238          'width': `calc(100% - (20% * ${images.length - 5}))`
239        })
240      })
241    }
242  })
243
244  $('.edit_item').on('submit', function(e){
245   
246    e.preventDefault();  
247    var formData = new FormData($(this).get(0));
248  
249    if (registered_images_ids.length == 0) {
250      formData.append("registered_images_ids[ids][]", 0)
251   
252    } else {
253      registered_images_ids.forEach(function(registered_image){
254        formData.append("registered_images_ids[ids][]", registered_image)
255      });
256    }
257
258  
259    if (new_image_files.length == 0) {
260      formData.append("new_images[images][]", " ")
261   
262    } else {
263      new_image_files.forEach(function(file){
264        formData.append("new_images[images][]", file)
265      });
266    }
267    $.ajax({
268      url:         '/items/' + gon.item.id,
269      type:        "PATCH",
270      data:        formData,
271      contentType: false,    
272      processData: false,      
273    })
274  });
275});