質問編集履歴

2

当初の該当コードから編集されているため、追記しました。

2020/09/09 07:42

投稿

max3252
max3252

スコア4

test CHANGED
File without changes
test CHANGED
@@ -382,6 +382,8 @@
382
382
 
383
383
  ```
384
384
 
385
+ 追記:likesコントローラー、部分テンプレート、JavaScriptはサイト内の質問を参考に編集されています。
386
+
385
387
 
386
388
 
387
389
  ### 試したこと

1

サイト内の自分と同じ質問を参考に当初のエラーは解決しましたが、ページをリロードしないといいねが反映されずに非同期通信が実装できません。

2020/09/09 07:42

投稿

max3252
max3252

スコア4

test CHANGED
File without changes
test CHANGED
@@ -42,6 +42,8 @@
42
42
 
43
43
  これは、投稿者は詳細ページへ遷移できるが、投稿者以外のログインユーザーが詳細ページへ遷移しようとすると下記のエラーが発生するものです。
44
44
 
45
+ 追記:解決済み
46
+
45
47
 
46
48
 
47
49
  ```
@@ -54,19 +56,51 @@
54
56
 
55
57
  2.投稿者本人が自分の投稿にもいいねが押せるはずだが、ログアウト状態者ようのなにも反応しない黒いハートのまま
56
58
 
59
+ 追記:解決済み
60
+
57
61
 
58
62
 
59
63
  3.いいねがされた数を表示するためのコードを書くとエラーが出てしまう。
60
64
 
61
-
65
+ 追記:解決済み
66
+
67
+
68
+
62
-
69
+ 4.ページをリロードするといいねが反映され、データベース上にも保存されるが、非同期通信ができない。
70
+
71
+
72
+
63
- ```
73
+ ```
74
+
64
-
75
+ VM210:1 Uncaught ReferenceError: $ is not defined
76
+
77
+ at <anonymous>:1:1
78
+
79
+ at processResponse (rails-ujs.js:283)
80
+
81
+ at rails-ujs.js:196
82
+
83
+ at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js:264)
84
+
85
+ (anonymous) @ VM210:1
86
+
87
+ processResponse @ rails-ujs.js:283
88
+
89
+ (anonymous) @ rails-ujs.js:196
90
+
91
+ xhr.onreadystatechange @ rails-ujs.js:264
92
+
93
+ XMLHttpRequest.send (async)
94
+
95
+ ./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.ajax @ rails-ujs.js:216
96
+
97
+ ./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.handleRemote @ rails-ujs.js:652
98
+
99
+ (anonymous) @ rails-ujs.js:172
100
+
101
+ 3index.js:13 Uncaught TypeError: Cannot set property 'src' of null
102
+
65
- **NoMethodError in Posts#show**
103
+ at slideshow_timer (index.js:13)
66
-
67
- undefined method `like_count' for #<Post:0x00007f54a50>
68
-
69
- Did you mean? like_user
70
104
 
71
105
  ```
72
106
 
@@ -98,6 +132,8 @@
98
132
 
99
133
  class LikesController < ApplicationController
100
134
 
135
+ before_action :set_post
136
+
101
137
 
102
138
 
103
139
  def create
@@ -106,6 +142,10 @@
106
142
 
107
143
  @likes = Like.where(post_id: params[:post_id])
108
144
 
145
+ @like.save
146
+
147
+ @post = @like.post
148
+
109
149
  end
110
150
 
111
151
 
@@ -118,10 +158,24 @@
118
158
 
119
159
  @likes = Like.where(post_id: params[:post_id])
120
160
 
161
+ @post.reload
162
+
121
163
  end
122
164
 
123
165
 
124
166
 
167
+ private
168
+
169
+
170
+
171
+ def set_post
172
+
173
+ @post = Post.find(params[:post_id])
174
+
175
+ end
176
+
177
+
178
+
125
179
  end
126
180
 
127
181
 
@@ -202,69 +256,129 @@
202
256
 
203
257
  <% if user_signed_in? %>
204
258
 
