質問編集履歴

6

「いいね」以外に「メッセージ投稿」もajax化している(こちらは正常に動く)ので、このファイルが何か干渉してしまっているのか?、と思い追記致しました。

2020/10/21 02:53

投稿

skem
skem

スコア1

test CHANGED
File without changes
test CHANGED
@@ -247,3 +247,195 @@
247
247
 
248
248
 
249
249
  ご指摘等ございましたら、よろしくお願い致します。
250
+
251
+ 【10/21 実施事項追記】
252
+
253
+ --
254
+
255
+ idを変えるとエラーが出るので、当初のコード(【10/17 実施事項追記】より以前)に戻しました。
256
+
257
+
258
+
259
+ この状態で「いいね」(または、いいね解除)を押すと、リアルタイムでは反映されないのですが、
260
+
261
+ - google chromeのconsole上でエラーは出ていない
262
+
263
+ - リロードしたら正しく反映される
264
+
265
+ - ターミナルを確認するとjsファイルが送られている履歴
266
+
267
+
268
+
269
+ 上記3点からJS側で何らかの通信設定が原因かと思います。
270
+
271
+
272
+
273
+ 「いいね」以外にメッセージ投稿機能を設置している(こちらは正常にajaxが機能する)のですが、
274
+
275
+ 下記ファイルとの兼ね合いで何か原因があるのか?
276
+
277
+
278
+
279
+ **app/assets/javascripts/comment.js**
280
+
281
+ ```ここに言語を入力
282
+
283
+ $(function(){
284
+
285
+
286
+
287
+ function buildHTML(j){
288
+
289
+ if ( j.content ) {
290
+
291
+ var html =
292
+
293
+ `<div class="message">
294
+
295
+ <div class="takerface">
296
+
297
+ <img src=${"https://imgc.eximg.jp/i=https%253A%252F%252Fs.eximg.jp%252Fexnews%252Ffeed%252FRen_ai%252FRen_ai_188420_6aed_1.jpg,zoom=600,quality=70,type=jpg"} >
298
+
299
+ </div>
300
+
301
+ <div class="contents">
302
+
303
+ <div class="takername">
304
+
305
+ ${j.user_name + " さんへ"}
306
+
307
+ </div>
308
+
309
+ <div class="letter">
310
+
311
+ <p class="lower-message__content">
312
+
313
+ ${j.content}
314
+
315
+ </p>
316
+
317
+ </div>
318
+
319
+ <div class="credo">
320
+
321
+ #仕事好き #親身心 #人生を変える
322
+
323
+ </div>
324
+
325
+
326
+
327
+ <div class="like">
328
+
329
+ <a href="users/${j.user_id}/messages/${j.message_id}/likes" data-method="post">
330
+
331
+ <i class="far fa-heart like-btn">
332
+
333
+ </i>
334
+
335
+ </a>
336
+
337
+ ${j.like_count}
338
+
339
+ </div>
340
+
341
+ </div>
342
+
343
+
344
+
345
+ <div class="message__date">
346
+
347
+ ${j.created_at}
348
+
349
+ </div>
350
+
351
+ <div class="more">
352
+
353
+ <ul class="more_list">
354
+
355
+ <li>
356
+
357
+ <a href="users/${j.user_id}/messages/${j.message_id}/edit">編集</a>
358
+
359
+ </li>
360
+
361
+ <li>
362
+
363
+ <a href="users/${j.user_id}/messages/${j.message_id}" data-method="delete">削除</a>
364
+
365
+ </li>
366
+
367
+ </ul>
368
+
369
+ </div>
370
+
371
+ </div>`
372
+
373
+ return html;
374
+
375
+ }
376
+
377
+ }
378
+
379
+
380
+
381
+ $('#new_message').on('submit', function(e){
382
+
383
+ e.preventDefault();
384
+
385
+ var formData = new FormData(this);
386
+
387
+ var url = $(this).attr('action');
388
+
389
+
390
+
391
+ $.ajax({
392
+
393
+ url: url, //同期通信でいう『パス』
394
+
395
+ type: 'POST', //同期通信でいう『HTTPメソッド』
396
+
397
+ data: formData,
398
+
399
+ dataType: 'json',
400
+
401
+ processData: false,
402
+
403
+ contentType: false
404
+
405
+ })
406
+
407
+
408
+
409
+ .done(function(data){
410
+
411
+ var html = buildHTML(data);
412
+
413
+ $('.messages').append(html);
414
+
415
+ $('form')[0].reset();
416
+
417
+ $('.messages').animate({ scrollTop: $('.messages')[0].scrollHeight});
418
+
419
+ $(".form__submit").removeAttr("disabled");
420
+
421
+ })
422
+
423
+
424
+
425
+ .fail(function() {
426
+
427
+ alert("メッセージ送信に失敗しました");
428
+
429
+ });
430
+
431
+
432
+
433
+ })
434
+
435
+ });
436
+
437
+ ```
438
+
439
+
440
+
441
+ 着目すべき視点等ご共有頂ければ幸いです。

