何かやってみるブログ

興味をもったことに関して書いています。技術系の記事が多いです。

Ruby on Jetsでdeleteメソッドが上手く動作せずにハマった

www.takayasugiyama.com

概要

前回、DynamoDBを使うパターンのjetsをscaffoldで作成したものの、今回scaffoldに頼らず自力で実装してみたところdelete アクションでハマったのでメモに残します.

状況

ほとんどscaffoldと同じように実装したものの上手くAjaxの処理が走らない...

  def delete
    Post.delete(@field.id)
    if request.xhr?
      render json: {success: true}
    else
      redirect_to posts_path
    end
  end

解決法

jets newした時に自動生成されるapp/javascript/src/jets/crud.jsのソースコードを読んでいくと、linkに削除のリンクのdomを代入していて、closeatでjets-element-to-deleteというクラスの親要素を見つけて隠して削除している.

それゆえに削除リンクにはjets-element-to-deleteというクラスをもつ親要素が必要だということが分かりました.

・
・
・
function deleteItem(link) {
    var node = link.closest('.jets-element-to-delete');
    node.hide(); // immediately hide element

    var resource = link.attr("href");
    var token = $('meta[name=csrf-token]').attr('content');
    var data = { authenticity_token: token };
    var request = $.ajax({
      url: resource,
      method: "DELETE",
      data: data,
      dataType: "json"
    });

    request.done(function(msg) {
      console.log("msg %o", msg)
      node.remove();
    });

    request.fail(function(jqXHR, textStatus) {
      console.log("textStatus %o", textStatus)
      node.show(); // in the event of a failure re-display the node
    });
  }