Skip to main content
1 / 5

ajaxの非同期通信をするにあたって

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