5

更新

2020/10/21 02:53

投稿

skem
skem

スコア1

test CHANGED
File without changes
test CHANGED
@@ -243,3 +243,7 @@
243
243
 
244
244
 
245
245
  create.js.erbのlocals: {m: @like}が間違っている気もするので、調べてみたいと思います。
246
+
247
+
248
+
249
+ ご指摘等ございましたら、よろしくお願い致します。

4

現状

2020/10/18 08:21

投稿

skem
skem

スコア1

test CHANGED
File without changes
test CHANGED
@@ -239,3 +239,7 @@
239
239
  2: html("<%= j(render partial: 'likes/like', locals: {m: @like}) %>");
240
240
 
241
241
  ```
242
+
243
+
244
+
245
+ create.js.erbのlocals: {m: @like}が間違っている気もするので、調べてみたいと思います。

3

idを統一しました。

2020/10/17 03:38

投稿

skem
skem

スコア1

test CHANGED
File without changes
test CHANGED
@@ -215,3 +215,27 @@
215
215
  2: html("<%= j(render partial: 'likes/like', locals: {m: @like}) %>");
216
216
 
217
217
  ```
218
+
219
+
220
+
221
+ なので今度は、
222
+
223
+ viewファイルのidを、"likes_buttons_#{@message.id}"
224
+
225
+ create.js.erbのidを、'#likes_buttons_<%= @message.id %>'
226
+
227
+ と書き換えました。
228
+
229
+
230
+
231
+ 再々度「いいね」ボタンでチャレンジすると、ターミナルのエラーが下記に変わりました(consoleは上記同様のエラー)。
232
+
233
+ ```ここに言語を入力
234
+
235
+ ActionView::Template::Error (undefined method `id' for nil:NilClass):
236
+
237
+ 1: $('#likes_buttons_<%= @message.id %>').
238
+
239
+ 2: html("<%= j(render partial: 'likes/like', locals: {m: @like}) %>");
240
+
241
+ ```

2

エラー更新

2020/10/17 02:29

投稿

skem
skem

スコア1

test CHANGED
File without changes
test CHANGED
@@ -155,3 +155,63 @@
155
155
 
156
156
 
157
157
  ご助言頂ければ幸いです。
158
+
159
+
160
+
161
+ 【10/17 実施事項追記】
162
+
163
+ --
164
+
165
+ 他の記事に「idを統一する」と書かれていたので確認した所、
166
+
167
+ viewファイルが下記"likes_buttons_#{m.id}"で、
168
+
169
+ ```ここに言語を入力
170
+
171
+ .like
172
+
173
+ %div{:id => "likes_buttons_#{m.id}"}
174
+
175
+ = render partial: 'likes/like', locals: { m: m}
176
+
177
+ ```
178
+
179
+ create.js.erbが下記'#likes_buttons_<%= @like.id %>'のようになっていたので、
180
+
181
+ ```ここに言語を入力
182
+
183
+ $('#likes_buttons_<%= @like.id %>').
184
+
185
+ html("<%= j(render partial: 'likes/like', locals: {m: @like}) %>");
186
+
187
+ ```
188
+
189
+ create.js.erbのidを以下'#likes_buttons_<%= m.id %>'のように書き換えました。
190
+
191
+ ```ここに言語を入力
192
+
193
+ $('#likes_buttons_<%= m.id %>').
194
+
195
+ html("<%= j(render partial: 'likes/like', locals: {m: @like}) %>");
196
+
197
+ ```
198
+
199
+
200
+
201
+ 改めて「いいね」ボタンを押すと、今度はconsoleで以下のように出て、
202
+
203
+ ![イメージ説明](1768e4ebbf5cda5e6c164bc3e62be130.png)
204
+
205
+
206
+
207
+ ターミナルでは下記のように出ました。
208
+
209
+ ```ここに言語を入力
210
+
211
+ ActionView::Template::Error (undefined local variable or method `m' for #<#<Class:0x00007fb36301dab0>:0x00007fb3742adfd0>):
212
+
213
+ 1: $('#likes_buttons_<%= m.id %>').
214
+
215
+ 2: html("<%= j(render partial: 'likes/like', locals: {m: @like}) %>");
216
+
217
+ ```

1

部分テンプレートは、likes/_like.html.hamlです。

2020/10/17 01:57

投稿

skem
skem

スコア1

test CHANGED
File without changes
test CHANGED
@@ -16,7 +16,9 @@
16
16
 
17
17
  ```
18
18
 
19
+ 【**likes/_like.html.haml**】
20
+
19
- ```ここに言語を入力
21
+ ```
20
22
 
21
23
  - if current_user.already_like_this?(m)
22
24