質問編集履歴

10

編集

2023/10/23 11:33

投稿

ninjawanko3d
ninjawanko3d

スコア5

test CHANGED
File without changes
test CHANGED
@@ -319,3 +319,7 @@
319
319
 
320
320
  end
321
321
  ```
322
+
323
+ ------------------------------------------------------
324
+
325
+ **10000字をオーバーするため質問を改めます**

9

編集を施した

2023/10/23 11:31

投稿

ninjawanko3d
ninjawanko3d

スコア5

test CHANGED
File without changes
test CHANGED
@@ -32,11 +32,242 @@
32
32
 
33
33
  ご回答のおかげにより以下のようなコードに書き換えさせていただいたところ、図2のようなエラー?が発生しました!
34
34
 
35
+
36
+
37
+ 次からエラー?というか失敗画像
38
+ 図1
39
+ /app/viws/likes/_likesの12行目をクリックしたところ図1から図2のようになりました!
40
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/a33dc1ed-5ac1-4716-a073-e0e0d07e4964.png)
41
+
42
+ ここで一番上のハートを押すと.....
43
+                   l
44
+ l
45
+ l
46
+ 図2
47
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/da5da13a-0ed7-45d0-a740-1f09ac7a6dce.png)
48
+
49
+
50
+
51
+
52
+ -----------------------------------------
53
+
54
+ このようになってしまいます”!!!
55
+ 解決法はあるのでしょうか?!
56
+ ご教授お願いいたします!
57
+
58
+ ----------------------------------------------------------
59
+
60
+ ```ruby/Gamefile
61
+ source "https://rubygems.org"
62
+ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
63
+
64
+ ruby "3.2.2"
65
+
66
+ # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
67
+ gem "rails", "~> 7.0.4", ">= 7.0.4.3"
68
+
69
+ gem 'jquery-rails'
70
+
71
+ gem 'bootstrap', '~> 4.4.1'
72
+
73
+ gem 'googleauth'
74
+
75
+ gem 'dotenv-rails'
76
+
77
+ gem 'omniauth', '1.9.1'
78
+
79
+ gem 'omniauth-google-oauth2'
80
+
81
+ gem 'devise'
82
+
83
+ # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
84
+ gem "sprockets-rails"
85
+
86
+ # Use sqlite3 as the database for Active Record
87
+ gem "sqlite3", "~> 1.4"
88
+
89
+ # Use the Puma web server [https://github.com/puma/puma]
90
+ gem "puma", "~> 5.0"
91
+
92
+ # Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
93
+ gem "importmap-rails"
94
+
95
+ # Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
96
+ gem "turbo-rails"
97
+
98
+ # Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
99
+ gem "stimulus-rails"
100
+
101
+ # Build JSON APIs with ease [https://github.com/rails/jbuilder]
102
+ gem "jbuilder"
103
+
104
+ # Use Redis adapter to run Action Cable in production
105
+ # gem "redis", "~> 4.0"
106
+
107
+ # Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
108
+ # gem "kredis"
109
+
110
+ # Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
111
+ # gem "bcrypt", "~> 3.1.7"
112
+
113
+ # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
114
+ gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
115
+
116
+ # Reduces boot times through caching; required in config/boot.rb
117
+ gem "bootsnap", require: false
118
+
119
+ # Use Sass to process CSS
120
+ # gem "sassc-rails"
121
+
122
+ # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
123
+ # gem "image_processing", "~> 1.2"
124
+
125
+ group :development, :test do
126
+ # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
127
+ gem "debug", platforms: %i[ mri mingw x64_mingw ]
128
+ end
129
+
130
+ group :development do
131
+ # Use console on exceptions pages [https://github.com/rails/web-console]
132
+ gem "web-console"
133
+
134
+ # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
135
+ # gem "rack-mini-profiler"
136
+
137
+ # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
138
+ # gem "spring"
139
+ end
140
+
141
+ group :test do
142
+ # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
143
+ gem "capybara"
144
+ gem "selenium-webdriver"
145
+ gem "webdrivers"
146
+ end
147
+
148
+ ```
149
+ ---------------------------------------------------------------------------------
150
+
151
+ ```JavaScript/app/javascript/application.js
152
+ // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
153
+
154
+
155
+ import jQuery from "jquery";
156
+ window.$ = window.jQuery = jQuery;
157
+ import("jquery-ui-dist")
158
+ import("./custom/jQuery1.js")
159
+
160
+ ```
161
+
162
+ ---------------------------------------
163
+
164
+ ```JavaScript/app/javascript/custom/jQuery1.js
165
+ $(function(){
166
+ $(document).ready(function() {
167
+ $('#login-show').click(function(){
168
+ $('#login-modal, #overlay').fadeIn();
169
+ });
170
+ $('#overlay, .close-modal').click(function(){
171
+ $('#overlay, #login-modal').fadeOut();
172
+ });
173
+ });
174
+ });
175
+
176
+ $(function(){
177
+ $(document).ready(function() {
178
+ $('#posted-show').click(function(){
179
+ $('#posted-modal, #posted-overlay').fadeIn();
180
+ });
181
+ $('#posted-overlay, .close-modal').click(function(){
182
+ $('#posted-overlay, #posted-modal').fadeOut();
183
+ });
184
+ });
185
+ });
186
+
187
+ $(function(){
188
+ $(document).ready(function() {
189
+ $('.three-dot-leader').click(function(){
190
+ $('.posted-detail, .posted-detail-overlay').fadeIn();
191
+ });
192
+ $('.posted-detail-overlay').click(function(){
193
+ $('.posted-detail-overlay, .posted-detail').fadeOut();
194
+ });
195
+ });
196
+ });
197
+
198
+ const init = 4 //初期表示数
199
+ const more = 4 //追加表示数
200
+
201
+ // 初期表示数以降のリスト内容を非表示に
202
+ $(".more-list div:nth-child(n+" + (init+1) + ")").hide()
203
+
204
+ //初期表示数以下であればMoreボタンを非表示
205
+ $(".more-list").filter(function(){
206
+ return $(this).find("a").length <= init
207
+ }).find(".more-btn").hide()
208
+
209
+ // Moreボタンクリックで指定数表示
210
+ $(".more-btn").on("click",function(){
211
+ let this_list = $(this).closest(".more-list")
212
+ this_list.find("div:hidden").slice(0,more).slideToggle()
213
+
214
+ if(this_list.find("div:hidden").length == 0){
215
+ $(this).fadeOut()
216
+ }
217
+ })
218
+
219
+ // 3点リーダーを押したときその投稿のid保存
220
+
221
+
222
+ // 削除項目出すやつ各々表示
223
+
224
+ ```
225
+ -----------------------------------------------------------
226
+
227
+ ```ruby/app/config/importmap.rb
228
+ # Pin npm packages by running ./bin/importmap
229
+
230
+ pin "application", preload: true
231
+ pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"
232
+ pin "jquery-ui-dist", to: "https://ga.jspm.io/npm:jquery-ui-dist@1.13.1/jquery-ui.js"
233
+ pin_all_from 'app/javascript/custom', under: 'custom'
234
+
235
+ ```
236
+ --------------------------------------------------------
237
+
238
+ 参考によろしくお願いします!!!
239
+
240
+ ----------------------------
241
+
242
+ 10/22更新
243
+
244
+ 試しに<%= turbo %> 部分をコメントアウトしてみたのですが表示画面が同様に図2になりました泣
245
+
246
+
247
+
248
+ ---------------------------------------------------------------------------------------------
249
+
250
+ 10/23更新
251
+
252
+ 以下のサイトを参考にturboを用いてコードを書き換え図1のハートボタンを押したところ図3のようなビューに移行しました。
253
+
254
+ 参考サイト
255
+ https://blog.aiandrox.com/posts/tech/2021/09/10/
256
+
257
+ https://zenn.dev/shita1112/books/cat-hotwire-turbo/viewer/turbo-streams-fetch
258
+
259
+ 図3
260
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-23/53c9dade-09c2-42de-b842-859b4e19e5db.png)
261
+
262
+ --------------------------------------------
263
+ 変更したコード
264
+
35
265
  ```erb/app/viws/likes/_likes
36
- +<% if @posted %>
266
+ <% if @posted %>
37
- + <% post = @posted %>
267
+ <% post = @posted %>
38
- +<% end %>
268
+ <% end %>
39
- <%= turbo_frame_tag :like_buttons do %>
269
+ <%# turbo_stream.update :like_buttons do %>
270
+ <turbo_stream id="like_buttons">
40
271
  <% if Liker.find_by(content: session[:user_id],content2: post.id) %>
41
272
  <%= link_to "/likes/#{post.id}/destroy" do %>
42
273
  <span class="fa fa-heart liked-btn"></span>
@@ -44,20 +275,23 @@
44
275
  <% else %>
45
276
  <%# link_to "/likes/#{post.id}/create", remote: true do %>
46
277
  <%# 下記リンクをクリックしたとき、`like_buttons ` という名前の Turbo Frame を更新する %>
47
- <%= link_to "/likes/#{post.id}/create", data: { turbo_frame: :like_buttons } do %>
278
+ <%= link_to "/likes/#{post.id}/create" do %>
48
279
  <span class="fa fa-heart unliked-btn"></span>
49
280
  <% end %>
50
281
  <% end %>
51
282
  <div>
52
283
  <%= Liker.where(content2: post.id).count %>
53
284
  </div>
285
+ </turbo-frame>
54
- <% end %>
286
+ <%# end %>
55
- ```
287
+ ```
288
+
56
289
  ```ruby/app/controllers/likescontroller
57
290
  class LikesController < ApplicationController
58
291
  before_action :authenticate_user
59
292
  def create
60
293
  @posted = Posted.find_by(id: params[:post_id])
294
+ @posts = Posted.all.order(created_at: :desc)
61
295
  if !Liker.find_by(content: session[:user_id], content2: params[:post_id])
62
296
  @like = Liker.new(
63
297
  content: session[:user_id],
@@ -65,220 +299,23 @@
65
299
  )
66
300
  @like.save
67
301
  end
302
+ render turbo_stream: turbo_stream.update(
303
+ 'like-buttons',
304
+ partial: 'likes/likes',
305
+ locals: { post: @posted}
306
+ )
307
+ #format.html { render :_likes }
68
- render :_likes
308
+ #render :_likes
69
309
  end
70
- 以下略
310
+
71
- ```
72
-
73
- 次からエラー?というか失敗画像
311
+ def destroy
74
- 図1
75
- /app/viws/likes/_likesの12行目をクリックしたところ図1から図2のようになりました!
76
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/a33dc1ed-5ac1-4716-a073-e0e0d07e4964.png)
77
-
78
- ここで一番上のハートを押すと.....
312
+ @like = Liker.find_by(
313
+ content: session[:user_id],
314
+ content2: params[:post_id]
79
-                   l
315
+ )
80
- l
81
- l
82
- 図2
83
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/da5da13a-0ed7-45d0-a740-1f09ac7a6dce.png)
84
-
85
-
86
-
87
-
88
- -----------------------------------------
89
-
90
- このようになってしまいます”!!!
91
- 解決法はあるのでしょうか?!
316
+ @like.destroy
92
- ご教授お願いいたします!
93
-
94
- ----------------------------------------------------------
95
-
96
- ```ruby/Gamefile
97
- source "https://rubygems.org"
98
- git_source(:github) { |repo| "https://github.com/#{repo}.git" }
99
-
100
- ruby "3.2.2"
317
+ redirect_to("/")
101
-
102
- # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
103
- gem "rails", "~> 7.0.4", ">= 7.0.4.3"
104
-
105
- gem 'jquery-rails'
106
-
107
- gem 'bootstrap', '~> 4.4.1'
108
-
109
- gem 'googleauth'
110
-
111
- gem 'dotenv-rails'
112
-
113
- gem 'omniauth', '1.9.1'
114
-
115
- gem 'omniauth-google-oauth2'
116
-
117
- gem 'devise'
318
+ end
118
-
119
- # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
319
+
120
- gem "sprockets-rails"
121
-
122
- # Use sqlite3 as the database for Active Record
123
- gem "sqlite3", "~> 1.4"
124
-
125
- # Use the Puma web server [https://github.com/puma/puma]
126
- gem "puma", "~> 5.0"
127
-
128
- # Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
129
- gem "importmap-rails"
130
-
131
- # Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
132
- gem "turbo-rails"
133
-
134
- # Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
135
- gem "stimulus-rails"
136
-
137
- # Build JSON APIs with ease [https://github.com/rails/jbuilder]
138
- gem "jbuilder"
139
-
140
- # Use Redis adapter to run Action Cable in production
141
- # gem "redis", "~> 4.0"
142
-
143
- # Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
144
- # gem "kredis"
145
-
146
- # Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
147
- # gem "bcrypt", "~> 3.1.7"
148
-
149
- # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
150
- gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
151
-
152
- # Reduces boot times through caching; required in config/boot.rb
153
- gem "bootsnap", require: false
154
-
155
- # Use Sass to process CSS
156
- # gem "sassc-rails"
157
-
158
- # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
159
- # gem "image_processing", "~> 1.2"
160
-
161
- group :development, :test do
162
- # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
163
- gem "debug", platforms: %i[ mri mingw x64_mingw ]
164
320
  end
165
-
166
- group :development do
167
- # Use console on exceptions pages [https://github.com/rails/web-console]
168
- gem "web-console"
169
-
170
- # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
171
- # gem "rack-mini-profiler"
172
-
173
- # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
174
- # gem "spring"
175
- end
176
-
177
- group :test do
178
- # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
179
- gem "capybara"
180
- gem "selenium-webdriver"
181
- gem "webdrivers"
182
- end
183
-
184
- ```
321
+ ```
185
- ---------------------------------------------------------------------------------
186
-
187
- ```JavaScript/app/javascript/application.js
188
- // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
189
-
190
-
191
- import jQuery from "jquery";
192
- window.$ = window.jQuery = jQuery;
193
- import("jquery-ui-dist")
194
- import("./custom/jQuery1.js")
195
-
196
- ```
197
-
198
- ---------------------------------------
199
-
200
- ```JavaScript/app/javascript/custom/jQuery1.js
201
- $(function(){
202
- $(document).ready(function() {
203
- $('#login-show').click(function(){
204
- $('#login-modal, #overlay').fadeIn();
205
- });
206
- $('#overlay, .close-modal').click(function(){
207
- $('#overlay, #login-modal').fadeOut();
208
- });
209
- });
210
- });
211
-
212
- $(function(){
213
- $(document).ready(function() {
214
- $('#posted-show').click(function(){
215
- $('#posted-modal, #posted-overlay').fadeIn();
216
- });
217
- $('#posted-overlay, .close-modal').click(function(){
218
- $('#posted-overlay, #posted-modal').fadeOut();
219
- });
220
- });
221
- });
222
-
223
- $(function(){
224
- $(document).ready(function() {
225
- $('.three-dot-leader').click(function(){
226
- $('.posted-detail, .posted-detail-overlay').fadeIn();
227
- });
228
- $('.posted-detail-overlay').click(function(){
229
- $('.posted-detail-overlay, .posted-detail').fadeOut();
230
- });
231
- });
232
- });
233
-
234
- const init = 4 //初期表示数
235
- const more = 4 //追加表示数
236
-
237
- // 初期表示数以降のリスト内容を非表示に
238
- $(".more-list div:nth-child(n+" + (init+1) + ")").hide()
239
-
240
- //初期表示数以下であればMoreボタンを非表示
241
- $(".more-list").filter(function(){
242
- return $(this).find("a").length <= init
243
- }).find(".more-btn").hide()
244
-
245
- // Moreボタンクリックで指定数表示
246
- $(".more-btn").on("click",function(){
247
- let this_list = $(this).closest(".more-list")
248
- this_list.find("div:hidden").slice(0,more).slideToggle()
249
-
250
- if(this_list.find("div:hidden").length == 0){
251
- $(this).fadeOut()
252
- }
253
- })
254
-
255
- // 3点リーダーを押したときその投稿のid保存
256
-
257
-
258
- // 削除項目出すやつ各々表示
259
-
260
- ```
261
- -----------------------------------------------------------
262
-
263
- ```ruby/app/config/importmap.rb
264
- # Pin npm packages by running ./bin/importmap
265
-
266
- pin "application", preload: true
267
- pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"
268
- pin "jquery-ui-dist", to: "https://ga.jspm.io/npm:jquery-ui-dist@1.13.1/jquery-ui.js"
269
- pin_all_from 'app/javascript/custom', under: 'custom'
270
-
271
- ```
272
- --------------------------------------------------------
273
-
274
- 参考によろしくお願いします!!!
275
-
276
- ----------------------------
277
-
278
- 10/22更新
279
-
280
- 試しに<%= turbo %> 部分をコメントアウトしてみたのですが表示画面が同様に図2になりました泣
281
-
282
-
283
-
284
-

8

編集

2023/10/22 09:43

投稿

ninjawanko3d
ninjawanko3d

スコア5

test CHANGED
File without changes
test CHANGED
@@ -273,7 +273,12 @@
273
273
 
274
274
  参考によろしくお願いします!!!
275
275
 
276
-
276
+ ----------------------------
277
+
277
-
278
+ 10/22更新
279
+
278
-
280
+ 試しに<%= turbo %> 部分をコメントアウトしてみたのですが表示画面が同様に図2になりました泣
279
-
281
+
282
+
283
+
284
+

7

編集

2023/10/20 09:48

投稿

ninjawanko3d
ninjawanko3d

スコア5

test CHANGED
File without changes
test CHANGED
@@ -26,6 +26,7 @@
26
26
  -----------------------------------------------
27
27
  いいねは保存できているようなのでcreateアクションには行っていると思います。
28
28
  なぜこのようなエラーが生じるのでしょうか?ご教授お願いします。
29
+
29
30
  --------------------------------------------
30
31
  10/19更新
31
32
 
@@ -85,12 +86,194 @@
85
86
 
86
87
 
87
88
  -----------------------------------------
89
+
88
90
  このようになってしまいます”!!!
89
91
  解決法はあるのでしょうか?!
90
92
  ご教授お願いいたします!
91
93
 
92
-
94
+ ----------------------------------------------------------
95
+
93
-
96
+ ```ruby/Gamefile
94
-
97
+ source "https://rubygems.org"
95
-
98
+ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
99
+
96
-
100
+ ruby "3.2.2"
101
+
102
+ # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main"
103
+ gem "rails", "~> 7.0.4", ">= 7.0.4.3"
104
+
105
+ gem 'jquery-rails'
106
+
107
+ gem 'bootstrap', '~> 4.4.1'
108
+
109
+ gem 'googleauth'
110
+
111
+ gem 'dotenv-rails'
112
+
113
+ gem 'omniauth', '1.9.1'
114
+
115
+ gem 'omniauth-google-oauth2'
116
+
117
+ gem 'devise'
118
+
119
+ # The original asset pipeline for Rails [https://github.com/rails/sprockets-rails]
120
+ gem "sprockets-rails"
121
+
122
+ # Use sqlite3 as the database for Active Record
123
+ gem "sqlite3", "~> 1.4"
124
+
125
+ # Use the Puma web server [https://github.com/puma/puma]
126
+ gem "puma", "~> 5.0"
127
+
128
+ # Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
129
+ gem "importmap-rails"
130
+
131
+ # Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
132
+ gem "turbo-rails"
133
+
134
+ # Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
135
+ gem "stimulus-rails"
136
+
137
+ # Build JSON APIs with ease [https://github.com/rails/jbuilder]
138
+ gem "jbuilder"
139
+
140
+ # Use Redis adapter to run Action Cable in production
141
+ # gem "redis", "~> 4.0"
142
+
143
+ # Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis]
144
+ # gem "kredis"
145
+
146
+ # Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword]
147
+ # gem "bcrypt", "~> 3.1.7"
148
+
149
+ # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
150
+ gem "tzinfo-data", platforms: %i[ mingw mswin x64_mingw jruby ]
151
+
152
+ # Reduces boot times through caching; required in config/boot.rb
153
+ gem "bootsnap", require: false
154
+
155
+ # Use Sass to process CSS
156
+ # gem "sassc-rails"
157
+
158
+ # Use Active Storage variants [https://guides.rubyonrails.org/active_storage_overview.html#transforming-images]
159
+ # gem "image_processing", "~> 1.2"
160
+
161
+ group :development, :test do
162
+ # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem
163
+ gem "debug", platforms: %i[ mri mingw x64_mingw ]
164
+ end
165
+
166
+ group :development do
167
+ # Use console on exceptions pages [https://github.com/rails/web-console]
168
+ gem "web-console"
169
+
170
+ # Add speed badges [https://github.com/MiniProfiler/rack-mini-profiler]
171
+ # gem "rack-mini-profiler"
172
+
173
+ # Speed up commands on slow machines / big apps [https://github.com/rails/spring]
174
+ # gem "spring"
175
+ end
176
+
177
+ group :test do
178
+ # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing]
179
+ gem "capybara"
180
+ gem "selenium-webdriver"
181
+ gem "webdrivers"
182
+ end
183
+
184
+ ```
185
+ ---------------------------------------------------------------------------------
186
+
187
+ ```JavaScript/app/javascript/application.js
188
+ // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
189
+
190
+
191
+ import jQuery from "jquery";
192
+ window.$ = window.jQuery = jQuery;
193
+ import("jquery-ui-dist")
194
+ import("./custom/jQuery1.js")
195
+
196
+ ```
197
+
198
+ ---------------------------------------
199
+
200
+ ```JavaScript/app/javascript/custom/jQuery1.js
201
+ $(function(){
202
+ $(document).ready(function() {
203
+ $('#login-show').click(function(){
204
+ $('#login-modal, #overlay').fadeIn();
205
+ });
206
+ $('#overlay, .close-modal').click(function(){
207
+ $('#overlay, #login-modal').fadeOut();
208
+ });
209
+ });
210
+ });
211
+
212
+ $(function(){
213
+ $(document).ready(function() {
214
+ $('#posted-show').click(function(){
215
+ $('#posted-modal, #posted-overlay').fadeIn();
216
+ });
217
+ $('#posted-overlay, .close-modal').click(function(){
218
+ $('#posted-overlay, #posted-modal').fadeOut();
219
+ });
220
+ });
221
+ });
222
+
223
+ $(function(){
224
+ $(document).ready(function() {
225
+ $('.three-dot-leader').click(function(){
226
+ $('.posted-detail, .posted-detail-overlay').fadeIn();
227
+ });
228
+ $('.posted-detail-overlay').click(function(){
229
+ $('.posted-detail-overlay, .posted-detail').fadeOut();
230
+ });
231
+ });
232
+ });
233
+
234
+ const init = 4 //初期表示数
235
+ const more = 4 //追加表示数
236
+
237
+ // 初期表示数以降のリスト内容を非表示に
238
+ $(".more-list div:nth-child(n+" + (init+1) + ")").hide()
239
+
240
+ //初期表示数以下であればMoreボタンを非表示
241
+ $(".more-list").filter(function(){
242
+ return $(this).find("a").length <= init
243
+ }).find(".more-btn").hide()
244
+
245
+ // Moreボタンクリックで指定数表示
246
+ $(".more-btn").on("click",function(){
247
+ let this_list = $(this).closest(".more-list")
248
+ this_list.find("div:hidden").slice(0,more).slideToggle()
249
+
250
+ if(this_list.find("div:hidden").length == 0){
251
+ $(this).fadeOut()
252
+ }
253
+ })
254
+
255
+ // 3点リーダーを押したときその投稿のid保存
256
+
257
+
258
+ // 削除項目出すやつ各々表示
259
+
260
+ ```
261
+ -----------------------------------------------------------
262
+
263
+ ```ruby/app/config/importmap.rb
264
+ # Pin npm packages by running ./bin/importmap
265
+
266
+ pin "application", preload: true
267
+ pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.0/dist/jquery.js"
268
+ pin "jquery-ui-dist", to: "https://ga.jspm.io/npm:jquery-ui-dist@1.13.1/jquery-ui.js"
269
+ pin_all_from 'app/javascript/custom', under: 'custom'
270
+
271
+ ```
272
+ --------------------------------------------------------
273
+
274
+ 参考によろしくお願いします!!!
275
+
276
+
277
+
278
+
279
+

6

2023/10/19 11:33

投稿

ninjawanko3d
ninjawanko3d

スコア5

test CHANGED
File without changes
test CHANGED
@@ -72,15 +72,14 @@
72
72
  次からエラー?というか失敗画像
73
73
  図1
74
74
  /app/viws/likes/_likesの12行目をクリックしたところ図1から図2のようになりました!
75
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/b0f3a914-4376-4703-9b9a-0f6adf65313f.png)
75
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/a33dc1ed-5ac1-4716-a073-e0e0d07e4964.png)
76
76
 
77
77
  ここで一番上のハートを押すと.....
78
78
                    l
79
79
  l
80
80
  l
81
81
  図2
82
- ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/5db05e7a-95b5-49ad-8bf9-c98159fb480f.png)
82
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/da5da13a-0ed7-45d0-a740-1f09ac7a6dce.png)
83
-
84
83
 
85
84
 
86
85
 

5

編集

2023/10/19 10:46

投稿

ninjawanko3d
ninjawanko3d

スコア5

test CHANGED
File without changes
test CHANGED
@@ -70,6 +70,7 @@
70
70
  ```
71
71
 
72
72
  次からエラー?というか失敗画像
73
+ 図1
73
74
  /app/viws/likes/_likesの12行目をクリックしたところ図1から図2のようになりました!
74
75
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/b0f3a914-4376-4703-9b9a-0f6adf65313f.png)
75
76
 
@@ -77,6 +78,7 @@
77
78
                    l
78
79
  l
79
80
  l
81
+ 図2
80
82
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/5db05e7a-95b5-49ad-8bf9-c98159fb480f.png)
81
83
 
82
84
 

4

編集

2023/10/19 10:43

投稿

ninjawanko3d
ninjawanko3d

スコア5

test CHANGED
File without changes
test CHANGED
@@ -26,4 +26,70 @@
26
26
  -----------------------------------------------
27
27
  いいねは保存できているようなのでcreateアクションには行っていると思います。
28
28
  なぜこのようなエラーが生じるのでしょうか?ご教授お願いします。
29
+ --------------------------------------------
30
+ 10/19更新
29
31
 
32
+ ご回答のおかげにより以下のようなコードに書き換えさせていただいたところ、図2のようなエラー?が発生しました!
33
+
34
+ ```erb/app/viws/likes/_likes
35
+ +<% if @posted %>
36
+ + <% post = @posted %>
37
+ +<% end %>
38
+ <%= turbo_frame_tag :like_buttons do %>
39
+ <% if Liker.find_by(content: session[:user_id],content2: post.id) %>
40
+ <%= link_to "/likes/#{post.id}/destroy" do %>
41
+ <span class="fa fa-heart liked-btn"></span>
42
+ <% end%>
43
+ <% else %>
44
+ <%# link_to "/likes/#{post.id}/create", remote: true do %>
45
+ <%# 下記リンクをクリックしたとき、`like_buttons ` という名前の Turbo Frame を更新する %>
46
+ <%= link_to "/likes/#{post.id}/create", data: { turbo_frame: :like_buttons } do %>
47
+ <span class="fa fa-heart unliked-btn"></span>
48
+ <% end %>
49
+ <% end %>
50
+ <div>
51
+ <%= Liker.where(content2: post.id).count %>
52
+ </div>
53
+ <% end %>
54
+ ```
55
+ ```ruby/app/controllers/likescontroller
56
+ class LikesController < ApplicationController
57
+ before_action :authenticate_user
58
+ def create
59
+ @posted = Posted.find_by(id: params[:post_id])
60
+ if !Liker.find_by(content: session[:user_id], content2: params[:post_id])
61
+ @like = Liker.new(
62
+ content: session[:user_id],
63
+ content2: params[:post_id]
64
+ )
65
+ @like.save
66
+ end
67
+ render :_likes
68
+ end
69
+ 以下略
70
+ ```
71
+
72
+ 次からエラー?というか失敗画像
73
+ /app/viws/likes/_likesの12行目をクリックしたところ図1から図2のようになりました!
74
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/b0f3a914-4376-4703-9b9a-0f6adf65313f.png)
75
+
76
+ ここで一番上のハートを押すと.....
77
+                   l
78
+ l
79
+ l
80
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-19/5db05e7a-95b5-49ad-8bf9-c98159fb480f.png)
81
+
82
+
83
+
84
+
85
+
86
+ -----------------------------------------
87
+ このようになってしまいます”!!!
88
+ 解決法はあるのでしょうか?!
89
+ ご教授お願いいたします!
90
+
91
+
92
+
93
+
94
+
95
+

