常連

注目の的

自己紹介

HTML5のrequiredについて質問があります。
以前も質問させていただいたのですが解決できなかったのでもう少しまとめてもう一度質問させていただきます。
初心者なのでよろしくお願いします。

現状tableのtd要素をクリックするとinputに変更してtd要素の中身を書き換える機能を実装したくてその際にそのinputからフォーカスが外れたらHTML5のrequiredの「必須です」みたいな吹き出しが出るようにしたいのですがどういう風に実装すればいいのかわからず詰まっています。

昨日、今日と悩んでいるのですが解決できません。
下記のコードをどのように書き換えたらいいのかご教授いただければ助かります。
よろしくおねがいします。


実際に下記のコードのような記述をしているのですが吹き出しが出てくれなくて困っています。

分かりにくい文章で申し訳ありません。


```js
$(function($){
   $('.hensyu').click(function(){
       if(!$(this).hasClass('on')){
           $(this).addClass('on');
           var txt = $(this).text();
           $(this).html('<input id="valida" name="inputreq"  class="form-control" type="text" value="'+txt+'" required />');
           var valitest = document.getElementById("valida");
           $('.hensyu > input').focus().blur(function(){
                var checkvali = document.formreq.inputreq.checkValidity();

                if(!checkvali){
                    if (!valitest.validity.valid) {
                        console.log('aasdad');
                        valitest.setCustomValidity('必須です');
                    }else{
                        valitest.setCustomValidity('');
                    }

                }
               var inputVal = $(this).val();
               if(inputVal===''){
                   inputVal = '';
               };
               $(this).parent().removeClass('on').text(inputVal);

           });
       };
   });
});
```

```HTML
<form method="post" name="formreq" action="edit">

<table id="foo-table">
	<thead>


		<tr>
			<th>ID</th>
			<th>会社名</th>
			<th>社員名</th>
			<th>社員かな名</th>
			<th>性別</th>
			<th></th>
		</tr>
	</thead>
	<tbody id="addgyou">


		<tr>
			<td>1</td>
			<td class="hensyu">テスト会社</td>
			<td class="hensyu">てすと太郎</td>
			<td class="hensyu">テストタロウ</td>
			<td class="hensyu">男</td>
			<td><button type="submit" id="tdatai" title="編集">編集</button></td>
		</tr>

	</tbody>
</table>

</form>
```

HTML5のrequired

### 前提・実現したいこと

管理ユーザーの時はvalidateを検証したくない。

僕は現在railsでカーシェアアプリを開発しています。
Reservationモデルには過去の時間を予約、編集できないようにvalidationをかけているのですが、管理ユーザーの時だけは過去の時間を編集できるようにしたいと思っています。


### 試したこと
SessionHelperに定義したcurrent_userを使いunlessしてみました。

### 該当のソースコード

```sessionsHelperrb
module SessionsHelper
  
  .
  .
  def current_user
    if (user_id = session[:user_id])
      @current_user ||= User.find_by(id: user_id)
    elsif (user_id = cookies.signed[:user_id])
      user = User.find_by(id: user_id)
      if user && user.authenticated?(:remember, cookies[:remember_token])
        log_in user
        @current_user = user
      end
    end
  end
end
```

```resevationrb
class Reservation < ApplicationRecord
  include SessionHelper

  belongs_to :user
  validates :user_id, :start_time, :end_time, :category,   presence: true
  validate  :check_date, unless: :admin_user?
  validate  :reservation_should_not_overlap

  def check_date
    if end_time < start_time || start_time < Time.current
      errors.add(:base, "Please select correct time")
    end
  end

  def reservation_should_not_overlap
    if Reservation
         .where("start_time < ?", end_time)
         .where("end_time > ?", start_time)
         .where.not(id: id).exists?
      errors.add(:base, "This time is unavailable.")
    end
  end

  def admin_use?
    current_user.admin?
  end 

end
```

### 発生している問題・エラーメッセージ

```
undefined local variable or method `session'
```


### 調べたこと

sessionメソッドはviewとcontrollerでしか使えない。


### 試したこと2

```reservationrb

  def admin_user?
    user = User.find_by(id: self.user_id)
    user.admin?
  end 
```
usre_idからユーザーを特定

### 結果
管理ユーザーのした予約はvalidateをスキップできるようになりました。(ですよね)

現在ログインしているユーザーが管理ユーザーであることを特定する方法はsession以外にありませんか？

Rails　管理ユーザーの時はvalidateを検証したくない

変数でローマ字都道府県がランダムで代入されるので日本語に置換したいです。
それぞれ日本語と英語の2要素を持った47要素の配列を用意すればよいイメージはあるのですがその先がわかりません。

入ってくるローマ字は事前にわかっているので表記揺れは気にする必要ありません。
[Chiba,tiba]などは考慮しない。Chibaだけ。

```javascript

const = [[Hokkaido, 北海道], [Aomori, 青森], [Akita, 秋田]];
```

---
ご回答ありがとうございます。質問文が不十分なままで投稿してしまいました。
Jsonなどで
```ここに言語を入力
{"postal-code":"CH","name":"Hokkaido","country":"Japan"},{"postal-code":"CH","name":"Chiba","country":"Japan",}
```
となっている時に
「Hokkaido」の部分だけ「北海道」に
「Chiba」の部分だけ「千葉」に
置き換えるということもしたくて正規表現というタグをつけました。

ローマ字表記の都道府県を日本語に変換したい

```HTML
<div id="box">
 <form id="form">
  <h1>食べたいものを選ぶ</h1>
  <div id="number1">
   <select name="food" id="seachFood">
    <option class="seach" value="なんでも" data-food="">なんでもいい</option>
    <option class="seach" value="肉" data-food="meet">肉系</option>
    <option class="seach" value="魚介" data-food="fish">魚介系</option>
    <option class="seach" value="野菜" data-food="vegi">野菜系</option>
   </select>
  </div> 
  <div id="number2">
   <input type="checkbox" name="submenu" class="submenu" data-subb="" 
checked="checked" />
指定しない
   <input type="checkbox" name="submenu" class="submenu" data-subb="drink" />
飲み放題
   <input type="checkbox" name="submenu" class="submenu" data-subb="slice" />
割引
   <input type="checkbox" name="submenu" class="submenu" data-subb="mogmog" />
食べ放題
  </div>
  <input type="button" value="検索する" id="button" />
 </form>
 <div id="eat">
  <ul id="eats">
   <li class="list" data-eat="meet" data-sub="drink">焼肉(飲み放題)</li>
   <li class="list" data-eat="meet" data-sub="slice">シュラスコ(割引)</li>
   <li class="list" data-eat="meet" data-sub="mogmog">肉寿司(食べ放題)</li>
   <li class="list" data-eat="fish" data-sub="drink">お寿司(飲み放題)</li>
   <li class="list" data-eat="fish" data-sub="slice">回転寿司(割引)</li>
   <li class="list" data-eat="fish" data-sub="mogmog">高級鮨(食べ放題)</li>
   <li class="list" data-eat="vegi" data-sub="drink">野菜天婦羅(飲み放題)</li>
   <li class="list" data-eat="vegi" data-sub="slice">野菜揚げ(割引)</li>
   <li class="list" data-eat="vegi" data-sub="mogmog">野菜盛り(食べ放題)</li>
  </ul>
 </div>
</div>
```
```CSS
*{
 margin:0;
 padding:0;
 list-style-type:none;
}
body{
 background-color:#C33;
 width:100%;
 height:100vh;
 color:#FFF;
 font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
 "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
#box{
 width:800px;
 margin:0 auto;
 text-align:center;
}
#number1{
 margin:20px 0;
 font-size:30px;
}
#eats{
 width:800px;
 margin:0 auto;
 font-size:20px;
}
.list{
 padding-top:10px;
}
.active{
 display:inline-block;
}
#number2{
 margin:10px 0;
 font-size:18px;
}
#button{
 margin-bottom:20px;
}
.hide{
 display:none;
}
```
```jQuery
jQuery(document).ready(function($){

 $('.submenu').change(function(){
  if($('.submenu:nth-child(2)').prop('checked')||
$('.submenu:nth-child(3)').prop('checked')||
$('.submenu:nth-child(4)').prop('checked')){
   $('.submenu:nth-child(1)').attr('checked',false);
  };
  if($('.submenu:nth-child(1)').prop('checked')){
   $('.submenu:nth-child(n+2):nth-child(-n+4)').attr('checked',false);
  };
 
  $('#button').click(function(){
   for(var i = 0;i < $('.submenu').length;i++){
    if($('.submenu').eq(i).prop('checked') == true){
     var check = $('.submenu').eq(i).data('subb');
    };
   };
 
   for(var i = 0;i < $('.list').length;i++){
    var listSub = $('.list').eq(i).data('sub');
    if(listEat !== check){
     $('.list').eq(i).addClass('hide');
    };
   };
  });
});
**//checkbox選択**

 $('#seachFood').change(function(){
  $('#button').click(function(){	
  
   var food = $('#seachFood option:selected').data('food');

   $('.list').removeClass('hide');
 
   if(food === ''){
    return;
   };
 
   for(var i = 0;i < $('.list').length;i++){
    var listEat = $('.list').eq(i).data('eat');
    if(listEat !== food){
     $('.list').eq(i).addClass('hide');
    };
   };
  });
 });
**//select選択**
});
```
【1つ目のやりたい事】
checkboxで作成した(ここでは見ずらいのでname,class,data属性は省略します)
4つのcheckboxのうち、1つめのcheckbox(指定しない)は最初からcheckedの状態に
なっています。
2～4つ目のcheckbox(飲み放題,割引,食べ放題)のうち1つでもcheckedになれば
1つめのcheckbox(指定しない)のcheckが外れます。ここまではできました。

その後、2～4つ目のcheckbox(飲み放題,割引,食べ放題)のうち1つでもcheckedになっている
状態で1つめのcheckbox(指定しない)をcheckedにした時に2～4つ目のcheckbox(飲み放題,割引,食べ放題)のckeckを全て外したいです。

<div id="number2">
   <input type="checkbox" />指定しない
   <input type="checkbox" />飲み放題
   <input type="checkbox" />割引
   <input type="checkbox" />食べ放題
  </div>

<試したこと>
 if($('.submenu:nth-child(2)').prop('checked')||$('.submenu:nth-child(3)').prop('checked')||$('.submenu:nth-child(4)').prop('checked')){
   $('.submenu:nth-child(1)').attr('checked',false);
  };
このコードで1つめのcheckbox(指定しない)のcheckが外すことができました。

  if($('.submenu:nth-child(1)').prop('checked')){
   $('.submenu:nth-child(n+2):nth-child(-n+4)').attr('checked',false);
  };
なので上記のコードと同じようにしましたが2～4つ目のcheckbox(飲み放題,割引,食べ放題)のckeckを外すことができませんでした。.attrを.propに変えるとcheckを外せますが二度とcheckできなくなってしまいました。

【2つ目のやりたい事】
selectで項目を選択しbuttonをクリックすると、下記の料理からdata属性のmeet,fish,vegiの3種類で絞込み、対象外は非表示にすることができたのですが、さらにそこから詳細な絞込みをできるようにしたいです。data-subで指定したdrink,slice,mogmogの3種類で絞込みをしたいのですが上手くいきません。
for(var i = 0;i < $('.submenu').length;i++){
    if($('.submenu').eq(i).prop('checked') == true){
     var check = $('.submenu').eq(i).data('subb');
    };
   };
 
   for(var i = 0;i < $('.list').length;i++){
    var listSub = $('.list').eq(i).data('sub');
    if(listEat !== check){
     $('.list').eq(i).addClass('hide');
    };
   };
上記のコードでfor文を使いif文でcheckedになっているdata属性を代入した後に
代入した値が下記のdata属性と違った場合、下記の対象外のdata属性の料理を非表示にするという
風に書きました。

<ul id="eats">
   <li class="list" data-eat="meet" data-sub="drink">焼肉(飲み放題)</li>
   <li class="list" data-eat="meet" data-sub="slice">シュラスコ(割引)</li>
   <li class="list" data-eat="meet" data-sub="mogmog">肉寿司(食べ放題)</li>
   <li class="list" data-eat="fish" data-sub="drink">お寿司(飲み放題)</li>
   <li class="list" data-eat="fish" data-sub="slice">回転寿司(割引)</li>
   <li class="list" data-eat="fish" data-sub="mogmog">高級鮨(食べ放題)</li>
   <li class="list" data-eat="vegi" data-sub="drink">野菜天婦羅(飲み放題)</li>
   <li class="list" data-eat="vegi" data-sub="slice">野菜揚げ(割引)</li>
   <li class="list" data-eat="vegi" data-sub="mogmog">野菜盛り(食べ放題)</li>
  </ul>

初心者なので調べながらやっていますが、そろそろ分からず質問してしまいました。
お手数ですが、わかる方がいたらご教授していただけると幸いです。

JQueryを使用した絞込み検索機能

### 前提・実現したいこと
![スライダーのデザイン実装](99cbfa0c09d998e0c30a036aa0fe5eed.jpeg)


現在、スライダーの実装を行っております。
その際、写真のようなスライダーのデザインがありました。
（斜線部分は画像）
このレイアウトでスライダーを実装しようとして現在はSwiper.jsを使用しているのですが、うまくいきません。

### 発生している問題・エラーメッセージ

```
エラーメッセージ
```

### 該当のソースコード
```HTML

<div class="swiper-container fadein">
　
  <ul class="swiper-wrapper">
  　
    <li class="swiper-slide">
    　<a href="#" target="_blank">
     　<img src="<?=get_template_directory_uri()?>/img/index/#">
      </a>
    </li>
　　<li class="swiper-slide">
      <a href="#" target="_blank">
       <img src="<?=get_template_directory_uri()?>/img/index/#">
      </a>
    </li>
　　<li class="swiper-slide">
     <a href="#" target="_blank">
       <img src="<?=get_template_directory_uri()?>/img/index/#">
     </a>
   </li>
　　<li class="swiper-slide">
     <a href="#" target="_blank">
       <img src="<?=get_template_directory_uri()?>/img/index/#">
     </a>
   </li>
 </ul>
 <div class="swiper-button-prev"></div>
 <div class="swiper-button-next"></div>
</div>


/////////////////////////////
//スライダー（JS）
 let mySwiper = new Swiper ('.swiper-container', {
      loop: true,
      slidesPerView: 2.5,
      spaceBetween: 10,
      centeredSlides : false,
      // width: 2150,
      // height:5000,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        //////////////////////////////////
         //type: 'bullets'
        //type: 'fraction'
        //type: 'progressbar'
        //////////////////////////////////
      },
      breakpoints: {
        992: {
          slidesPerView: 1.2,
          spaceBetween: 10,
          centeredSlides : true,
        }
      }
    });
/////////////////////////////

```

### 試したこと

slidesPerView: 2.5の値を変更したり、WidthやHeightを変更してみましたが、うまくいきません。
どなたかご教授いただけませんか？

もし、その他のプラグイン等で実装可能ならSwiperにはこだわっていません。

よろしくお願い致します。

スライダーの実装について（画像の見切れやレイアウトの調整について）

現在作成中のサイトに於いて、サイドバーに添付画像のようなスケジュールを表示する機能をつけたいと思っています。
![スケジュール](d452e02f72313b0194607b3675607c5c.png)

機能としましては
1）「20日」「1月21日」「22日」「当日」の部分がリンクとなっており、
　 クリックした日のスケジュールが下記に表示される。
2）「20日」をクリックするとバーの表示は「19日＜＜1月20日＞＞21日　　当日」となり
　 下には1月20日のスケジュールを表示(22日の方も同様)
3）「当日」クリックで本日のスケジュールに戻る

【ソース】
＜html＞
```
<div class="contentBox">
  <div class="heading flex">
    <div class="schedule">20日&lt;&lt;1月21日&gt;&gt;22日</div>
    <div class="today">当日</div>
  </div>
  <div class="text">
    ～スケジュール～
  </div>
</div>
```

＜css＞
```
.contentBox {
  border: 1px solid #f2f2f2;
  box-sizing: border-box;
  margin-bottom: 1em;
}
.contentBox a {
  color: #fff;
}
.contentBox a:hover {
  color: #ccc;
}
.heading {
  background: #86888a;
  color: #fff;
  font-weight: bold;
  padding: 10px;
  position: relative;
}
.schedule {
  box-sizing: border-box;
  float: left;
  padding-right: 5px;
  width: 80%;
  /* 3点リーダ */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today {
  min-width: 30px;
  width: 12%;
}
```

※こちらのソースはまだ仮のものであるため、この組み方では実現できない、等ありましたら組み替えることは可能です。

ざっくりとしたイメージで申し訳ないのですが、どうかお力をお貸しいただければと思います。
(他に必要な情報、不明な箇所等ありましたら追記いたしますのでお申し付けください)

サイドバーにスケジュール表示機能をつけたいと思っています。

### 前提・実現したいこと

お世話になります。

下記参考サイトをchoromeのデベロッパーツールでスマホ表示もしくは、
スマホ実機でご確認いただきますと、背景画像が横にスライドしながら画像
全体が見えるような動きをしており、その後フェードで画像が切り替わる動きを
実装したいと考えております。
※背景画像手前のロゴや文字部分などは今回含まれません。

また、参考サイトとは違い、フェードの切り替えをします要素が1ページに複数あり、横並びに並んでいる状態です。

■参考サイト
https://hoshinoya.com/

### 基本のソースコード

```html
<ul class="SlideArea">
	
	<li>
		<div class="imgBox">
			<ul class="slide-res">
				<li><img src="img/beginningImg_01.jpg"></li>
				<li><img src="img/beginningImg_02.jpg"></li>
				<li><img src="img/beginningImg_03.jpg"></li>
			</ul>
		</div>
	</li>

	<li>
		<div class="imgBox">
			<ul class="slide-res">
				<li><img src="img/beginningImg_04.jpg"></li>
				<li><img src="img/beginningImg_05.jpg"></li>
				<li><img src="img/beginningImg_06.jpg"></li>
			</ul>
		</div>
	</li>

	<li>
		<div class="imgBox">
			<ul class="slide-res">
				<li><img src="img/beginningImg_07.jpg"></li>
				<li><img src="img/beginningImg_08.jpg"></li>
				<li><img src="img/beginningImg_09.jpg"></li>
			</ul>
		</div>
	</li>

</ul>
```
```css
.SlideArea {
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.SlideArea > li {
    width: 32%;
    margin-bottom: 30px;
}

.imgBox li {
    overflow: hidden;
}

.imgBox img {
    max-width: 120%;
    position: relative;
}
```
```JAVASCript
$(function() {
	$('.slide-res').slick({
		autoplay:true,
		autoplaySpeed:5000,
		fade:true,
		speed:2000,
		arrows:false,

	});
});
```
### 試したこと

**■フェードの画像切り替え**
「slick.js」を使用して、フェードの切り替えを実装しました。

**■画像単体の横スライド**

0. css3の```animation```を使い横にスライドするように指定をしました。
0. 上記で不具合があった為、「slick.js」のイベントを使い横スライドを試みました。
### 試したソースコード
**css3の```animation```を使用**
```css
@keyframes slide {
	0% {
		transform: translateX(0px);
		-moz-transform: translateX(0px);
		-webkit-transform: translateX(0px);
		-o-transform: translateX(0px);
		-ms-transform: translateX(0px);
	}

	100% {
		transform: translateX(-50px);
		-moz-transform: translateX(-50px);
		-webkit-transform: translateX(-50px);
		-o-transform: translateX(-50px);
		-ms-transform: translateX(-50px);	
	}
}

.slick-active img {
    animation-name: slide;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    position: relative;
}
```
**「slick.js」のイベントを使用**
```JAVASCript
$(function() {
	$('.slide-res').slick({
		autoplay:true,
		autoplaySpeed:5000,
		fade:true,
		speed:2000,
		arrows:false,

	});
		
	$('.slide-res').on('beforeChange',function(){
		$('.slide-res li img').animate({left: '0px'}, 500, 'linear');
	}); 

	$('.slide-res').on('afterChange',function(){
		$('.slide-res li img').animate({left: '-25px'}, 1500, 'linear');
	});
	
});
```

### 発生している問題・エラーメッセージ
**■css3を使用した際の不具合**
0. IE、FireFoｘで画像単体のスライドがカクつきスムーズな動きではありませんでした。
0. スライド表示されている要素に「slick.js」によって付与されるクラスが付いたら画像単体のスライドが始まるようにした為、フェード切り替え時にクラスがハズレ、
画像単体のスライドが元の状態に戻るためフェード切り替えの度にガクッと動いていました。

**■「slick.js」のイベントを使った際の不具合**
0. IE、FireFoｘで画像単体のスライドがカクつきスムーズな動きではありませんでした。
0. イベントにスライドが移動する前```beforeChange```と
スライドが完了した後```afterChange```がありましたので、jQueryの```animate```を使って、画像単体のスライドを試みましたが、フェード切り替えが行われた時点でイベントが発生しますので、css3の時と同様に画像単体のスライドが元の位置に戻って、フェード切り替えが行われており、フェード切り替え時にガクッとした動きが出てしまいました。

### 補足情報（FW/ツールのバージョンなど）

css3も「slick.js」も基本同じ不具合が出ております。
参考サイトと同じ方法で出来れば一番良いのですが、何を使用しているのかソースを拝見しても理解が出来ず今回の方法で対応を試みましたがうまく行かない状況です。

希望としましては、参考サイトと同じ方法での実装をしたいと思いますが、その他方法でも問題御座いません。
ご面倒では御座いますが、是非お力添えを頂けますと幸いでございます。
宜しくお願い致します。

フェードでスライドと中の画像を横移動の方法

javascriptで符号付きの整数が扱えません。
具体的にはarduinoからsigned intで作成したHEXを送信したものをnode-redで扱いたいのですが、
マイナスの符号がついたものを送信したときにうまく変換っできません。
具体的には、parseIntを使って変換しているのですが、符号なしと判断してしまうようです。
符号付きの整数として変換する方法があれば教えていただけませんか？

javascriptでの符号付き整数の扱い方

#前提・実現したいこと

Rails 5 でユーザー投稿型サービスを開発しています。
投稿作成画面で、ユーザーが選択した画像を自由にトリミングした上で投稿できるようにしたいです。
投稿された画像はCloudinaryを使用してアップされ、AWSに保存されるようになっています。

#発生している問題
Cropper.jsを使用して、投稿作成のビューに、選択した画像を表示させ、自由にトリミング範囲を選択できるところまではうまくいったのですが、そこからトリミングされた画像データをどうやってコントローラに渡せばいいのか分からず悩んでいます。

#該当のソースコード
ビュー
```Ruby
#new.html.erb

<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  </head>


<div class="main posts-new">
  <div class="container">

  <h1 class="form-heading">新規投稿</h1>

    <form>
        <div class="form">
          <div class="form-body">

              <% @post.errors.full_messages.each do |message| %>
                <div class="form-error">
                  <%= message %>
                </div>
              <% end %>

              <%= form_for @post, :url => { :controller => :posts, :action => :create } do |f|%>
                <%= f.label("アイテム画像（必須）") %>
                <%= f.file_field :image_name, multiple: true , :id => "upload"%>
                <div class="preview"><img id="crop_img" /></div>
                <div class="clear_float"></div>

                <%= f.hidden_field :designer_id, :value => @current_user.id %>
                <div class="clear_float"></div>

                <%= f.label("コメント") %>
                <%= f.text_area :detail %>

                <%= f.submit("投稿", :id => "submit")  %>
              <% end %>

          </div>
        </div>
    </form>
  </div>

  <%= stylesheet_link_tag    'cropper.min.css' %>
  <%= javascript_include_tag 'cropper.min.js' %>
  <%= javascript_include_tag 'crop_image.js' %>
</div>

```
JavaScript
```javascript
//crop_image.js

$(function(){
  $("#upload").change(function(e) {
    var file = e.target.files[0],
        reader = new FileReader(),
        $preview = $(".preview");
        t = this;

    if(file.type.indexOf("image") < 0){
      return false;
    }

      reader.onload = (function(file) {
      return function(e) {
          $preview.empty();
  
          $preview.append($('<img>').attr({
                  src: e.target.result,
                  id: "crop_img",
                  title: file.name
              }));

              $('#crop_img').cropper({
                });
      };
    })(file);

    reader.readAsDataURL(file);
  });
});

$(function(){
  $('#submit').on('click', function(){

   //ボタンがクリックされた時に、トリミングされた画像をControllerに渡す処理を記述したい

});
});

```

Controller

```Ruby
class PostsController < ApplicationController
  before_action :authenticate_user, {only: [:comment]}
  before_action :ensure_correct_user, {only: [:edit, :update, :destroy]}
  before_action :authenticate_designer, {only: [:new, :create, :edit, :update, :destroy]}

 ...
  def create
    post = params.require(:post).permit(
      :designer_id,
      {image_name: []},
      :detail
    )
    @post = Post.new(post)
    if @post.save
      flash[:notice]="投稿しました"
      redirect_to("/")
      NotificationMailer.post_email(@current_user, @post).deliver
    else
      render("posts/new")
    end
  end
...

end

```

#使用している環境
Rails 5.1.5
carrierwaves 1.2.2
Cropper.js

[Rails5] Cropper.jsを使ってユーザーが画像を自由にトリミング・アップロードできるようにしたい

親画面
```js
	<script type="text/javascript">
	function disp(url,windowname,width,height) {
	var features="location=no, menubar=no, status=yes, scrollbars=yes, resizable=yes, toolbar=no";
	if (width) {
	if (window.screen.width > width)
	features+=", left="+(window.screen.width-width)/8;
	else width=window.screen.width;
	features+=", width="+width;
	}
	if (height) {
	if (window.screen.height > height)
	features+=", top="+(window.screen.height-height)/8;
	else height=window.screen.height;
	features+=", height="+height;
	}
	window.open(url, "サブ検索画面", "width=600,height=600");
	}
	</script>
```
```html
<input name="SearchScreen" type="button" value="検索" onClick='disp("/SubScreen1.php")' />
	<input id="code1" type="text" size="20" value="" />
	<input id="code2" type="text" size="15" vallue="" />
	<input id="code3" type="text" value="" />
```

以下、子画面
```php
<?php

//データベース接続・・省略

if ($mysqli->connect_error){
	echo $mysqli->connect_error;
	exit();
}else{
	$mysqli->set_charset("utf-8");
}

//FROMの後にＤＢ名
$sql = "SELECT * FROM `management` ORDER BY `management`.`manage_kana` ASC";

$result = $mysqli -> query($sql);

//クエリー失敗
if(!$result) {
	echo $mysqli->error;
	exit();
}

//レコード件数
$row_count = $result->num_rows;

//連想配列で取得
while($row = $result->fetch_array(MYSQLI_ASSOC)){
	$rows[] = $row;
}

//結果セットを解放
$result->free();

// データベース切断
$mysqli->close();

?>

```
```js

<script type="text/javascript">

</script>
```
```html
<table class="table-design" style="font-size: 10pt; ">
 <thead>
   <tr>
		 <th></th>
		 <th>選択</th>
     <th>人物名</th>
     <th>ＴＥＬ</th>
		 <th>address</th>
   </tr>
 </thead>
<tbody>
<?php
foreach($rows as $row){
		echo '<tr>';
		echo '<td><center>■</center></td>';
		echo '<input id="searchCode1" type="hidden" value="',$row['aaa001'],'">';
		echo '<td><input type="submit" name="select" value="選択" onClick="clickFire()"/></td>';
		echo '<td>', $row['aaa001'], '</td>';
		echo '<input id="searchCode2" type="hidden" value="',$row['aaa_tel1'],'-',$row['aaa_tel2'],'-',$row['aaa_tel3'],'">';
		echo '<td>', $row['aaa_tel1'], '-', $row['aaa_tel2'], '-', $row['aaa_tel3'], '</td>';
		echo '<input id="searchCode3" type="hidden" value="',$row['aaa_fax1'],'-',$row['aaa_fax2'],'-',$row['aaa_fax3'],'">';
		echo '<td>', $row['aaa_fax1'], '-', $row['aaa_fax2'], '-', $row['aaa_fax3'], '</td>';
		echo '<input id="mb_id" type="hidden" value="',$row['aaa_id'],'">';
		echo '</tr>';
	}
?>
</tbody>
</table>
```

このコードではどれを選択してもＤＢ内の最初のカラムしか表示されず
それぞれを正しく選択・表示させるにはどう記述するべきなのでしょうか？

子ウィンドウで選択して親ウィンドウに表示させたい

jQuery(ver3系)を用いて、外部ファイルを読み込むコードを次のように書きました。

```:js

(function($){
    'use strict';

    const LIST_PATH_NEW = "./data/list.json";
    const LIST_PATH_OLD = "./list.json";

    function loadJson(jsonPath)
    {
        var defer = $.Deferred();

        $.ajax({
            type : "GET",
            url : jsonPath,
            dataType: "json",
            success: defer.resolve,
            error: defer.reject
        });

        return defer.promise();
    }

    function getList(listPath)
    {
        return loadJson(listPath);
    }

    function getNewList()
    {
        return getList(LIST_PATH_NEW);
    }

    function getOldList()
    {
        return getList(LIST_PATH_OLD);
    }

    $(function(){
        var newList = getNewList();
        var oldList = getOldList();

        newList.done(function(data){
            var myList = data.list;
            console.log(myList);
        });

        oldList.done(function(data){
            var myList = data.list;
            console.log(myList);
        });

        // ★ ここらへんで array_merge みたいなことがしたいです ★

    });

})(jQuery);
```

それぞれのAJAXから返ってくるデータは次のような形です。(簡略化しています)

```:json

{
  "list": [
    {
      "image": "aaa.jpeg",
      "title": "新しいやつ",
      "date": "2019-03-17",
    },
  ]
}
```

各オブジェクトのプロパティ名は両方とも同じです。
データの総数は古いほうが500件あまりで固定、新しいほうは5件あまりで今後増大していきます。

過去のデータと、新しいデータを一つのオブジェクトデータにマージし、
それをもとにフロントで色々する、といった感じです。

これら2つのデータは別々の管理システムから出力されており、
データのインポート／エクスポートの仕組みもないため、元ファイル自体をマージするということはできません。
（直接編集したところで次にシステムから出力された時に編集内容が上書きされる）

PHPで言うところの `array_merge` みたいなことをして、一つのオブジェクトデータにしたいのですが、
どのようにすれば実現できますでしょうか。

皆様お知恵を貸してください。よろしくお願いいたします。

2つのJSONファイルをAJAXで読み込んで、一つにobjectにマージする方法を教えてください

関数を別で定義したいのですが、定義した際のもともとあった.doneや.failをどのようにすれば良いかわかりません。

```js　クリックイベントが２０行にもなっているコード
コード
$(function () {
          var preSearchword = ''; //空の文字列を入れてあります
          var pageNum = 1; //変数に１を代入
          $('.search__btn').on('click', function () { //検索ボタンがクリックされた時
            var searchword = $('.search__text__input').val(); //変数にバリューを取得した値を代入 文字を入力する部分
            if (preSearchword === searchword) { //if文でpreSearchwordとsearchwordが厳密に等しい場合の式を作り
              //console.log(pageNum)
              pageNum++; //１回目の検索結果と2回目クリックされる時の検索結果が同じ場合、１ページずつプラスしていきます
            } else { //そうでない場合
              pageNum = 1; //ページ数を１に戻します　最初のクリックの際は、falseを返します
              $('ul').empty(); //同時に下に表示していたulの子要素をempty()で消します
            }
            preSearchword = searchword; //preSearchwordにsearchwordを入れます
            // console.log(searchword);
            // console.log(searchword);
            $.ajax({
              url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522',
              type: 'GET',
              datatype: 'json',
              data: {
                keyword: searchword, //バリューを取得した変数を、dataのオブジェクトの中のvalueに入れます
                booksGenreId: '001',
                hits: 20, //検索でヒットした件数を指定
                page: pageNum //ページ数
              },
            })
            .done(function (data) { //doneで処理が完了した時
              console.log(data);
              //検索結果が0件の場合
              if (data.hits === 0) { //if文で、ヒット件数が0と厳密に等しい場合
                $('ul.lists').prepend('<p class="message">検索結果が見つかりませんでした<br>別のキーワードで検索してください</p>'); //listというクラスを持つulの中に、prependでクラスを入れ、pタグを表示させます
              }
              //通信が成功した時
              var booklist = ''; //変数に空の文字列を代入
              $.each(data.Items,function(index,item){ //$.eachで繰り返し処理を行い、　itemは、現在のアクセスのDOM（htmlなどを自由に操作する仕組み）を意味しています。
                // console.log(item);
                booklist += '<li class="lists__item">' + index + '<div class="lists__item__inner">' + '<a href="' + // booklistという変数に必要なクラスを加算代入しつつ、全ての要素に対して固有パラメータを入れます
                item.Item.itemUrl + '"class="lists__item__link" target="_blank">' + '<img src="' + item.Item
                .largeImageUrl + '" class="lists__item__img" alt="' + item.Item.title + '">' +
                '<p class="lists__item__detail">作品名：　' + item.Item.title + '</p>' + //itemは、関数の第二引数,Itemは、楽天の個別商品のバリュー,三つ目は、固有パラメーター
                '<p class="lists__item__detail">作者　：　' + item.Item.author + '</p>' +
                '<p class="lists__item__detail">出版社：　' + item.Item.publisherName + '</p>' + '</a>' +
                '</div>' + '</li>';
              })
              $('ul.lists').prepend(booklist); //listというクラスを持つulの中にprepend(変数)とし、入れます
            })
            // 通信が失敗した時
            .fail(function () { //通信失敗時は、fail文を使います
              $('.lists').after('<div class="error"></div>') //errorという新たなクラスをlistsの後ろ(中)に挿入します
              error = $('.error'); //変数にクラスを代入
              error.html('<p class="message">データ通信できませんでした<br>接続を確認してください</p>'); //変数に対して、htmlで書き換えて、文字を入力しないで検索をかけた場合と通信がうまくいかなかった時にエラー文を表示させます
            })
          });
        });

```
上記のコードを関数を定義づけしdoneやfail毎にまとめたいです。

```修正中のjs
コード
$(function () {
          var preSearchword = ''; //空の文字列を入れてあります
          var pageNum = 1; //変数に１を代入
          $('.search__btn').on('click', function () { //検索ボタンがクリックされた時
            test();
          });
          $('.search__btn').on('click', function () { //検索ボタンがクリックされた時
            done();
          });
          $('.search__btn').on('click', function () { //検索ボタンがクリックされた時
            fail();
          });
          function test() {
            var searchword = $('.search__text__input').val(); //変数にバリューを取得した値を代入 文字を入力する部分
            if (preSearchword === searchword) { //if文でpreSearchwordとsearchwordが厳密に等しい場合の式を作り
              //console.log(pageNum)
              pageNum++; //１回目の検索結果と2回目クリックされる時の検索結果が同じ場合、１ページずつプラスしていきます
            } else { //そうでない場合
              pageNum = 1; //ページ数を１に戻します　最初のクリックの際は、falseを返します
              $('ul').empty(); //同時に下に表示していたulの子要素をempty()で消します
            }
            preSearchword = searchword; //preSearchwordにsearchwordを入れます
            // console.log(searchword);
            // console.log(searchword);
          }
            $.ajax({
              url: 'https://app.rakuten.co.jp/services/api/BooksTotal/Search/20130522',
              type: 'GET',
              datatype: 'json',
              data: {
                keyword: searchword, //バリューを取得した変数を、dataのオブジェクトの中のvalueに入れます
  
                booksGenreId: '001',
                hits: 20, //検索でヒットした件数を指定
                page: pageNum //ページ数
              },
            }).done(done).fail(fail);
            if (data.hits === 0) { //if文で、ヒット件数が0と厳密に等しい場合
              $('ul.lists').prepend('<p class="message">検索結果が見つかりませんでした<br>別のキーワードで検索してください</p>'); //listというクラスを持つulの中に、prependでクラスを入れ、pタグを表示させます
            }
            function done(data) {
              console.log(data);
              //検索結果が0件の場合
              
              //通信が成功した時
              var booklist = ''; //変数に空の文字列を代入
              $.each(data.Items,function(index,item){ //$.eachで繰り返し処理を行い、　itemは、現在のアクセスのDOM（htmlなどを自由に操作する仕組み）を意味しています。
                // console.log(item);
                booklist += '<li class="lists__item">' + index + '<div class="lists__item__inner">' + '<a href="' + // booklistという変数に必要なクラスを加算代入しつつ、全ての要素に対して固有パラメータを入れます
                item.Item.itemUrl + '"class="lists__item__link" target="_blank">' + '<img src="' + item.Item
                .largeImageUrl + '" class="lists__item__img" alt="' + item.Item.title + '">' +
                '<p class="lists__item__detail">作品名：　' + item.Item.title + '</p>' + //itemは、関数の第二引数,Itemは、楽天の個別商品のバリュー,三つ目は、固有パラメーター
                '<p class="lists__item__detail">作者　：　' + item.Item.author + '</p>' +
                '<p class="lists__item__detail">出版社：　' + item.Item.publisherName + '</p>' + '</a>' +
                '</div>' + '</li>';
              })
              $('ul.lists').prepend(booklist); //listというクラスを持つulの中にprepend(変数)とし、入れます
            }
            // 通信が失敗した時
            function fail(data) {
              $('.lists').after('<div class="error"></div>') //errorという新たなクラスをlistsの後ろ(中)に挿入します
              error = $('.error'); //変数にクラスを代入
              error.html('<p class="message">データ通信できませんでした<br>接続を確認してください</p>'); //変数に対して、htmlで書き換えて、文字を入力しないで検索をかけた場合と通信がうまくいかなかった時にエラー文を表示させます
            }
        });
    </script>
```

クリックイベントが起きた処理ごとにまとめたい

### 前提・実現したいこと
googleマップに複数の円を描画しようとしています。
 htmlはmapを表示させるだけ、
 javascriptで地図のセンターや円のプロパティを記述。(座標は除く)
 jsonに座標だけ記述するようにしたいと考えています。
(座標を別ファイルにしたいのは、量が多いのと中身を変えたファイルを読ませて別の円を描画をするためです)

ちなみにこの3ファイルを同一ディレクトリに入れてローカルで操作しようと考えています。

### 質問事項
・javascriptのファイルからjsonのファイルを参照するにはjsにどのように記述すればよいでしょうか？
・外部のjsonファイルから読み込んだ変数をfor文で回すときはどのように記述すればよいのでしょうか？
  (繰り返し処理はfor文くらいしか思いつかないのですが適切でしょうか？)
・jsonから座標情報はどのようにしてcenter:  に渡せばよいのでしょうか？
・そもそもローカルで参照するのは不可能なのでしょうか？ [この記事は読みました。](https://qiita.com/nissuk/items/1ede2953a8661dc59214)(回避する設定に変更しました)

### 該当のソースコード
javascript
```ここに言語名を入力
function initMap() {
    // Create the map.
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 5,
      center: {lat: xx.xx, lng: yy.yy},
      mapTypeId: 'roadmap'
    });

    for (var  in      ) {         //繰り返しの方法

      var cityCircle = new google.maps.Circle({
        strokeColor: '#FF0000',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#FF0000',
        fillOpacity: 0.35,
        map: map,
        center: 　　　　　　　,　　　//座標の渡し方
        radius: 100000,
      });
    }



```
json

```
[
 {"lat":aa.aa,"lng": bb.bb},
 {"lat":cc.cc,"lng": dd.dd},
 {"lat":ee.ee,"lng": ff.ff},
]


```

### 試したこと
[https://teratail.com/questions/72744#reply-114851](https://teratail.com/questions/72744#reply-114851)
この記事は読みましたが、"webページを表示したタイミング「のみ」"というのが今回の場合に該当するのかどうかが判別できませんでした。

[https://www.sejuku.net/blog/21738#forEach-3](https://www.sejuku.net/blog/21738#forEach-3)
[https://qiita.com/1mada/items/9a48f7053a6016b5fd5a](https://qiita.com/1mada/items/9a48f7053a6016b5fd5a)

jsファイルからjsonを参照する方法

human.jsonファイルを読み込み、体重（taiju）の軽い順（昇順）に並びかえてjsonファイルで出力したいのですが、ここからどうしたら良いでしょうか？

```ruby
require 'json'

File.open("human.json") do |list|
 list.read.split('\n').each do |i|
 end↲
end↲
```

 #human.json
[{"namae":"taro","sincho":"177","taiju":"67"},↲
 {"namae":"shinsuke","sincho":"180","taiju":"90"},↲
 {"namae":"sadao","sincho":"165","taiju":"58"}]

読み込み→並び替え→出力するには？

ここであるfetchを使った文を書きます。
```ここに言語を入力
function getLocation(city) {
        	fetch(`https://cors-anywhere.herokuapp.com/www.metaweather.com/api/location/search/?query=${city}`)
        	.then(result => {
        		return result.json();
        	})
        	.then(data => {
        		console.log(data[0]);
        	})
        }

        function getWeather(woeId, year, mo, day) {
	        fetch(`https://cors-anywhere.herokuapp.com/www.metaweather.com/api/location/${woeId}/${year}/${mo}/${day}/`)
	        .then(result => {
	        	return result.json();
	        })
	        .then(data => {
	        	// const today = data.consolidated_weather[0];
	        	console.log(`Temperatures in Tokyo stay between ${data[0].min_temp} and ${data[0].max_temp}.`);

	        })
	        .catch(error => console.log(error));
        }
        getLocation('tok');//オブジェクトを表記
        getWeather(1118370, 2019, 3, 15);//オブジェクトのwoeidプロパティの数値を最初のアーギュメントに代入。
```

これは東京の気温を表記する文ですが、これを前置きとして、ここで質問ですが。getWeather(1118370, この部分を　getWeather(tokyo.woeid, みたいな感じに持って行きたいのですが、どこをどのようにすれば良いのでしょうか。

JavaScriptのfetch文について

Railsでjqueryを使ってajaxで更新したい。

初心者です。Railsでcreateし、updateはajaxでしたいのですが、上手にpostされません。

[routes.rb]
```ここに言語を入力
resources :temps, only: [:top, :index, :new, :create, :edit, :update]

```
[temp.js]
```ここに言語を入力
	$(document).ready(function(){
	$('div.index_menu_imgs').draggable();

	$('div#img_00.place').droppable({
		accept : 'div.index_menu_imgs:hover',
		drop : function(event, ui){
		var place = $('div.place#img_00').attr('id');
		var img_ad = ui.draggable.prop("outerHTML").replace(/&quot;/g, "'");
		var img_ad2 =	$(img_ad).css("background-image");
		var img_ad3 = img_ad2.replace('url(', '').replace(')', '').replace(/\"/gi, "");
			alert ("ドロップ！");
			$.ajax({
				url:'edit',
				type: 'POST',
				data: {
					'img_ad' :$('img_ad3').val(),
					'place':$('place').val()
				},
				dataType: "html"
			})
//成功時
			.done( (data) => {
				console.log("成功！");
			})
//失敗時
			.fail((data) =>{
				console.log("失敗！");
			});
		}
		});
});
```

[temps_controller.rb]
```ここに言語を入力
	def edit
		@img = Img.find(params[:id], params[:img_ad], params[:place])
		@imgs = Img.all
	end

	def update
		@img = Img.find(params[:id])
		img.update(img_update_params)
	end

	private
	def img_update_params
		params.require(:img_ad).permit(:place).merge(user_id: current_user.id)
	end
```

ビューにはドラックアンドドロップでDBの画像を繰り返しで表示していて、指定した箇所にドロップした時点でjqueryのajaxでpostする仕組みにしたいのです。
送信する内容は、jqueryにもある通り、urlとplaceという2つの値です。

色々なサイトを参考に見様見真似で組み立ててみたのですが、

```ここに言語を入力
Routing Error
No route matches [POST] "/temps/1/edit"
```

と表示されてしまいます。

トライした事：
(1)jqueryの関数を独立させてtrial.js.erbを作り、ソコにedit部分を入れて、updateとpost機能を完全に別にしてみた(違うエラーになるかなと思ったのですが、同じエラー)

(2)routes.rbを色々変更
post 'temps/:id' => 'temps#trial'
patch 'temps/:id' => 'temps#trial'
(trial.js.erbを作ってた時のルーティング。でもエラーは同じ)

(3)temps.jsのポスト先URLを色々変更
url:'/:id/edit',
url:'temps/:id/edit',
(でもエラーは同じ内容)

(4)temps.jsのデータタイプを入れたり消したり。
何も変化ナッシング。

何かとっても根本的なところで致命的な何かをしでかしているのか？全く分かっていないのか。。。
何かヒントを頂けると嬉しいです。

Railsでjqueryでajaxで更新したい

非同期のいいね機能を jQuery を使って実装しました。
サーバーサイドは PHP(Laravel) です。 

Twitterの「いいね」のように、非同期で処理してボタンが変わる仕組みを実装しました。

**発生した問題**
- 時々エラーが出て動かなくなる
- HTMLのクラス名を innerHTML で動的生成している部分など、キュリティ的に問題があるかもしれない


コメントに対して「いいね」できる仕組みです。
ボタンの変化は、Font Awesome のアイコン切り替えで表現します。
つまりHTMLの要素(クラス名)を動的に変化させます。

```HTML
<i class="far fa-heart"></i>　
<i class="fas fa-heart"></i>　
```
切り替えるのは far と fas の部分だけです。

また「いいね」された数も表示します。

PHP側からビューに渡すものは以下になります。

<画面表示時>
- ユーザーが既に「いいね」しているかを保持した配列　

<ボタンが押された時(JSONで渡す)>
- Font Awesome のクラス名(ボタンを変化させるため)
- 更新された「いいね」の数

ほぼ期待通りの動作をしますが、時々以下のエラーで動かなくなります。
Chromeではぼエラーはでませんが、Edgeだと10回に1回ほど出ます。

```
Uncaught SyntaxError: Unexpected end of JSON input　// Chrome 
JSON.parse Error: Unexpected input　// Edge
```
JSON.parse() に JSON以外の値を渡していることが原因だと思います。
エラー時に、Ajaxでサーバーから返された値を console.log してみると、
空文字でした。しかしPHPからはjson_encodeした値しか返していないので、なぜ空文字になるのかわかりません。

以下実装したコードです。

コメント一覧をforeachで回し、その中にボタンを設置します。
POST時、コメントIDを判別するのにカスタムデータ属性を利用します。

```PHP
// @foreach($comments as $comment) の中

@if(is_null($already[$comment->id]))  //まだいいねしてなければ
  <button type="button" class="fav" data-fav="{{$comment->id}}">
      <i class="far fa-heart"></i> 
      {{$comment->cnt}} //いいね数
  </button>
@else  //既にいいねしていれば
  <button type="button" class="fav" data-fav="{{$comment->id}}">
      <i class="fas fa-heart"></i>  
      {{$comment->cnt}}  //いいね数
  </button>
@endif
```
```JavaScript
//「いいね」したコメントのIDを保持
let comment_id = 0;

//0以上の自然数かチェックする関数
const isNum = function(v) 
{
 return ((typeof v === 'number') && (isFinite(v))　&& v >= 0);
};

//「いいね」ボタンがクリックされた時
$('.fav').on('click', function(event) {
    event.target.disabled = true; //処理が終了するまでボタンを無効化
    event.preventDefault();
    comment_id = event.target.dataset.fav;

    $.ajax({
      type: 'POST',
      url: '',
      dataType: 'text',
      data: {
        comment_id: comment_id,
      }
    }).done(function (data) { 
       //console.log(data);　{"name":"far","cnt":13} エラー時は空文字
      let d = JSON.parse(data);
      if((d.name==='fas' || d.name==='far') && isNum(d.cnt))
      {
         event.target.innerHTML =  
          `<i class=\"${d.name} fa-heart\"></i> ${d.cnt}`;
      }
      event.target.disabled = false;  //ボタンを有効化
    });
});
```
「いいね」がPOSTされた際のアクション
```PHP
$comment_id = $request->input('comment_id');
/*
    comment_id が自分自身のコメントでないことを確認
    データベース更新処理
    $name : 新たな Font Awesomeのクラス名(far, fas)
    $cnt : 「いいね」総数
*/
if(($name==='far' || $name==='fas') && is_int($cnt) && $cnt >= 0)
{
   return json_encode(["name" => $name, "cnt" => $cnt]);
}
//正常でない場合でもJSON形式で返す
return json_encode(['name' => 'error', 'cnt' => -1]);
```
CSRF対策

```JavaScript
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
```

とりあえず動くように実装したので、雑なやり方だと思います。

質問をまとめると
- 時々空文字を返してエラーになるのを防ぐにはどうすべきか。

- セキュリティ的に問題はないか。
(クラス名の動的生成、カスタムデータによるid判別、AjaxでPOSTする値の偽装対策等)

その他「そのやり方はよくない」等あればご指摘ください。

ご回答よろしくお願いします。

非同期いいね実装　HTMLの切り替えとJSONの受け渡しについて

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
今、画像を四角の枠内にアップロードし、その画像をドラッグ&ドロップで枠内のみ自由に移動できるという機能を作ろうとしています。
下記コードで大まかな機能は実装できているのですが、
例えば、
画像Aをアップロードしたあとに、もう一枚画像Bをアップロードすると、
すでにアップロードされている画像Aが、画像Bに置き換わってしまいます。
機能的には、画像Aは残りつつ、画像Bが新たにアップロードされるということをしたいです。

調べてみたのですが、見つからず困っております。
参考サイト、またはコードをご教示願えますでしょうか。

宜しくお願い致します。

### 該当のソースコード

```ここに言語名を入力
<-- js -->
$(function() {
	var file = document.querySelector('#getphoto');

	file.onchange = function (){
		var fileList = file.files;
		if (file.files[0] == null) {
			document.querySelector('#preview').src = "";
		} else {
			//読み込み
			var reader = new FileReader();
			reader.readAsDataURL(fileList[0]);
			// ファイル複数個取得

			//読み込み後
			reader.onload = function  () {
				document.querySelector('#preview').src = reader.result;
				$('#preview').css("display", "inline-block");
			};
		};
	};

	$("#preview").draggable({
		containment: "parent",
		drag: function(e, ui) {
			$(".x_offset").text(ui.offset.left);
			$(".y_offset").text(ui.offset.top);
		}
	});

});

---------------------------
<-- html -->
<%= javascript_include_tag "corde.js" %>

<div class="corde-visual">
</div>

<h1>コーデ登録</h1>

	<div class="image_box">
		<img src="" id="preview" class="ui-draggable ui-draggable-handle" style="position: relative;">
	</div>

	<%= form_for(@corde_new, url: new_corde_path) do |f| %>

		<input type="image" name="corde[image]" id="preview" />
		<input type="file" name="attachment" id="getphoto">

		<label for="name">▷コーデ名</label>
		<input type="text" name="corde[corde_name]" id="corde_corde_name" />

		<label for="name">▷シーズン</label>
		<input type="radio" name="corde[season]"　value="春" id="corde_season" />春
		<input type="radio" name="corde[season]"　value="夏" id="corde_season" />夏
		<input type="radio" name="corde[season]"　value="秋" id="corde_season" />秋
		<input type="radio" name="corde[season]"　value="冬" id="corde_season" />冬
		<%= f.submit'保存' %>
	<% end %>

```

画像を複数別々にアップロードする方法

「ハンバーガーメニューをページ内リンクで実装すると閉じない」という質問は何度かあったので参考にしてみたのですが、改善されず困っています。

トグルメニュー内をクリックすると、一番上に上がって適合するclassのリストだけ表示するというものを作っていますが、リストの表示、上に上がるという作業はできたもののメニューが閉じません。

メニューを閉じる方法はありますでしょうか？

```html

<ul class="sidemenu" id="list">
    <li class="ALL tagA">
        タグAの中身
    </li>
    <li class="ALL tagB">
        タグBの中身
    </li>
    <li class="ALL tagC">
        タグCの中身
    </li>
</ul>

<nav class="global-nav">
<ul class="sidemenu global-nav__list" id="sidenavi_inner">
    <li class="global-nav__item">
        <span data-filter="ALL">全て表示</span>
        <ul>
            <li><span data-filter="tagA">タグA</span></li>
        </ul>
        <ul class="subMenu">
            <li><span data-filter="tagB">タグB</span></li>
            <li><span data-filter="tagC">タグC</span></li>
        </ul>
    </li>
</ul>
</nav>

<div class="hamburger" id="js-hamburger">
    <label id="nav-open" for="nav-input"><span class="nav-open1">開く</span></label>
</div>

<div class="black-bg" id="js-black-bg"></div>
```
```css
    .global-nav {
    position: fixed;
    left: -80vw;
    top: 0;
    width: 80vw;
    height: 100vh;
    padding-top: 40px;
    background-color: #f3f3f3;
    transition: all .6s;
    z-index: 9999;
    overflow-y: auto;
  }
  .hamburger {
	  position: fixed;
	  right: 5px;
	  bottom: 10px;
	  z-index: 300;
	  width: 50px;
      height: 50px;
      background-color:#CCC;
	  display: block;
	  cursor: pointer;
  }
  .global-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
  }
  .global-nav__item {
	text-align: center;
	padding: 0 14px;
  }
  .global-nav__item a {
	display: block;
	padding: 8px 0;
	border-bottom: 1px solid #eee;
	text-decoration: none;
	color: #111;
  }
  .global-nav__item a:hover {
	background-color: #eee;
  }
  .hamburger__line {
	  width: 50px;
	  height: 50px;
	  display: block;
	  background: url(https://●●.png);
	  background-repeat: no-repeat;
	  background-size: 50px;
	  cursor: pointer;
  }
  
  .black-bg {
	position: fixed;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: 8000;
	background-color: #000;
	opacity: 0;
	visibility: hidden;
	transition: all .6s;
	cursor: pointer;
  }
  /* 表示された時用のCSS */
  .nav-open .global-nav {
	left: 0;
  }
  .nav-open .black-bg {
	opacity: .8;
	visibility: visible;
  }
```
```javasript
var findspan = $('#sidenavi_inner').find('span');
//ハンバーガーメニュー表示
function toggleNav() {
  var body = document.body;
  var hamburger = document.getElementById('js-hamburger');
  var blackBg = document.getElementById('js-black-bg');

  hamburger.addEventListener('click', function() {
    body.classList.toggle('nav-open');
  });
  blackBg.addEventListener('click', function() {
    body.classList.remove('nav-open');
  });
}
toggleNav();
//クリックされたタグと同じタグが付いた記事だけ表示
$(findspan).click(function () {
    var image = $(this).attr("data-filter");
    $("#list li").each(function () {
        $(this).animate({
            "opacity": 4
        }, 300, function () {
            $(this).hide();
            if ($(this).hasClass(image) || image == "ALL") {
                $(this).show();
                $(this).animate({
                    "opacity": 1
                }, 300);
            }
        });
    });
    //毎回topに上げる
    var position = $('#recommendPage').offset().top;
    $('html,body').scrollTop(position + -60);
    return false;

    var blackBg = document.getElementById('js-black-bg');

    body.classList.toggle('nav-open');
});
```

トグルメニューと絞り込みを使った時メニューが閉じない

slickプラグインを使用したスライドショーを実装したい　また、jQuery、slick自体の導入が上手くいっていないように感じるため解決策が欲しいです。


### 発生している問題・エラーメッセージ


スライドショーが実装されず、画像が上下に表示されただけの状態です。

head内のjQuery、slickへのリンクがおかしいのか、それともjsファイル内の記述がおかしいのか分からず困っています。


エラーメッセージ
```

### 該当のソースコード

```ここに言語名を入力
ソースコード![イメージ説明](a04d5b183a1ad9ba445c9d7cefeb2c2e.png)
```

### 試したこと

ここに問題に対して試したことを記載してください。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。