チャットアプリでのメッセージ送信の非同期化がうまくいかない

Question

前提・実現したいこと

チャットアプリのメッセージ送信非同期化通信でページをリロードせずにすむようにしたい

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

メッセージ送信時、まず’エラーが発生したためメッセージを送信できませんでした’と表示があり、その後リロードを押さなければメッセージが表示されません

該当のソースコード

$(document).on("turbolinks:load", function(){
  function buildHTML(message) {
    var content = message.content ? `${ message.content }` : "";
    var img = message.image ? `<img src= ${ message.image }>` : "";
    var html = `<div class="message" data-id="${message.id}">
                  <div class="message__detail">
                    <p class="message__detail__current-user-name">
                      ${message.user_name}
                    </p>
                    <p class="message__detail__date">
                      ${message.date}
                    </p>
                  </div>
                  <p class="message_body">
                    <div>
                    ${content}
                    </div>
                    ${img}
                  </p>
                </div>`
  return html;
  }
  $('#new_message').on('submit', function(e){
    e.preventDefault();
    var message = new FormData(this);
    var url = (window.location.href);
    $.ajax({  
      url: url,
      type: 'POST',
      data: message,
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(data){
      var html = buildHTML(data);
      $('.messages').append(html);
      $('#message_content').val('');
    })
    .fail(function(data){
      alert('エラーが発生したためメッセージは送信できませんでした。');
    })
    .always(function(data){
      $('.submit-btn').prop('disabled', false);
    })
    
  })
});

json.id      @message.id
json.content @message.content 
json.date    @message.created_at.strftime("%Y/%m/%d %H:%M")
json.user_name @message.user.name
json.image   @message.image.url

試したこと

turbolinksについて調べて切ってみたのですが、うまくいきませんでした。
拙い質問、文であると思いますが、どうか回答のほどよろしくお願いします。

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

ここにより詳細な情報を記載してください。

Answer 1

failのとり方がダメです

.fail(function(data){

  alert('エラーが発生したためメッセージは送信できませんでした。');
})

.fail(function(xhr,err){
  alert(err);
})

で、確認してみてください
parsererrorなどが返ってくるようでしたら指定したdataTypeのjsonと
戻り値の型が違うのだと思います
とりあえずdataType: 'text'にしてエラーが出なくなれば
受けたデータに適宜処理をいれてください