ajax非同期通信時にUnable to autoload constant ControllerとUncaught SyntaxError: Unexpected token . のエラーが発生する
解決済
回答 2
投稿
- 評価
- クリップ 0
- VIEW 1,030
初めての質問です!
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
の3つのエラーが出てしまっています。
以下に非同期通信周りのコードを載せます。
[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
わかる方、よろしくお願いします。
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
check解決した方法
0
解決しました!
respond_toのendが抜けているとってもシンプルなエラーで、非同期投稿もできるようになりました!
コメントくれた方、ありがとうございます!
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
0
とりあえず
var formData = new FormData(this);
「#new_message」はformのidなのでしょうか?
thisを指定する意図がわかりません。
var formData = new FormData($(this).get(0));
的な処理をしないとformからformdataを作ることはできないでしょう。
追記
すみません、formから処理すればthisでいけそうですね
もうちょっと検証してみます
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう!
- ただいまの回答率 88.22%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる