Home>

The like function is done by synchronization.

I want to implement a like function asynchronously.

The display does not change even if I click Like.
When I refresh the page, the following error appears in the verification tool console.

When I click the URL following the above error, 302 appears in two places.
swiper-bundle.min.css
swiper-bundle.min.js

Resource interpreted as Stylesheet but transferred with MIME type text/plain

When I click the URL following the above error, 302 appears in two places.
swiper-bundle.min.css
swiper-bundle.min.js

Corresponding source code

like controller

class LikesController</pre>
<p><br />
Post details page<br />
(views/ideas/show.idea.html.erb)</p>
<pre><code>Only the corresponding code is described
<tr>
<% = render'like', idea: @idea%>
</tr>


like partial template
(views/ideas/_like.html.erb)

<% if current_user.liked_by? (Idea.id)%>
<td><% = link_to'Unlike', destroy_like_path (idea), method :: DELETE, remote: true%><% = idea.likes.count%></td>
<% else%>
<td><% = link_to'Like', create_like_path (idea), method :: POST, remote: true%><% = idea.likes.count%></td>
<% end%>


(views/likes/create.js.erb)
(views/likes/destroy.js.erb)

$(". Idea_<% = @ idea.id%>"). html ("<% = j (render'ideas/like', idea: @idea)%>");
What I tried

The URL has changed from 302 Found. * This is a temporary change.
Tell the search engine that it will be available again soon.
It is used when temporarily skipping to another page for site maintenance.

So I guess render isn't working.
Move create.js and destroy.js to the ideas folder and change the specification to the partial template.
Then, the 302 error disappeared, but the display did not change.

In other words, the display did not change because it was not saved in the DB?
Just clicking the like does not save it in the DB.
If i reload it, it will be saved.

I searched for how to update the DB asynchronously, but I couldn't find the answer ...

Reorganize the flow of Ajax
① Event occurrence
② Asynchronous request transmission
③ Process the received information
④ Response the processing result in JSON format
⑤ Receive the response and update the page with DOM

Since ② was not completed, was it not saved in the DB and the display did not change?
Add the following

def create
   binding.pry
   Like.create (user_id: current_user.id, idea_id: params [: id])
end


Check the value sent by params [: id]
Confirm that the post id has been sent

Because there was no user_id
Check the data stored in Like.all

Check post id and user_id
Rendering problem as it has been saved

Check with binding.pry in (views/likes/create.js.erb)
>@idea
The data of the post is returned,
user_id is current_user

>@ idea.likes
id: 40,
user_id: 2,
idea_id: 7,

The processing itself seems to be done.
Isn't the page update part done?
In other words, if the partial template is loaded again after the save process, the display will change.

def create
  Like.create (user_id: current_user.id, idea_id: params [: id])
  @idea = Idea.includes (: likes) .find_by (id: params [: id])
end


I added the above, but it hasn't changed

Supplementary information (FW/tool version, etc.)

ruby 2.6.5
jQuery 3.5.1