railsでajaxを用いての非同期通信

Question

railsでajaxを用いての非同期通信のチャット機能を作っています。

Javascript 自体は動いているっぽいのですが,表示されるhtmlが
$(message.id} $(message.date}$(message.message)
と、そのまま表示されてしまいます。

原因がわからないので、教えていただきたいです。

message.js

$(document).on('turbolinks:load', function(){
  function buildHTML(message){
              var html = `$(message.id)
                          $(message.date)
                          $(message.message)`
              return html;
  }

  $('#form').on('submit', function(e){ 
    e.preventDefault()
    var formData = new FormData(this);
    var url = (window.location.href);
    $.ajax({
      url: url,
      type: 'POST',
      data: formData,
      dataType: 'json',
      processData: false,
      contentType: false
    })
    .done(function(data){
      var html = buildHTML(data);
      $('.messages').append(html);
      $('.submit').prop('disabled', false)
      $('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight},50);
    })
    .fail(function(data){
      alert ('メッセージ送信に失敗しました');
    })
  })
});

messages_controller

class MessagesController < ApplicationController

  def index
    @messages = Message.all
    @message = Message.new
  end

  def create
    @message = Message.new(message_params)
    if @message.save
      respond_to do |format|
        format.html { redirect_to messages_path }
        format.json
      end
    else
      render :index
    end
  end
 
  private
  def message_params
    params.require(:message).permit(:message)
  end

end

index.html.erb

<%= javascript_include_tag 'message' %>

<% @messages.each do |message| %>
  <%= message.message %>
  <%= message.created_at.strftime("%Y/%m/%d %H:%M") %>
  <%= message.id %>
<% end %>
<ul class="messages">
</ul>


<%= form_for @message, html: { class: 'form' } do |f|%>
  <%= f.text_field :message %>
  <%= f.submit class: 'submit' %>
<% end %>

create.json.jbuilder

json.date @message.created_at.strftime("%Y/%m/%d %H:%M")
json.message @message.message
json.id @message.id

Answer 1

Railsに適切にPOSTできて、レスポンスがJavaScriptに返ってきている前提で回答します。

JavaScriptのテンプレート文字列の使い方が原因だと思います。
ただしくは丸括弧ではなく、波括弧を使います。

function buildHTML(message){
  var html = `${message.id}
              ${message.date}
              ${message.message}`
  return html;
}

テンプレート文字列 - JavaScript MDN

Comments

[Tsuyoshipanda]

ご回答ありがとうございます！
直したらうまくいきました！

Answer 2

直接的な回答ではないですが・・・

railsでajaxを用いての非同期通信のチャット機能を作っています。

それなら remote: true を使いましょう。

参考：remote: trueとは〜hatmlリクエストとjsリクエストの違い
※いいねボタンの実装なので概要を掴むための記事です。
※すでに検討済みだったらごめんなさい。

---

追記

Railsでajaxのコードを記述したことがないのでなんとも言えないですが、Ajax通信の場合は、Strong Parameterを設定しなくてもいいのでしょうか？
またその他、サーバーログを見ると原因の追求がしやすいかと思います。

Comments

[Tsuyoshipanda]

ありがとうございます！参考させていただきます！
コード見た感じ何か変なところとかありませんか？？

[no1knows]

追記してありますのでご確認ください。