teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Javascriptにカスタムデータを取得しようとするとnulになる。

編集履歴

質問編集履歴

1

コードにタイプミスがあったため修正しています。

2020/12/18 03:43

投稿

MSSS.
MSSS.

スコア5

test CHANGED
@@ -1 +1 @@
1
- railsとJavascriptを使って非同期通信でコメントを投稿したい
1
+ Javascriptにカスタムデータを取得しようとするとnulになる。
test CHANGED
@@ -1,13 +1,25 @@
1
- それぞれの投稿に紐付いたコメント投稿をJavascriptで非同期で実装をしていますが
1
+ それぞれの投稿(preschool)に紐付いたコメント投稿をJavascriptで非同期で実装をしていますが
2
-
2
+
3
- パスの指定ができずエラーが出てしまい、質問させていただきたいです。
3
+ カスタムデータがnulになってしまいます。
4
-
5
-
6
4
 
7
5
  エラー内容
8
6
 
9
7
  -------
10
8
 
9
+ preschoolを親要素、commentを子要素のネストにしており
10
+
11
+ ```
12
+
13
+ data-id="<%= @preschool.id %>"
14
+
15
+ ```
16
+
17
+ 上記をビューに入れ込んでカスタムデータを取得しようとしている。
18
+
19
+
20
+
21
+
22
+
11
23
  ```Javascript
12
24
 
13
25
  function comment(){
@@ -16,13 +28,13 @@
16
28
 
17
29
  submit.addEventListener("click", (e) => {
18
30
 
31
+ const preschoolId = submit.getAttribute("data-id");
32
+
19
33
  const formData = new FormData(document.getElementById("comment-form"));
20
34
 
21
35
  const XHR = new XMLHttpRequest();
22
36
 
23
- debugger
24
-
25
- XHR.open("POST",`/preschools/${preschool.id}/comments`, true);
37
+ XHR.open("POST",`/preschools/${preschoolId}/comments`, true);
26
38
 
27
39
  XHR.responseType = "json";
28
40
 
@@ -38,7 +50,7 @@
38
50
 
39
51
  }
40
52
 
41
- const item = XHR.response.post;
53
+ const item = XHR.response.comment;
42
54
 
43
55
  const list = document.getElementById("comment-list");
44
56
 
@@ -80,17 +92,145 @@
80
92
 
81
93
  ```
82
94
 
83
- VM2297:1 Uncaught ReferenceError: preschool.id is not defined
95
+ preschoolId = null
84
-
85
- at eval (eval at <anonymous> (comment.js:6), <anonymous>:one:32)
96
+
86
-
87
- at HTMLInputElement.<anonymous> (comment.js:6)
88
-
89
- ```
97
+ ```
90
-
91
-
92
-
98
+
93
- とエラーが出ます。
99
+ となることによりパスの指定ができずエラーになってしまいます。
100
+
101
+
102
+
103
+
104
+
105
+ ```
106
+
107
+ <div class="detail-info" data-id="<%= @preschool.id %>" >
108
+
109
+ <div class="detail-name">園名
110
+
111
+ <%= @preschool.name %></div>
112
+
113
+ <div class="detail-name">
114
+
115
+ <% @preschool.images.each do |image| %>
116
+
117
+ <%= image_tag image, class: 'images' %>
118
+
119
+ <% end %>
120
+
121
+ </div>
122
+
123
+ <div class="detail-name">郵便番号
124
+
125
+ <%= @preschool.post_number %>
126
+
127
+ </div>
128
+
129
+ <div class="detail-name">エリア<%= @preschool.area.name%></div>
130
+
131
+ <div class="detail-name">詳細住所<%= @preschool.street_number %><%= @preschool.building %></div>
132
+
133
+ <div class="detail-name">電話番号
134
+
135
+ <%= @preschool.phone_number%>
136
+
137
+ </div>
138
+
139
+ <div class="detail-name">最寄り駅
140
+
141
+ <%= @preschool.station %></div>
142
+
143
+ <div class="detail-name">定員数
144
+
145
+ <%= @preschool.capacity %></div>
146
+
147
+ <div class="detail-name">運営種別
148
+
149
+ <%= @preschool.category.name%></div>
150
+
151
+ <div class="detail-name">開園時間
152
+
153
+ <%= l @preschool.open_hour, format: :short%>〜<%= l @preschool.close_hour ,format: :short%></div>
154
+
155
+ <div class="detail-name">園の特徴
156
+
157
+ <%= @preschool.concept%></div>
158
+
159
+ </div>
160
+
161
+ <% if admin_signed_in? && current_admin.id == @preschool.admin_id %>
162
+
163
+ <div class="preschool__manage">
164
+
165
+ <%= link_to "編集する", edit_preschool_path(@preschool.id), class: :preschool__btn %>
166
+
167
+ <%= link_to "削除する", preschool_path(@preschool.id), class: :preschool__btn,method: :delete %>
168
+
169
+ </div>
170
+
171
+ <% end%>
172
+
173
+
174
+
175
+ <div class="preschool__comments">
176
+
177
+ <% if user_signed_in? %>
178
+
179
+ <%= form_with( model: [@preschool, @comment], id: "comment-form",local: true) do |f|%>
180
+
181
+ <div class="field">
182
+
183
+ <%= f.label :text, "ママ友の口コミ",id:"comment-content" %><br />
184
+
185
+ <%= f.text_field :text %>
186
+
187
+ </div>
188
+
189
+ <div class="actions" >
190
+
191
+ <%= f.submit "送信する", class: :comment_form__btn ,id:"submit" %>
192
+
193
+ </div>
194
+
195
+ <% end %>
196
+
197
+ <% end%>
198
+
199
+
200
+
201
+ <div class="comments_lists" , id = "comment-list" >
202
+
203
+ <% @preschool.comments.each do |comment|%>
204
+
205
+ <li class="comments_list">
206
+
207
+ <%= comment.text%>
208
+
209
+ <%= link_to "#{comment.user.nickname}さん", "/users/#{comment.user_id}",class: :comment_user %>
210
+
211
+ </li>
212
+
213
+ <% if user_signed_in? && current_user.id == comment.user_id %>
214
+
215
+ <div class="comments_manage">
216
+
217
+ <%= link_to "編集", edit_preschool_comment_path(comment.id), class: :comment_edit__btn %>
218
+
219
+ <%= link_to "削除", preschool_comment_path(@preschool,comment), class: :comment_destroy_btn,method: :delete %>
220
+
221
+ </div>
222
+
223
+ <% end%>
224
+
225
+ <% end %>
226
+
227
+ </div>
228
+
229
+
230
+
231
+
232
+
233
+ ```
94
234
 
95
235
 
96
236
 
@@ -102,56 +242,24 @@
102
242
 
103
243
  ----------
104
244
 
245
+
246
+
105
- ```Javascript
247
+ そもそもビューでIDを取得できるか再確認しました。
106
-
107
- XHR.open("POST",`/preschools/${preschool.id}/comments`, true);
248
+
108
-
109
- ```
249
+ ```
110
-
111
- のURLが参照できないというエラーだと思われるので
250
+
112
-
113
- gonをインストールし、コントローラーも修正しました。
114
-
115
- ```controller
116
-
117
- def show
118
-
119
- @preschool =Preschool.find(params[:id])
120
-
121
- gon.preschool_id = @preschool.id
251
+ <%= @preschool.id %>
122
-
123
- @comment = Comment.new
252
+
124
-
125
- @comments=@preschool.comments.includes(:user).order(created_at: :DESC)
253
+
126
-
127
- end
254
+
128
-
129
- ```
255
+ ```
130
-
131
-
132
-
133
- ```
256
+
134
-
135
- XHR.open("POST",`/preschools/${gon.preschool_id}/comments`, true);
257
+ をshow.html.erbに書き込むと指定のIDのが取得されました。
136
-
137
- ```
258
+
138
-
139
-
140
-
259
+
260
+
141
- エラー内容は変わらずでした。
261
+ ビューで取得できるか再確認しました。
142
-
143
-
144
-
145
-
146
-
147
- ```
262
+
148
-
149
- `/preschools/${preschool.id}/comments`
263
+ <%= @preschool.id %>
150
-
151
- ```
264
+
152
-
153
- をJavascriptで参照できるようにしたいのですが
154
-
155
- どのように記述をしたらいいのでしょうか。。
156
-
157
- パスはrails routeで確認しあっているかと思われます。
265
+ をshow.html.erbに書き込むと指定のIDのが取得されました。