ソースコード


$(function() {
  $(".delete-btn").on("click",function(){
    $('#overlay').fadeIn();
    $(document).on("click","#modal-close-btn",function(){
      $('#overlay').fadeOut();
    });
    $(document).on("click","#delete-comformation-btn",function(){
      let ProductID = $(this).data("product-id");

      $.ajax({
        url: "/products/" + ProductID,
        type: "POST",
        data: {"id":ProductID,"_method": "DELETE"} 
      })
    })
  });
});

実装のポイント

$.ajax()を使ってAjax通有心を行う際は、引数のtypeには、GETもしくはPOSTのHTTPメソッドしか使えない。そのため、今回は、以下の記事を参考にして、DELETEのHTTPメソッドを使えるようにしました。
https://qiita.com/u-dai/items/d43e932cd6d96c09b69a

ポイントとしては、_methodメソッドを使うことでした。詳しくは参考文献を参考にしていただきたいと思います。

動作状況

1.削除前のDB(id:146, name:phpが存在する)
https://gyazo.com/11089d30fb16a09fdedeb5fba9d2810e

2.モーダルウィンドォの表示
https://gyazo.com/7c121e408e768482174241c7825b0d00

3.削除ボタンを押すと、イベント発火しAjax通信開始する(カスタムデータidを取得し、コントローラへ送る)
https://gyazo.com/fc2c44be206ffc318a85999df10f149f
Gyazoで拡大撮影
https://gyazo.com/414fef8ecd55f0385c8b82842419c1b5

4.コントローラのdestroyアクションが作動する
https://gyazo.com/f28c7227a88989d7c97b06bcf5086397
Gyazoで拡大撮影
https://gyazo.com/487ba5f775f9cd5e5c212c58bedd1463

5.binding.pry解除後(削除後)のDB(id:146, name:phpが存在しない)
https://gyazo.com/69b3990e72b3d6618bbd6bd558db28f6
Gyazoでターミナルのログを拡大撮影
https://gyazo.com/c8e6bd5a5613cde6f04d14be8c7f5f39

このような感じで、無事Ajaxで削除機能を実装することができました。

＜参考文献＞
山本陽平『webを支える技術』(2010年、技術評論社)　99頁以下

Ajax通信において、deleteメソッドを使う方法

ソースコード

実装のポイント

動作状況