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

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

ただいまの
回答率

89.52%

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

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 117

chanken2314

score -7

解決したいこと

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

現状、背景

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

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

該当コード

  def edit
  end
  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

  def logout
  end

  def userprofile
  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
.sell_item_html
  = render "/items/sheard/icon_header"

  // 商品フォームヘッダー
#edit_item
  .item
    .item__title
      %h2.edit_title 商品の情報を入力
    = form_for @item do |f|
      .item__img
        %ul.edit_ul
          %li
            %h3 出品画像
          %li
            .required__icon 必須
        .clearfix
        %p.max_10 最大10枚までアップロードできます

        = f.fields_for :images, @item.images.first do |image|
          .item__img__dropzone.clearfix
            #preview
            -# 1〜5枚目プレビュー表示
            .item__img__dropzone__input
              = image.label :image, for: "upload-image" do
                .input-area
                  = image.file_field :image_url, id: "upload-image", class: "upload-image", 'data-image': 0

                .item__img__dropzone__input__description
                  .item__img__dropzone__input__description__text

          .item__img__dropzone2.clearfix
            #preview2
            -# 6〜10枚目プレビュー表示
            .item__img__dropzone2__input2
              = image.label :image, for: "upload-image" do
                .input-area
                  = image.file_field :image_url, id: "upload-image", class: "upload-image", 'data-image': 0
                .item__img__dropzone2__input2__description
                  .item__img__dropzone2__input2__description__text

          .sell_btn
            = f.submit "編集する", class: 'sell__about__bottom-btn submit edit_sub'
          .back_btn
            戻る

  = render "/items/sheard/icon_footer"

 

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • maisumakun

    2020/01/27 17:17

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

    キャンセル

  • chanken2314

    2020/01/27 17:38

    rails 5.0.7です

    キャンセル

回答 1

check解決した方法

0

$(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,      
    })
  });
});

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/28 20:25

    無事解決しました、
    Jsの記述で

    if (typeof gon != "undefined") {
    //gonがundefinedじゃなかったらという条件分岐でgonを指定ページのみに変えることで干渉しなくなりました。

    キャンセル

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

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