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を通る処理を書きました。
この新しいを選択するとvalueが0,古いを選択するとvalueが1という処理でsortする順番を分けています。
完成コード
gitにでもあげます。