質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

2回答

1876閲覧

非同期通信にて、imageの有無で返すhtmlを変えたい

Masatomo_Sugai

総合スコア11

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2019/07/07 15:13

編集2019/07/08 01:08

前提・実現したいこと

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

仮置きした場所で問題ありませんでした。
ありがとうございました。

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

投稿2019/07/10 13:09

Masatomo_Sugai

総合スコア11

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

具体的にどういうときにどうやってimgを非同期処理したいのかわかりませんが
そもそもimgの呼び出しは常に非同期です
(imgタグもしくはImageオブジェクトを用意しsrcを指定すると非同期で呼び出しが開始されます)

追記

画像のありなしを確認

javascript

1var img=new Image; 2img.addEventListener('load',function(e){ 3 console.log("exists"); 4}); 5img.addEventListener('error',function(e){ 6 console.log("not exists"); 7}); 8img.src="hoge.jpg";

まあ実際にはエラーの原因はもっといろいろあるはずですが
一応きりわけだけ

投稿2019/07/08 00:25

編集2019/07/08 01:27
yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Masatomo_Sugai

2019/07/08 01:10

コメントありがとうございます。 質問内容を編集してみました。 メッセージや画像を投稿した時に、 メッセージだけの時はメッセージだけ返したいのですが、 var html = ....の中にimaタグを埋め込むと、画像がない時もimgタグが返されてしまうので、このように条件分岐させたいのですが、いまいちうまくできませんでした。
yambejp

2019/07/08 01:27

存在確認の方法だけ追記しました
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問