422 (Unprocessable Entity)が解決できない

Question

投稿に対していいねする機能を実装しているのですが、非同期化をしている際にエラーが発生し、解決できない状況です。
よろしくお願いします。

jquery-3.1.1.min.js:4 
DELETE http://localhost:3000/odais/24/copies/33/likes/42 422 (Unprocessable Entity)

!!!
%html
  %head
    %meta{content: "text/html; charset=UTF-8", "http-equiv": "Content-Type"}/
    -# bootstrapのmeta読み込み
    %meta{content: "width=device-width, initial-scale=1, shrink-to-fit=no", name: "viewport"}/
    %title CopyWritter
    -# bootstrapのcss読み込み
    %link{crossorigin: "anonymous", href: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css", integrity: "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T", rel: "stylesheet"}/
    %link{href: "https://use.fontawesome.com/releases/v5.6.1/css/all.css", rel: "stylesheet"}/
    %link{href: "css/style.scss", rel: "stylesheet"}/
    %script{src: "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"}

    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

  %body
    
      -#~省略~

      = yield

      -# bootstrapのjs読み込み
      %script{crossorigin: "anonymous", integrity: "sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7", src: "https://code.jquery.com/jquery-3.1.1.min.js"}
      %script{crossorigin: "anonymous", integrity: "sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1", src: "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"}
      %script{crossorigin: "anonymous", integrity: "sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM", src: "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"}

      %footer
      -#~省略~

$(function(){

  function likeIcon(){
    var html = `<div class="copies__a__copy__like__icon" >
                  <a rel="nofollow" data-method="post" href="/odais/${odai.id}/copies/${copy.id}/likes">
                    <i class= "far fa-heart">
                      ::bofore
                    </i>
                  </a>
                </div>
    `
    return html;
  }
  
  $('.copies__a__copy__liked__icon').on('click',function(){
    var url = $(this).find('a').attr('href');
    var liked_id = $(this).data('id');
    // console.log(url)
    // console.log(liked_id)
    $.ajax({
      type: 'DELETE',
      url: url,
      dataType: 'json',
      data: {id: liked_id}
    })
    .done(function(){
      $(this).remove();
      var html = likeIcon();
      $('.copies__a__copy__name').append(html);
    })
    // .fail(function(){
    //   alert('error');
    // })
  });


})

-# 分類
.classification

-#〜省略〜

.contents
  .copies
    - @copies.each do |copy|
      .copies__a__copy.col-md-6

        -# 部分テンプレート候補
        .copies__a__copy__name
          = copy.user.name

        -# いいね部分テンプレート　user#showのいいねとは別ファイル
        -#   Likesコントローラーでeachを使うと一つ一つのコピーと紐つけられないので、こちらでデータ取得
        = render partial: 'like', locals: { copy: copy }
        

        = image_tag copy.odai.image.url, class:'odai_image',width: "250",height:"250" if copy.odai.image.present?
        .copies__a__copy__text
          = copy.odai.text
        .copies__a__copy__catchphrase
          = copy.catchphrase
        .copies__a__copy__presentation
          = copy.presentation

        - if user_signed_in?
          = link_to "/odais/#{copy.odai.id}/copies/#{copy.id}" ,method: :get do
            %i.fas.fa-newspaper.fa-2x{"aria-hidden": "true"}

        - if user_signed_in? && copy.user_id == current_user.id

          = link_to "/odais/#{copy.odai.id}/copies/#{copy.id}/edit" ,method: :get do
            %i.fas.fa-edit.fa-2x{"aria-hidden": "true"}
          = link_to "/odais/#{copy.odai.id}/copies/#{copy.id}" ,method: :delete do
            %i.fas.fa-trash-alt.fa-2x{"aria-hidden": "true"}

Rails.application.routes.draw do
  devise_for :users
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
  root 'copies#index'
  resources :users
  resources :odais , only: [:index, :new, :create, :edit, :update, :destroy]do
    resources :copies do
      resources :comments , only: [:create, :destroy]
      resources :likes, only: [:create, :destroy]
    end
  end
end

class LikesController < ApplicationController

  def destroy
    @like = Like.find_by(params[:id])
    copy_id = @like.copy_id
    @copy = Copy.find_by(id: copy_id)
    odai_id = @copy.odai_id
    @odai = Odai.find_by(id: odai_id)
    @like.destroy if @like.user_id == current_user.id

    respond_to do |format|
      format.html
      format.json
    end

  end

end

json.array! @copy,@odai do |message|
  json.copy_id @copy.id
  json.odai_id @odai.id
end

Answer 1

こんにちは。

consoleErrorは、ブラウザの開発者ツールのコンソール側のエラーでしょうか。
非同期処理でのリクエストがうまくサーバ側で処理できていないメッセージ（422）が出ているので、まずは、こちらのステータスコードの意味も確認してみてくださいね。

(1) ブラウザの開発者ツールの「ネットワーク」から確認

Ajaxからどんなリクエストを送っているか、レスポンスになにが返ってきているかを確認してみてください。
DELETEの操作（いいねを削除する）操作をしているのでしょうか？
リクエストメソッド: DELETE / ステータスコードが422になっている通信を探して、コントローラ側が期待しているのに合ったメソッド、パラメータが送られているかをチェックしてみてください。

(2) サーバ側のログも確認

リクエストを受け取って422を返す際に、サーバ側（Rails側）のログに何か出ていませんか？
期待しているのと違うパラメータが送られているとか、認証用のヘッダが足りないとか、コントローラ側でもエラーが何か出ているかと思います。

Comments

[KK78795046]

コメントありがとうございます！

422は、構文はあっているが、内容が間違っているという意味の認識ですがあっていますでしょうか。

（１）
リクエストにはGETしかありませんでした。
（２）
サーバー側ではdestoryのビューが呼び出されたが、存在しないというようなエラーでした。

少し調べてみたのですが、jQueryのajaxではDELETEメソッドが送れないことが原因のようでした。
remote:trueで書き直せないか検討してみることにしました。
ありがとうございます！

[suama]

こんばんは。ご自身で解決に進めそうですね！

422ということはリクエスト自体は飛んでいるので、その後期待してるデータが足りないとか処理が途中で失敗したエラーになります。

なお、ブラウザの開発者ツール- > ネットワークで、そのリクエストがAjaxリクエストかどうかは、「XHR」というフィルタで絞り込むか、「タイプ」でxhrと表示されるかどうかで確認できます。

また、developmentモードであれば、ログにSQLのデータ操作も表示されるので、Likeのデータ自体はDELETEされているのかどうかも、確認してみてくださいね。

その上で、「destoryのビューが呼び出されたが、存在しない」だとしたら、jsonを処理するテンプレートがうまく見えてないとか、描画でエラーかな？

もしもう少し詰まってしまっていたら、production.logかdevelopment.logログを貼っていただければと思います。