質問編集履歴
4
補足追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -157,7 +157,6 @@
|
|
|
157
157
|
```
|
|
158
158
|
|
|
159
159
|
### 試したこと
|
|
160
|
-
|
|
161
160
|
エラー分で検索してもいまいちヒットしません。
|
|
162
161
|
|
|
163
162
|
console.log(item)を実行し、確認しました。レスポンスが返ってきているとは思うのでconst htmlの所の書き方がいけないんでしょうか...
|
|
@@ -171,4 +170,5 @@
|
|
|
171
170
|
以下、404エラーのターミナルです。
|
|
172
171
|
|
|
173
172
|
|
|
174
|
-
|
|
173
|
+
以下、@messagesの出力結果です。
|
|
174
|
+
|
3
モデルのコードを追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -24,6 +24,19 @@
|
|
|
24
24
|
resources :users, only: [:show, :edit, :update]
|
|
25
25
|
resources :rooms, only: [:new, :create, :destroy] do
|
|
26
26
|
resources :messages, only: [:index, :create]
|
|
27
|
+
end
|
|
28
|
+
end
|
|
29
|
+
```
|
|
30
|
+
```messageモデル
|
|
31
|
+
class Message < ApplicationRecord
|
|
32
|
+
belongs_to :room
|
|
33
|
+
belongs_to :user
|
|
34
|
+
has_one_attached :image
|
|
35
|
+
|
|
36
|
+
validates :content, presence: true, unless: :was_attached?
|
|
37
|
+
|
|
38
|
+
def was_attached?
|
|
39
|
+
self.image.attached?
|
|
27
40
|
end
|
|
28
41
|
end
|
|
29
42
|
```
|
2
コード更新、補足追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -38,8 +38,9 @@
|
|
|
38
38
|
|
|
39
39
|
def create
|
|
40
40
|
@message = @room.messages.new(message_params)
|
|
41
|
+
@user = @message.user
|
|
41
42
|
if @message.save
|
|
42
|
-
render json:{ message: @message}
|
|
43
|
+
render json:{ message: @message, user: @user}
|
|
43
44
|
else
|
|
44
45
|
@messages = @room.messages.includes(:user)
|
|
45
46
|
render :index
|
|
@@ -58,6 +59,29 @@
|
|
|
58
59
|
end
|
|
59
60
|
```
|
|
60
61
|
```message.js
|
|
62
|
+
const buildHTML = (XHR) => {
|
|
63
|
+
const item = XHR.response.message;
|
|
64
|
+
const user = XHR.response.user
|
|
65
|
+
const html = `
|
|
66
|
+
<div class="message">
|
|
67
|
+
<div class="upper-message">
|
|
68
|
+
<div class="message-user">
|
|
69
|
+
${user.name}
|
|
70
|
+
</div>
|
|
71
|
+
<div class="message-date">
|
|
72
|
+
${item.created_at}
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
<div class="lower-message">
|
|
76
|
+
<div class="message-content">
|
|
77
|
+
${item.content}
|
|
78
|
+
</div>
|
|
79
|
+
<img src= ${item.image} width="300" height="300" class: ”message-image" if message.image.attached?>
|
|
80
|
+
</div>
|
|
81
|
+
</div>`;
|
|
82
|
+
return html;
|
|
83
|
+
};
|
|
84
|
+
|
|
61
85
|
function message (){
|
|
62
86
|
const submit = document.getElementById("submit");
|
|
63
87
|
if (!submit){ return false;}
|
|
@@ -71,26 +95,14 @@
|
|
|
71
95
|
XHR.responseType = "json";
|
|
72
96
|
XHR.send(formData);
|
|
73
97
|
XHR.onload = () => {
|
|
98
|
+
if (XHR.status != 200) {
|
|
99
|
+
alert(`Error ${XHR.status}: ${XHR.statusText}`);
|
|
100
|
+
return null;
|
|
101
|
+
};
|
|
74
102
|
const list = document.getElementById("messagelist")
|
|
75
|
-
const item = XHR.response.message;
|
|
76
|
-
const html = `
|
|
77
|
-
<div class="message">
|
|
78
|
-
<div class="upper-message">
|
|
79
|
-
<div class="message-user">
|
|
80
|
-
${item.user.name}
|
|
81
|
-
</div>
|
|
82
|
-
<div class="message-date">
|
|
83
|
-
l ${item.created_at}
|
|
84
|
-
</div>
|
|
85
|
-
</div>
|
|
86
|
-
<div class="lower-message">
|
|
87
|
-
|
|
103
|
+
const formText = document.getElementById("content");
|
|
88
|
-
${item.content}
|
|
89
|
-
</div>
|
|
90
|
-
<img src=${item.image}, class: ”message-image">
|
|
91
|
-
</div>
|
|
92
|
-
</div>`;
|
|
93
|
-
list.insertAdjacentHTML("afterend",
|
|
104
|
+
list.insertAdjacentHTML("afterend", buildHTML(XHR));
|
|
105
|
+
formText.value = "";
|
|
94
106
|
};
|
|
95
107
|
});
|
|
96
108
|
};
|
|
@@ -110,25 +122,14 @@
|
|
|
110
122
|
</div>
|
|
111
123
|
```
|
|
112
124
|
```_chat.html.erb
|
|
113
|
-
|
|
125
|
+
〜略〜
|
|
114
|
-
|
|
126
|
+
<div class="messages">
|
|
115
|
-
<div class="header-title">
|
|
116
|
-
<%= @room.name %>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
<div class="right-header">
|
|
120
|
-
<div class="header-button">
|
|
121
|
-
<%= link_to "チャットルーム削除", room_path(@room), method: :delete %>
|
|
122
|
-
</div>
|
|
123
|
-
</div>
|
|
124
|
-
</div>
|
|
125
|
-
|
|
126
|
-
<di
|
|
127
|
+
<%= render partial: 'message', collection: @messages %>
|
|
127
128
|
</div>
|
|
128
129
|
|
|
129
130
|
<%= form_with model: [@room, @message], class: 'form', id: 'messageform' do |f| %>
|
|
130
131
|
<div class="form-input">
|
|
131
|
-
<%= f.text_field :content, class: 'form-message', placeholder: 'メッセージを入力' %>
|
|
132
|
+
<%= f.text_field :content, class: 'form-message', placeholder: 'メッセージを入力', id: "content" %>
|
|
132
133
|
<label class="form-image">
|
|
133
134
|
<span class="image-file">画像</span>
|
|
134
135
|
<%= f.file_field :image, class: 'hidden' %>
|
|
@@ -136,6 +137,10 @@
|
|
|
136
137
|
</div>
|
|
137
138
|
<%= f.submit '送信', class: 'form-submit', id: "submit" %>
|
|
138
139
|
<% end %>
|
|
140
|
+
```
|
|
141
|
+
```_message.html.erb
|
|
142
|
+
<div class="message", id="messagelist" >
|
|
143
|
+
</div>
|
|
139
144
|
```
|
|
140
145
|
|
|
141
146
|
### 試したこと
|
|
@@ -149,3 +154,8 @@
|
|
|
149
154
|
|
|
150
155
|
|
|
151
156
|
|
|
157
|
+
|
|
158
|
+
以下、404エラーのターミナルです。
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
|
1
補足情報にエラー画像記載
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -147,5 +147,5 @@
|
|
|
147
147
|
|
|
148
148
|
### 補足情報（FW/ツールのバージョンなど）
|
|
149
149
|
|
|
150
|
-
|
|
150
|
+
|
|
151
|
-
|
|
151
|
+
|