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

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

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

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

Q&A

解決済

1回答

1075閲覧

2つの異なるテーブルのデータを同一のviewに作成時間順に表示させたい

tomoZQ

総合スコア14

Haml

Haml(HTML abstraction markup language)は、HTML/XHTMLを効率的に記述するためのマークアップ言語および記法です。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails 6

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

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

0グッド

0クリップ

投稿2020/07/17 07:42

編集2020/07/18 19:08

前提・実現したいこと

railsでグループが作成でき、その中で以下2つのことができるアプリを開発しています。
①グループメンバー同士のチャット
②グループごとに場所(store)を登録でき、そのstoreについてメンバーがコメントをすることができる。
チャットにはmessageテーブル、storeに対してのコメントはinformというテーブルを設けています。
チャット画面:views/messages/index
informが作成された時にviews/messages/indexにも表示をさせたいと思い、messageControllerのindexアクションに@informを定義することでviews/messages/indexにinformを表示させることはできました。
表示順をmessage,informどちらもを含んだ作成された順に並べたいです。

発生している問題・エラーメッセージ

現状作成されたinformは全ての下に追加され、画面をリロードするとmessageが上、informが下のように別れてしまいます。
1.store#createでinformを作成
→informs/index, messages/indexに表示される。
2.messages/indexでmessageをcreate(非同期通信)
→messages/indexの1で表示されたinformの下にスクロールして表示。
3.画面をリロード
→messageが上、informが下に別れてしまう。

エラー文はありません。

該当のソースコード

ruby

1#messageController (index, create) 2def index 3 @message = Message.new 4 @messages = @group.messages.includes(:user).order("created_at DESC") 5 @informs = Inform.where(params[:group_id]) 6end 7 8def create 9 @message = @group.messages.new(message_params) 10 if @message.save 11 respond_to do |format| 12 format.json 13 end 14 else 15 @messages = @group.messages.includes(:user) 16 flash.now[:alert] = 'メッセージを入力してください。' 17 render :index 18 end 19end

haml

1.show-lists__chat-main 2 .show-lists__chat-main__message-lists 3 .show-lists__chat-main__message-lists__contents 4 - @group.messages.each do |message| 5 .show-lists__chat-main__message-lists__contents__content 6 .show-lists__chat-main__message-lists__contents__content__left 7 .show-lists__chat-main__message-lists__contents__content__left__name 8 = message.user.name 9 .show-lists__chat-main__message-lists__contents__content__left__text 10 = message.content 11 = image_tag message.image.url, class: '.show-lists__chat-main__message-lists__contents__content__left__text__img' if message.image.present? 12 .show-lists__chat-main__message-lists__contents__content__right 13 .show-lists__chat-main__message-lists__contents__content__right__time-stamp 14 = message.created_at 15 -if @informs 16 - @informs.each do |inform| 17 .show-lists__chat-main__message-lists__contents__content1 18 .show-lists__chat-main__message-lists__contents__content1__left 19 .show-lists__chat-main__message-lists__contents__content1__left__name 20 = inform.user.name 21 .show-lists__chat-main__message-lists__contents__content1__left__store-name 22 = inform.store.name 23 .show-lists__chat-main__message-lists__contents__content1__left__text 24 = inform.content 25 .show-lists__chat-main__message-lists__contents__content1__right 26 .show-lists__chat-main__message-lists__contents__content1__right__time-stamp 27 = inform.created_at

javascript