3

tagu

2023/10/13 10:26

投稿

ninjawanko3d
ninjawanko3d

スコア5

test CHANGED
File without changes
test CHANGED
File without changes

2

改善

2023/10/12 11:16

投稿

ninjawanko3d
ninjawanko3d

スコア5

test CHANGED
File without changes
test CHANGED
@@ -17,8 +17,11 @@
17
17
  js.erbファイル
18
18
  ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-09/82f309c1-0d1f-46a7-9f2e-cae9ac83c39d.png)
19
19
 
20
-
20
+ -----------------------------------
21
-
21
+ **試してみたこと**
22
+ 下図のように変数postが悪さをしている要素を除外するためにjs.erbファイルの2行目をコメントアウトし、3行目を追加してみました。
23
+ ブラウザを開いて所、先ほどと同じエラーメッセージが出ました。このエラーは私のあてにならない予想では、「ビューがないよ!」と怒られている気がします。
24
+ ![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2023-10-12/c05b849c-24fa-4d29-9396-dddb802df4cc.png)
22
25
 
23
26
  -----------------------------------------------
24
27
  いいねは保存できているようなのでcreateアクションには行っていると思います。

1

改善

2023/10/09 09:04

投稿

ninjawanko3d
ninjawanko3d

スコア5

test CHANGED
File without changes
test CHANGED
@@ -21,5 +21,6 @@
21
21
 
22
22
 
23
23
  -----------------------------------------------
24
+ いいねは保存できているようなのでcreateアクションには行っていると思います。
24
25
  なぜこのようなエラーが生じるのでしょうか?ご教授お願いします。
25
26