前提・実現したいこと
railsにてチャット機能をもつサイトの構築をしています。
非同期通信の実装をしている段階です。
メッセージと一緒に画像も投稿できる仕様にしたいと思っています。
追記:
画像とメッセージの投稿ができるのですが、
画像の有無によって返すHTMLを変えたいです。
var imageHTML...をどこかしらに挿入すればいいと思うのですが、よくわかってません。
var imageHTML = message.image ? < img class="input-box__image" src="${message.image.url}" > : ""
こちらを下記ファイルに入れれば良いと思っているのですが、適切な配置と呼び出し方がわかりません。
該当のソースコード
var imageHTMLは仮置きしてあります。
呼び出しもよくわからず仮置きです。
js
1$(function(){ 2 3 function buildMessage(message){ 4 var imageHTML = message.image ? < img class="input-box__image" src="${message.image.url}" ></img> : "" 5 6 var html = `<div class="message"> 7 <div class="message__upper-info"> 8 <p class="message__upper-info__talker"> 9 ${message.user_name} 10 </p> 11 <p class="message__upper-info__date"> 12 ${message.created_at} 13 </p> 14 </div> 15 <p class="message__text"> 16 ${message.content} 17 </p> 18 imageHTML 19 </div>` 20 21 return html; 22 } 23 $('#new_message').on('submit', function(e){ 24 e.preventDefault(); 25 console.log(this) 26 var formData = new FormData(this); 27 var url = $(this).attr('action'); 28 29 30 $.ajax({ 31 url: url, 32 type: "POST", 33 data: formData, 34 dataType: 'json', 35 processData: false, 36 contentType: false 37 }) 38 .done(function(message){ 39 var html = buildMessage(message); 40 41 console.log(message) 42 43 $('.messages').append(html) 44 $('.new_message__text').val('') 45 $('.messages').animate({scrollTop:$('.messages')[0].scrollHeight}); 46 $('.submit-btn').removeAttr('disabled'); 47 }) 48 .fail(function(){ 49 alert('エラー'); 50 }) 51 }) 52 53});
ruby
1json.content @message.content 2json.created_at @message.created_at 3json.user_name @message.user.name 4json.image @message.image 5 6
ruby
1class MessagesController < ApplicationController 2 before_action :set_group 3 4 def index 5 @message = Message.new 6 @messages = @group.messages.includes(:user) 7 end 8 9 def create 10 # binding.pry 11 12 @message = @group.messages.new(message_params) 13 respond_to do |format| 14 format.html { redirect_to group_messages_path } 15 format.json 16 end 17 18 19 end 20
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。