259
+
260
+
205
- <% if @post.like_user(current_user.id) %>
261
+ <% unless post.like_user(current_user.id).blank? %>
206
-
262
+
207
- <%= link_to post_like_path(like, post_id: post.id), method: :delete, id: "like-button", remote: true do %>
263
+ <%= link_to post_like_path(post_id: post.id ,id: post.likes[0].id), method: :delete, remote: true do %>
264
+
208
-
265
+ <div class="vertical_like">
266
+
209
- <%= image_tag("icon_red_heart.png") %>
267
+ <%= image_tag("icon_red_heart.png") %>
210
-
268
+
211
- <span>
269
+ <span class="red-text">
212
-
270
+
213
- <%= post.like_count %>
271
+ <%= post.likes_count %>
272
+
273
+ </span>
274
+
275
+ </div>
276
+
277
+ <% end %>
278
+
279
+ <% else %>
280
+
281
+ <%= link_to post_likes_path(post.id), method: :post, remote: true do %>
282
+
283
+ <div class="vertical_like">
284
+
285
+ <%= image_tag("icon_heart.png") %>
286
+
287
+ <span class="grey-text text-darken-2">
288
+
289
+ <%= post.likes_count %>
290
+
291
+ </span>
292
+
293
+ </div>
294
+
295
+ <% end %>
296
+
297
+ <% end %>
298
+
299
+
300
+
301
+ <% else %>
302
+
303
+
304
+
305
+ <% if post.likes_count > 0 %>
306
+
307
+ <div class="vertical_like">
308
+
309
+ <i class="material-icons red-text">favorite</i>
310
+
311
+ <span class="red-text">
312
+
313
+ <%= post.likes_count %>
214
314
 
215
315
  </span>
216
316
 
217
- <% end %>
317
+ </div>
218
318
 
219
319
  <% else %>
220
320
 
221
- <%= link_to post_likes_path(@post.id), id: "like-button", remote: true do %>
222
-
223
- <%= image_tag("icon_heart.png") %>
321
+ <div class="vertical_like">
322
+
224
-
323
+ <i class="material-icons grey-text text-darken-2">favorite_border</i>
324
+
225
- <span>
325
+ <span class="grey-text text-darken-2">
226
-
326
+
227
- <%= post.like_count %>
327
+ <%= post.likes_count %>
228
328
 
229
329
  </span>
230
330
 
231
- <% end %>
331
+ </div>
232
332
 
233
333
  <% end %>
234
334
 
235
- <% else %>
335
+
236
-
237
- <%= image_tag("icon_heart.png") %>
238
-
239
- <span>
240
-
241
- <%= post.like_count %>
242
-
243
- </span>
244
336
 
245
337
  <% end %>
246
338
 
247
339
 
248
340
 
341
+
342
+
343
+
344
+
249
345
  ```
250
346
 
251
347
  likeモデルにてcounter_cacheの記述を書いているので、post.like_countとするだけでその投稿に結びつくlike数が表示されます。と参考記事にありましたが、<%= post.like_count %>を書くとエラーが出てしまいます。
252
348
 
253
349
  ちなみにlike_countのカラムはpostテーブルに追加済みで、型はitegerで設定しています。
254
350
 
351
+ 追記:上記エラー解決済み
352
+
255
353
 
256
354
 
257
355
  ```js
258
356
 
259
357
  #views/likes/create.js.erb
260
358
 
261
- $("#like-buttons").html("<%= j(render partial: 'like', locals: { posts: @posts, likes: @likes, like: @like}) %>")
359
+ $('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");
262
360
 
263
361
 
264
362
 
265
363
  #views/likes/destroy.js.erb
266
364
 
267
- $("#like-buttons").html("<%= j(render partial: 'like', locals: { posts: @posts, likes: @likes }) %>");
365
+ $('#likes_buttons_<%= @post.id %>').html("<%= j(render partial: 'likes/like', locals: {post: @post}) %>");
366
+
367
+ ```
368
+
369
+
370
+
371
+ 追加:呼び出したい部分で↓
372
+
373
+
374
+
375
+ ```html
376
+
377
+ <div id="likes_buttons_<%= @post.id %>">
378
+
379
+ <%= render partial: 'likes/like', locals: { post: @post, likes: @likes}, id:"likes_buttons_" %>
380
+
381
+ </div>
268
382
 
269
383
  ```
270
384
 
@@ -289,3 +403,11 @@
289
403
  他の情報が必要な場合は教えていただけると助かります。
290
404
 
291
405
  宜しくおねがいします!
406
+
407
+
408
+
409
+ 追記:上記エラーの1,2,3はサイト内の"https://teratail.com/questions/245199"様の質問を参考に(正確には質問者様の参考サイト)解決いたしました。
410
+
411
+ ただ、非同期通信にはならず、新たに4のエラーがでています。こちらのエラーはサイト内の質問を参考にして色々試しましたが、現在も解決できていません。
412
+
413
+ アドバイスをいただける方がいましたらお願いします