Currently I want to do the like function asynchronously, but it doesn't work.
There is no error screen.

Models are created by users (User), posted information (UserInfo), and favorites (Favorite).
The flow is such that the user likes the posted information of others.

The current situation is
-The color does not change unless you press the favorite button or release button to reload.
-If i look at the database before reloading by pressing the favorite button or release button, the data is reflected.
It's like that.

Corresponding source code

This is index.html.erb displaying the posted information.

・<% = Render partial:'favorites/favorite', locals: {user_info: user_info}%>・

This is the favorites/favorite file. In the above index file, it will be the file specified by render partial.

<% if user_signed_in?&&user_info.user_id! = current_user.id%><% if user_info.favorited_by? (Current_user)%><p><% = link_to "Favorite", user_info_favorite_path (user_info.id, 1), class: "white", method:: delete, remote: true%></p><% else%><p><% = link_to "favorite", user_info_favorites_path (user_info.id), class: "white", method:: post, remote: true%></p><% end%><% end%>

This is 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 ("@ rails/ujs"). start ()
//require("turbolinks"). start ()
require ("@ rails/activestorage"). start ()require ("channels")
// require ('jquery')

// 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)

This is create.js.erb.

$('# js-favorites-buttons-for-board-<% = @ user_info.id%>'). html ("<% = j (render partial:'favorites/favorites', locals: {user_info: @user_info" })%>");

This is destroy.js.erb.

$('# js-favorites-buttons-for-board-<% = @ user_info.id%>'). html ("<% = j (render partial:'favorites/favorites', locals: {user_info: @user_info" })%>")

This is a favorites controller.

def create
    @user_info = UserInfo.find (params [: user_info_id])
    favorite = current_user.favorites.build (user_info_id: params [: user_info_id])
  def destroy
    @user_info = UserInfo.find (params [: user_info_id])
    favorite = Favorite.find_by (user_info_id: params [: user_info_id],

 user_id: current_user.id)
What I tried

Favorite registrationkazukimatsumotoMr. AjaxnaberinaI am using this site as a reference with some changes.

At first, I copied the whole Ajax code and saw it, but I got a NoMethodError (;;).
Based on that, I changed application.js etc. to the present.

gem'jquery-rails' is installed and the server is restarting.

Addendum (1): I commented out require ("turbolinks"). Start () in application.js, but it didn't change.

Addendum ②
This is the terminal when you press the favorite button.

Processing by FavoritesController # create as JS
  Parameters: {"user_info_id" =>"15"}
  UserInfo Load (0.5ms) SELECT ʻuser_infos`. * FROM ʻuser_infos` WHERE ʻuser_infos` .ʻid` = 15 LIMIT 1
  ↳ app/controllers/favorites_controller.rb: 40: in `set_user_info'
  CACHE UserInfo Load (0.0ms) SELECT ʻuser_infos`. * FROM ʻuser_infos` WHERE ʻuser_infos`.ʻid` = 15 LIMIT 1 [["id", 15],

 ["LIMIT", 1]]
  ↳ app/controllers/favorites_controller.rb: 27: in `create'
  User Load (0.4ms) SELECT ʻusers`. * FROM ʻusers` WHERE ʻusers` .ʻid` = 10 ORDER BY ʻusers` .ʻid` ASC LIMIT 1
  ↳ app/controllers/favorites_controller.rb: 28: in `create'
   (0.1ms) BEGIN
  ↳ app/controllers/favorites_controller.rb: 29: in `create'
  UserInfo Load (0.2ms) SELECT ʻuser_infos`. * FROM ʻuser_infos` WHERE ʻuser_infos` .ʻid` = 15 LIMIT 1
  ↳ app/controllers/favorites_controller.rb: 29: in `create'
  Favorite Create (0.2ms) INSERT INTO `favorites` (ʻuser_id`, ʻuser_info_id`,` created_at`, ʻupdated_at`) VALUES (10, 15, '2020-10-06 11: 47: 52.759534', '2020- 10-06 11: 47: 52.759534')
  ↳ app/controllers/favorites_controller.rb: 29: in `create'
   (0.6ms) COMMIT
  ↳ app/controllers/favorites_controller.rb: 29: in `create'
  Rendering favorites/create.js.erb
  Favorite Exists? (0.3ms) SELECT 1 AS one FROM `favorites` WHERE` favorites` .ʻuser_info_id` = 15 AND `favorites` .ʻuser_id` = 10 LIMIT 1
  ↳ app/models/user_info.rb: 24: in `favorited_by?'
  Rendered favorites/_favorite.html.erb (Duration: 1.7ms | Allocations: 940)
  Rendered favorites/create.js.erb (Duration: 1.9ms | Allocations: 1043)
Completed 200 OK in 15ms (Views: 2.1ms | ActiveRecord: 2.4ms | Allocations: 7413)

Addendum ③: I commented out because there was an error on the console for require ('jquery') of application.js. After that, when I pressed the button, the following error occurred.

VM298: 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)
  • Answer # 1

    It was solved by writing the following in the index.
    Thank you to those who thought about it.

    <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Related articles