初めての質問です!
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
至らないところが多いですが、わかる方、よろしくお願いします。