$(function() { function buildHTML(message) { var html = `<div class="message"><div class="name">${message.name}</div><div class="data">${message.date}</div><div class="content">${message.content}</div></div>` return html; } $('#new_message').on('submit', function(e) { e.preventDefault(); console.log(this) var formData = new FormData(this); console.log(formData) 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) $('.messages').append(html) $('.content').val('') }) .fail(function() { alert('メッセージの送信に失敗しました') }) }); });
これがjsファイルです。
json.content @message.content json.image @message.image json.name @message.user.name json.date @message.created_at
これがjbuilderファイルです。
.message .name = message.user.name .data = message.created_at.strftime("%Y/%m/%d/%H/%M") .content - if message.content.present? = message.content = image_tag message.image.url if message.image.present?
これがメッセージ部分のhamlです。
メッセージを投稿するとコメント部分は非同期通信できるのですが名前と作成時間の部分がundefinedになってしまします。
どうすれば解決できるでしょうか?
ちなみにアソーシエーションはちゃんと組まれていました。!
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。