前提・実現したいこと
今Ruby on Railsでチャットアプリを作っており、その中でJavaScriptのajax機能を使った、非同期のメッセージ送信機能を実装してます。
このアプリではrefileというGemを使い、ユーザーのプロフィール画像を登録できるようにしています。
そしてLINEのようなイメージで、メッセージを送った時に送信者のプロフィール画像を表示させたいのですが、エラーが起きてしまいます。
ちなみにajaxを実装する前にhtml形式で実装していたときは正常に送れていました。
解決方法がわかる方がいらっしゃれば、教えていただけると助かります。
発生している問題・エラーメッセージ
SyntaxError in MessagesController#index
該当のソースコード
message.js.erb
js
1$(function(){ 2 function buildHTML(message){ 3 let html = 4 `<div class="Message_box"> 5 <a href="/posts_g/${message.user_id}"> 6 <%= attachment_image_tag ${message.user}, :profile_image, class: "Message_box__User_image" %> 7 </a> 8 <div class="Message_box__Content"> 9 <a class="Link Text Message_box__Content__Name" href="/posts_g/${message.user_id}">${message.user_name}</a> 10 <div class="Message_box__Text Text"> 11 <p>${message.text}</p> 12 </div> 13 </div> 14 </div>` 15 return html; 16 } 17 $('.Main__form__Form').on('submit', function(e){ 18 e.preventDefault(); 19 let formData = new FormData(this); 20 let url = $(this).attr('action'); 21 $.ajax({ 22 url: url, 23 type: 'POST', 24 data: formData, 25 dataType: 'json', 26 processData: false, 27 contentType: false 28 }) 29 .done(function(data){ 30 let html = buildHTML(data); 31 $('.Main__content').append(html); 32 $('.Main__content').animate({ scrollTop: $('.Main__content')[0].scrollHeight}); 33 $('form')[0].reset(); 34 $('.Main__form__contents__btn').prop('disabled', false); 35 }) 36 .fail(function() { 37 alert("メッセージ送信に失敗しました"); 38 }) 39 }); 40});
create.json.jbuilder
jbuilder
1json.user @message.user 2json.user_id @message.user.id 3json.user_image_id @message.user.profile_image_id 4json.user_name @message.user.name 5json.text @message.text
index.html.haml
haml
1.Main 2 .Main__Header 3 .Title1 4 = "#{@user.name}さんとのトークルーム" 5 .Main__content 6 = render @messages 7 .Main__form 8 = form_with model: [@group, @message], html: {class: "Main__form__Form"}, local: true do |f| 9 .Main__form__contents 10 .Main__form__contents__input 11 = f.text_area :text, class: 'Main__form__contents__input__text' 12 = f.label :image, class: 'Main__form__contents__input__image' do 13 = icon('far', 'image', class: 'Main__form__contents__input__icon') 14 = f.attachment_field :image, class: 'Main__form__contents__input__image__file' 15 = f.submit '送信', class: 'Main__form__contents__btn'
_message.html.haml
haml
1.Message_box 2 = link_to posts_g_path(message.user) do 3 = attachment_image_tag message.user, :profile_image, fallback: "no-image.jpg", class: "Message_box__User_image" 4 .Message_box__Content 5 = link_to "#{message.user.name}", posts_g_path(message.user), class: "Link Text Message_box__Content__Name" 6 .Message_box__Text.Text 7 - if message.text.present? 8 = simple_format(message.text) 9 - if message.image.present? 10 = attachment_image_tag message, :image, class: 'Message__image'
messages_controller.rb
ruby
1class MessagesController < ApplicationController 2 before_action :set_group 3 4 def index 5 @user = User.find_by(id: params[:user_id]) 6 @message = Message.new 7 @messages = @group.messages.includes(:user) 8 end 9 10 def create 11 @message = @group.messages.new(message_params) 12 @user = @group.users.last 13 if @message.save 14 respond_to do |format| 15 format.json 16 end 17 @user = @message.user 18 else 19 @messages = @group.messages.includes(:user) 20 render :index 21 end 22 end 23 24 25 private 26 27 def message_params 28 params.require(:message).permit(:text, :image).merge(user_id: current_user.id) 29 end 30 31 def set_group 32 @group = Group.find(params[:group_id]) 33 end 34end
user.rb
ruby
1class User < ApplicationRecord 2 devise :database_authenticatable, :registerable, 3 :recoverable, :rememberable, :validatable 4 5 validates :name, presence: true, uniqueness: true 6 7 has_many :post_gs 8 has_many :post_cs 9 has_many :group_users 10 has_many :groups, through: :group_users 11 has_many :messages 12 13 attachment :profile_image 14end
試したこと
- refileのjsファイルでの埋め込み方について検索してみたのですが、なかなか出てきませんでした。
- "message.js.erb"のファイル名を"message.js"に変えて、attachment_image_tagの行を以下のように編集してみたのですが、それでもうまくできませんでした。
<img class="attachment user profile_image Message_box__User_image" src="/attachments/71e8db8f4967b47af0144ed4033b0fac4fcae0f9/store/${message.user_image_id}/profile_image">
補足情報(FW/ツールのバージョンなど)
refileのGitHubのURLはこちらです。
https://github.com/refile/refile
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。