初めての質問です!
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 .
というエラーが複数出ています。
以下に非同期通信周りのコードを載せます。
[message_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
至らないところが多いですが、わかる方、よろしくお願いします。