Go langでfwを使わずにcrudのappを作成しました 3


#jqueryでput methodを実装

htmlでformを使ったり、deleteを使うときには、http methodを使いますが、htmlのformにはgetとpostしかないみたいなんですね〜。putなどは、サポート外みたいです。
http://html5.cyberlab.info/elements/forms/form-method.html
http://jxck.hatenablog.com/entry/why-form-dosent-support-put-delete

しかし、今回はmethodを付与したいので、苦労しました。
どうやら、hiddenで`name=_method`を送ればいけるみたいですね。
http://portaltan.hatenablog.com/entry/2015/07/22/122031

PUTはhiddenで行いましたが、DELETEはjqueryのajaxで実装を行いました。

```edit.html
form action="/update?{{.Id}}" method="post">
      <input type="hidden" name="_method" value="PUT">
      <div>
        <label for="say">Let's write a comment!</label>
        <input class="textarea" name="body" id="say" value="{{.Body}}" maxlength="100" required>
      </div>
      <div>
        <label for="to">What greeting do you want to say?</label>
        <input class="textarea" name="image" id="to" value="{{.Image}}" cols="30" rows="10" required>
      </div>
      <div>
        <button>Send my greetings</button>
      </div>
    </form>
```

```index.html
    <li><a href="delete?{{.Id}}" class="destroy" d-id="{{.Id}}">削除</a></li>
    // ajax用にidを付与
```


jqueryを使って、menuも作ってます。
参考程度にしてください。


```message.js
$(function () {
  $('span').click(function () {

    if ($(this).attr('class') == 'selected') { //出してる時
      // メニュー非表示
      $(this).removeClass('selected').next('ul').slideUp('fast');
    } else {
      // 表示しているメニューを閉じる
      $('span').removeClass('selected');
      $('ul').hide();

      // メニュー表示
      $(this).addClass('selected').next('ul').slideDown('fast');
    }
  });

  // マウスカーソルがメニュー上/メニュー外
  $('span,ul').hover(function () {
    over_flg = true;
  }, function () {
    over_flg = false; //メニュー外にいる時はfalse
  });

  // メニュー領域外をクリックしたらメニューを閉じる
  $('body').click(function () {

    if (over_flg == false) {
      $('span').removeClass('selected');
      $('ul').slideUp('fast');
    }
  });

//ここまでが、編集、削除のmenu項目関連

  $("li").on("click", ".destroy", function (e) {  //delete method用のfunc
    e.preventDefault()
    if (!confirm('本当に削除しますか？')) {
      /* キャンセルの時 */
      return false;
    } else {
      /*OKの時*/
      let id = $(this).attr("d-id")
      $.ajax({
        url: `/delete?${id}`,
        type: "DELETE",
        success: function (response) { //response is latest html
          $("html").empty();
          $("html").append(response);
          alert("削除が完了しました")
        }
      })
    }
  })

  //display no image
  const images = document.querySelectorAll('img');
  images.forEach((image) => {
    image.addEventListener('error', () => {
      image.setAttribute('src', 'stylesheet/no-image.png');
    });
  });

});
```

#timeのsort

更新日順に並び変える処理を書きました。
これは、sort sliceを用いて行いました。
https://golang.org/pkg/sort/
https://qiita.com/yut-kt/items/ef8ce10c66153dd84317

```handle/handle.go

	if r.Method == "POST" { //sort time
		r.ParseForm()
		form := r.PostForm
		s, _ := strconv.Atoi(form["sort_id"][0])
		switch s {
		case 0: //new
			sort.Slice(p,
				func(i, j int) bool {
						return p[i].Updated_time.After(p[j].Updated_time)
					})
			case 1: //old
				sort.Slice(p,
						func(i, j int) bool {
								return p[i].Updated_time.Before(p[j].Updated_time)
							})
					}
				}

```

if文でgetならsortは通らない。postならsortを通る処理を書きました。
![new.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274417/dfdfbe5f-3f40-2b6c-557b-8a036744c2b4.png)

この新しいを選択するとvalueが0,古いを選択するとvalueが1という処理でsortする順番を分けています。

#完成コード
gitにでもあげます。



part 1
https://qiita.com/dossy/items/721db0ab74afd8e78599