1$(function(){ 2 function buildHTML(message){ 3 if (message.image) { 4 let html = ` 5 <div class="show-lists__chat-main__message-lists__contents__content"> 6 <div class="show-lists__chat-main__message-lists__contents__content__left"> 7 <div class="show-lists__chat-main__message-lists__contents__content__left__name"> 8 ${message.user_name} 9 </div> 10 <div class="show-lists__chat-main__message-lists__contents__content__left__text"> 11 ${message.content} 12 <img class=".show-lists__chat-main__message-lists__contents__content__left__text__img" src="${message.image}"> 13 </div> 14 </div> 15 <div class="show-lists__chat-main__message-lists__contents__content__right"> 16 <div class="show-lists__chat-main__message-lists__contents__content__right__time-stamp"> 17 ${message.created_at} 18 </div> 19 </div> 20 </div> 21 ` 22 return html; 23 } else { 24 let html = ` 25 <div class="show-lists__chat-main__message-lists__contents__content"> 26 <div class="show-lists__chat-main__message-lists__contents__content__left"> 27 <div class="show-lists__chat-main__message-lists__contents__content__left__name"> 28 ${message.user_name} 29 </div> 30 <div class="show-lists__chat-main__message-lists__contents__content__left__text"> 31 ${message.content} 32 </div> 33 </div> 34 <div class="show-lists__chat-main__message-lists__contents__content__right"> 35 <div class="show-lists__chat-main__message-lists__contents__content__right__time-stamp"> 36 ${message.created_at} 37 </div> 38 </div> 39 </div> 40 ` 41 return html 42 } 43} 44 $(function(){ 45 $('.chat-main__message-form__Form').on("submit", function(e){ 46 47 e.preventDefault(); 48 let formData = new FormData(this); 49 console.log(formData) 50 let url = $(this).attr('action'); 51 52 $.ajax({ 53 url: url, //同期通信でいう『パス』 54 type: 'POST', //同期通信でいう『HTTPメソッド』 55 data: formData, 56 dataType: 'json', 57 processData: false, 58 contentType: false 59 }) 60 61 .done(function(data){ 62 let html = buildHTML(data); 63 $('.show-lists__chat-main__message-lists__contents').append(html); 64 $('form')[0].reset(); 65 $('.show-lists__chat-main__message-lists').animate({ scrollTop: $('.show-lists__chat-main__message-lists')[0].scrollHeight}); 66 $('.chat-main__message-form__Form__btn-send').prop('disabled', false); 67 }) 68 .fail(function() { 69 alert("メッセージ送信に失敗しました"); 70 $('.chat-main__message-form__Form__btn-send').prop('disabled', false); 71 }); 72 }) 73 74}) 75});

試したこと

hamlを見る限り画面をリロードするとこのように並んでしまうことはわかるのですが、どうすれば間にinformを入れていけるのかがわかりません。
messageのeach文の直下にinformのeach文を入れて、各inform.name, inform.contentを記述してみましたが、messageとinformが合成されて表示されるだけでした。

補足情報(FW/ツールのバージョンなど)

MySQL 5.6.47
sequel Pro
Rails 6.0.3.2

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

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

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

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

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

guest

回答1

0

ベストアンサー

そりゃそうです。viewが
`- @group.messages.each do |message|
-if @informs

  • @informs.each do |inform|`となってますから、まず messagesをかきその後にinformを書くようになってます。

ごちゃまぜにするなら、@models = (@group.messages + @informs).sort_by{|model| model.created_at} としておいて
@models.each do |model としてmodelを処理します。
厄介なのは message と inform でどのcolumnを書き出すのか、が異なること
スマートでないですが
`- if model.is_a?(Message)
message の 記述

  • else
    infoの記述`

とする。
viewを見やすくしたいなら、Message、Informsの双方に、
例えばMessageには
def column1 ; user.name ; end def column2 ; content; end def column3 ; image.url;end def column4 ; created_at ;end
のようなのを作ってviewで = model.column1 で済ませる。
columnにかぶせる classが同じでないとだめだけど、
show-lists__chat-main__message-lists__contents__content1__left__store-name
こんなclass名使ってる?自動生成っぽい。。。

投稿2020/07/19 00:27

winterboum

総合スコア23284

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

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

tomoZQ

2020/07/19 07:55

ありがとうございます。 上記記述で思い通りの表示をさせることができました。 ``` @models = (@○○ + @○○).sort_by{|model| model.created_at} ``` ``` - if model.is_a?(Message) message の 記述 - else infoの記述 ``` の記述、よく覚えておくように致します。
winterboum

2020/07/19 09:47 編集

記憶に留めて欲しいのはむしろ「厄介なのは message と inform でどのcolumnを書き出すのか、が異なること」 同じ位置に書き出すことになるものは同じ名前にしておきましょう。 ダックタイピングっていいます(ちょっと違うかもですが)
tomoZQ

2020/07/19 13:30

承知致しました。ご指導ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問