Home>

Thank you very much for your help.

While referring to this page, we are currently implementing the "Like" function.
[Rails] Asynchronous implementation of like features !!!

I was able to implement the function itself, but asynchronous communication is not working well.

After various investigations, isn't jquery not loaded? I've reached that point, but I can't solve it from there.

In addition, jquery is installed by the following procedure.

in gemfile

gem'jquery-rails'


Added

Run bundle install

Add the following to application.js

// = require jquery3
// = require rails-ujs
// = require_tree.

Rebooting the local server

that's all.

The following error has occurred in the verification tool when the like button is pressed.

VM251: 1 Uncaught ReferenceError: $is not defined at : 1: 1 at processResponse (rails-ujs.js: 283) at rails-ujs.js: 196 at XMLHttpRequest.xhr.onreadystatechange (rails-ujs.js: 264)

I would appreciate it if anyone could help me.

Below is the code.

Index file that implements the like button

[Index.html]

~
<% = render partial:'likes/like', locals: {nutrition: nutrition}%>
~

[Views/likes/_like.html.erb]


<% if current_user.likes.find_by (nutrition_id: nutrition.id)%>
  <% = link_to unlike_path (nutrition.id), method:: delete, remote: true do%>
         ❤️<% = nutrition.likes.count%>
  <% end%>
<% else%>
  <% = link_to like_path (nutrition.id), method:: post, remote: true do%>
         ♡ ️<% = nutrition.likes.count%>
  <% end%>
<% end%>

[Views/likes/like.js.erb]

$("<% = @id_name%>"). html ("<% = j (render partial:'likes/like', locals: {nutrition: @nutrition})%>");

[Views/likes/dislike.js.erb]

$("<% = @id_name%>"). html ("<% = j (render partial:'likes/like', locals: {nutrition: @nutrition})%>");

[App/javascript/packs/application.js]

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.
// = require jquery
// = require rails-ujs
// = require turbolinks
// = require_tree.
require ("@ rails/ujs"). start ()
require ("turbolinks"). start ()
require ("@ rails/activestorage"). start ()
require ("channels")
require ("../ delete")

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g<% = image_pack_tag'rails.png'%>)
// or the `imagePath` JavaScript helper below.
// //
// const images = require.context ('../ images', true)
// const imagePath = (name) =>images (name, true)

I would appreciate your guidance.

  • Answer # 1

    https://stackoverflow.com/questions/62946298

    Although it is a sale of SO,
    application.jsIt may be improved by adding the following two lines to.

    window.jQuery = $;
    window. $= $;

  • Answer # 2

    This has been resolved!
    Apparently, the introduction method has changed from rails 6, and it seems that I referred to the article of the previous version.

    I referred to the introduction method of the following site.

    https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker/