前回、編集機能の非同期化について記載させていただきましたが、今回は削除機能の非同期化について記事を書かせていただきます。
それでは、まず動画をご覧ください。
Deleteボタンを押すと、削除するかどうかの確認のアラートが出て、さらにアラートのOKボタンを押すと、きちんと削除処理がされていることが確認できますね。（正確にはこの動画だとちゃんと非同期になっているかわからないと思いますが、、）
削除処理の非同期化については、編集処理の非同期化に比べると、記述量も少なく、HTMLを入れ込む必要もないので楽でしたが、いくつか個人的にポイントだと思った箇所がありましたので記載します。
＜削除機能実装におけるポイント＞
①削除機能の場合、jbilderのファイルやコントローラへのjson.formatの記載は不要
②削除ボタンを押した際のアラートをどのようなビューにするか
①については、当たり前といえば当たり前ですが、これまでの非同期化では、jbuilderとjson.formatをセットで使用していたので、自分は勢いでふたつとも作成してしまいました、、。
ただ、冷静に考えれば、削除処理の場合、動的な情報が入ったHTMLを新たに作成するわけではありませんし、DBから返してもらうデータはないのでいずれも必要ありませんね。
また、削除処理については、基本的に警告表示は必要だと思いますが、アラートをどのようなビューにするのかによってサイトの印象が変わってしまうので、今回は一番簡単なalertメソッドをそのまま使用しましたが、サイトの印象を重視するなら非同期でHTMLを作成するのもありかもしれません。
ということで、以下コードを記載しますので、皆さまの何かのお役に立てば幸いです。
blog_destroy.js
$(function() {
$(document).on("click", ".delete_id", function (e) {
e.preventDefault();
var deleteMessage = confirm('削除してよろしいでしょうか？');
if(deleteMessage == true) {
var blog_element = $(this).parents('.content');
var blog_id = blog_element.attr("data-blog-id");
var url = location.href + "/" + blog_id;
$.ajax({
url: url,
type: "POST",
data: {'id': blog_id,
'_method': 'DELETE'} ,
dataType: 'json'
})
.done(function(data) {
blog_element.remove();
})
.fail(function() {
alert('blog destroy error');
})
}
});
});
index.html.haml
= render partial: 'devise/shared/header'
.contents
-@blogs.each do|blog|
.content{"data-blog-id": "#{blog.id}"}
.content__messages
.content__message
.content__message__box{"data-edit-id": "#{blog.id}"}
- if blog.content.present?
%p.lower-message__content
= blog.content
.content__message__info
%p.message__upper-info__talker
ユーザ：
= blog.user.name
%p.message__upper-info__date
投稿日時：
= blog.created_at.strftime("%Y/%m/%d %H:%M")
.content__message__edit-and-delete-btn
%p.edit_id
Edit
%p.delete_id
Delete
.pict
=image_tag blog.image.url, class: 'pict__img' if blog.image.present?
= render partial: 'devise/shared/footer'