ajax非同期通信時にUnable to autoload constant ControllerとUncaught SyntaxError: Unexpected token . のエラーが発生する

Question

初めての質問です！
ruby on railsで現在製作中の投稿型アプリケーションの投稿機能に、ajaxで非同期通信を適用させようとしています。

createアクションにrespond_toを使って、json形式でデータをとり、ajaxでデータを返すという具合です。

ところが、いざ実装してみると一つのエラーを抜け出せず、投稿がままならない状態です。
エラー内容は、

Unable to autoload constant MessagesController, expected /Users/namae/projects/chat-space/app/controllers/messages_controller.rb to define it

Uncaught SyntaxError: Unexpected token .

compile error

の３つのエラーが出てしまっています。
以下に非同期通信周りのコードを載せます。

[messages_controller]
def create
  @message = @group.messages.new(message_params)
  if @message.save
    respond_to do |format|
      format.html {redirect_to group_messages_path(@group)}
      format.json
  else
    @messages = @group.messages.includes(:user)
    flash.now[:alert] = "メッセージを入力してください"
    render :index
  end
end

[message.js]
$(function(){
  function buildHTML(data){
    var Image = '';

    if (massage.image) {
      Image = `<img src = ${message.image} class = "lower-message__image">`
    }

    var html = `<div class="message" data-message-id=${ message.id }>
                  <div class="upper-message">
                    <div class="upper-message__user-name">
                      ${ message.name }
                    </div>
                    <div class="upper-message__date">
                      ${ message.data }
                    </div>
                  </div>
                  <div class="lower-meesage">
                      <p class="lower-message__content">
                        ${ message.text }
                      </p>
                        $ { Image }
                  </div>
                </div>`;
    return html;
  }

  $("#new_message").on('submit', function(e){ //フォームを送信した時に
    console.log("this")
    e.preventDefault();                       //アクションを止めてページの遷移を止める
    var formData = new FormData(this);        //フォームの情報獲得
    var url = $(this).attr("action");
    $.ajax({
      type: "POST",
      url: url,
      data: formData,
      dataType: "json",
      processData: false,
      contentType: false
    });
    .done(function(data) {
      var html = buildHTML(data);
      var url = $(this).attr("action");
      $('.message').append(html);
    })
    .fail(function(){
      alert('error');
    });
    return false;
  });
});

[create.json.jbuilder]
json.id         @message.id
json.text       @message.body
json.image      @message.image.url
json.data       @message.created_at.strftime('%Y/%m/%d %H:%M:%S')
json.name       @message.user.name

わかる方、よろしくお願いします。

Answer 1

解決しました！

respond_toのendが抜けているとってもシンプルなエラーで、非同期投稿もできるようになりました！

コメントくれた方、ありがとうございます！

Answer 2

とりあえず

var formData = new FormData(this);

「#new_message」はformのidなのでしょうか？
thisを指定する意図がわかりません。

var formData = new FormData($(this).get(0));  

的な処理をしないとformからformdataを作ることはできないでしょう。

追記

すみません、formから処理すればthisでいけそうですね
もうちょっと検証してみます