非同期で情報を何度も更新する

Question

前提・実現したいこと

Jqueryでajax通信を行い、ユーザー情報を画面遷移せずに更新できる機能を開発しています。
データはjson形式で受け取るようにしており、更新された情報をjs内のhtml記述に反映させて、実際のhtmlにappendで差し込んでいます。

使用言語: Ruby, javascript, jquery
フレームワーク:　Ruby on Rails

発生している問題・エラーメッセージ

問題ですが、一度目のajax通信での更新は成功できてデータ型もjsonで受け取れています。
しかし、ページを更新せずに二度目の情報の更新を試みると、なぜかコントローラーへのリクエストがjsonのフォーマットで来ずにActionController::UnknownFormatとエラーが表示されます。

＊二度目はjsonで処理ができないですが、ユーザー情報の更新はデータベースで確認できました。
アドバイスやヒントでもご教授願います。

以下はエラー文です。

ActionController::UnknownFormat in UsersController#update

ActionController::UnknownFormat

 def update 
  if current_user.update(user_params)
    respond_to do |format|
      format.json
    end
  else

該当のソースコード

以下HTMlの記述です。

  .mypage__whole
    .mypage-top
      %span.top-text プロフィール
    .mypage-main
      = form_for(current_user) do |f|
        .user-info
          .user-info__right
            .img-wrapper
              = image_tag current_user.user_image.url, class: "profile-img"
            .introduction
              %span 自己紹介
              .introduction__detail 
                = f.text_area :detail
          .user-info__left
            .text-box
              %span ニックネーム
              .user-text
                = f.text_field :name, maxlength: 25
            .text-box
              %span 職業
              .user-text
                = f.select( :character,[["患者","患者"],["医師",'医師'],["アカデミー","アカデミー"]],selected: "#{current_user.character}")
            = f.submit "更新する", class: "user-update"

以下javascriptの記述です。
発火はクラス名がedit_userである編集フォームが送信されたときです。

$(function(){
   function buildUserHTML(data, selection){
      var html =
       `<div class="mypage-top">
          <span class="top-text">プロフィール</span>
        </div>
        <div class="mypage-main">
          <form class="edit_user" id="edit_user_${data.id}" action="/users/${data.id}" accept-charset="UTF-8" method="post">
            <input name="utf8" type="hidden" value="✓">
            <input type="hidden" name="_method" value="patch">
            <input type="hidden" name="authenticity_token" value="JCMdZuq4aVn07+zCbH7WY8x9JQwIMA6m2cCiWFTERaRpTqbxgJggrlKG6mNPADh8j4o4BR+/wshF3Y2qEj4/rw==">
            <div class="user-info">
              <div class="user-info__right">
                <div class="img-wrapper">
                  <img class="profile-img" src="${data.user_image.url}">
                  <i class="fas fa-camera"></i>
                </div>
                <div class="introduction">
                  <span>自己紹介</span>
                  <div class="introduction__detail">
                    <textarea name="user[detail]" id="user_detail">${data.detail}</textarea>
                  </div>
                </div>
              </div>
              <div class="user-info__left">
                <div class="text-box">
                  <span>ニックネーム</span>
                  <div class="user-text">
                    <input autofocus="autofocus" maxlength="25" size="25" type="text" value="${data.name}" name="user[name]" id="user_name">
                  </div>
                </div>
                <div class="text-box">
                  <span>職業</span>
                  <div class="user-text">
                    <select name="user[character]" id="user_character">
                      ${selection}
                    </select>
                  </div>
                </div>
                <input type="submit" name="commit" value="更新する" class="user-update" data-disable-with="更新する">
              </div>
            </div>
          </form>
        </div>`
      return html;
  };
  $('.edit_user').on('submit', function(e){
   e.preventDefault()
   var formData = new FormData(this);
   var url = $(this).attr('action');
   $.ajax({
     url: url,
     type: "PATCH",
     data: formData,
     dataType: 'json',
     processData: false,
     contentType: false
   })
   .done(function(data){
     var selection = '';
     var all_options = ["医師","患者","アカデミー"];
     all_options.forEach(function(option){
       if (option == data.character){
         var option_html = `<option selected="selected" value="${data.character}">${data.character}</option>`
       } else{
         var option_html = `<option value="${option}">${option}</option>`
       };
       selection += option_html
     });
     var html = buildUserHTML(data, selection);
     $(".mypage__whole").empty();
     $('.mypage__whole').append(html);
     $('.user-update').prop('disabled',false);
     alert("プロフィールを更新しました");
   })
   .fail(function(){
     $('.user-update').prop('disabled',false);
     alert("プロフィール更新に失敗しました");
   })
  });
});

以下コントローラーの記述です。
ここのrespond_to do |format|内でエラーが起きます

 def update 
  if current_user.update(user_params)
    respond_to do |format|
      format.json
    end
  else
    redirect_to "/users/#{current_user.id}"
  end
 end

以下jbuilderの記述です

json.id current_user.id
json.name current_user.name
json.detail current_user.detail
json.character current_user.character
json.user_image current_user.user_image

試したこと

更新後のhtml記述に
・data-remote="true"をつけると二度目の送信でjs自体が発火しなくなった
・action="/users/${data.id}"をaction="/users/${data.id}.json"に変更すると、jbuilderの記述がそのまま画面に表示される。

補足情報（FW/ツールのバージョンなど）

ruby 2.5.1
jbuilder (2.9.1)
jquery-rails (4.3.5)
json (2.3.0, default: 2.1.0)

Answer 1

Railsのレールに乗って開発したほうがスムーズだと思うので、こちらを参考にしていただくとよいかと思います。
期待した結果がとても短いコードで実装できます。
またformタグにはかならずremote: trueをつけて下さい。

Railsガイド：RailsでJavaScriptを使用する/シンプルな例

なお更新後のjsが発火しないのはturbolinksを考慮した書き方ができていないからです。

document.addEventListener("turbolinks:load", function(){
    ...your code here
})

Comments

[kokesi1357]

回答ありがとうございます！
今回はターボリンクスを使用していないので、その考慮はしていませんでした。
以前にremote: trueを加えたのですが、送信ボタンをクリックしてもフォームの送信ができなくなりました。ボタンへのdisabledはfalseをかけています

Answer 2

なんとも言えませんがデバッグということなら

• type: "PATCH"→ブラウザ依存？postでできませんか？
• dataType: 'json' →一旦textで受け取るとか

その他,cache:falseするとか

Comments

[kokesi1357]

回答ありがとうございます。
提案していただいたものを試してみますね