teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ajax: サーバーでpartialを取得して更新するとjsが効かなくなる

編集履歴

質問編集履歴

3

a

2021/05/09 09:51

投稿

tarotarotarotar
tarotarotarotar

スコア41

test CHANGED
File without changes
test CHANGED
@@ -16,282 +16,4 @@
16
16
 
17
17
  actionpack (6.0.3.6) lib/action_dispatch/middleware/debug_exceptions.rb:36:in `call'
18
18
 
19
- web-console (4.1.0) lib/web_console/middleware.rb:132:in `call_app'
20
-
21
- web-console (4.1.0) lib/web_console/middleware.rb:28:in `block in call'
22
-
23
- web-console (4.1.0) lib/web_console/middleware.rb:17:in `catch'
24
-
25
- web-console (4.1.0) lib/web_console/middleware.rb:17:in `call'
26
-
27
- actionpack (6.0.3.6) lib/action_dispatch/middleware/show_exceptions.rb:33:in `call'
28
-
29
- railties (6.0.3.6) lib/rails/rack/logger.rb:37:in `call_app'
30
-
31
- railties (6.0.3.6) lib/rails/rack/logger.rb:26:in `block in call'
32
-
33
- activesupport (6.0.3.6) lib/active_support/tagged_logging.rb:80:in `block in tagged'
34
-
35
- activesupport (6.0.3.6) lib/active_support/tagged_logging.rb:28:in `tagged'
36
-
37
- activesupport (6.0.3.6) lib/active_support/tagged_logging.rb:80:in `tagged'
38
-
39
- railties (6.0.3.6) lib/rails/rack/logger.rb:26:in `call'
40
-
41
- sprockets-rails (3.2.2) lib/sprockets/rails/quiet_assets.rb:13:in `call'
42
-
43
- actionpack (6.0.3.6) lib/action_dispatch/middleware/remote_ip.rb:81:in `call'
44
-
45
- actionpack (6.0.3.6) lib/action_dispatch/middleware/request_id.rb:27:in `call'
46
-
47
- rack (2.2.3) lib/rack/method_override.rb:24:in `call'
48
-
49
- rack (2.2.3) lib/rack/runtime.rb:22:in `call'
50
-
51
- activesupport (6.0.3.6) lib/active_support/cache/strategy/local_cache_middleware.rb:29:in `call'
52
-
53
- actionpack (6.0.3.6) lib/action_dispatch/middleware/executor.rb:14:in `call'
54
-
55
- actionpack (6.0.3.6) lib/action_dispatch/middleware/static.rb:126:in `call'
56
-
57
- rack (2.2.3) lib/rack/sendfile.rb:110:in `call'
58
-
59
- actionpack (6.0.3.6) lib/action_dispatch/middleware/host_authorization.rb:82:in `call'
60
-
61
- sentry-ruby-core (4.3.2) lib/sentry/rack/capture_exceptions.rb:23:in `block in call'
62
-
63
- sentry-ruby-core (4.3.2) lib/sentry/hub.rb:52:in `with_scope'
64
-
65
- sentry-ruby-core (4.3.2) lib/sentry-ruby.rb:147:in `with_scope'
66
-
67
- sentry-ruby-core (4.3.2) lib/sentry/rack/capture_exceptions.rb:14:in `call'
68
-
69
- webpacker (4.3.0) lib/webpacker/dev_server_proxy.rb:23:in `perform_request'
70
-
71
- rack-proxy (0.6.5) lib/rack/proxy.rb:57:in `call'
72
-
73
- railties (6.0.3.6) lib/rails/engine.rb:527:in `call'
74
-
75
- puma (4.3.7) lib/puma/configuration.rb:228:in `call'
76
-
77
- puma (4.3.7) lib/puma/server.rb:713:in `handle_request'
78
-
79
- puma (4.3.7) lib/puma/server.rb:472:in `process_client'
80
-
81
- puma (4.3.7) lib/puma/server.rb:328:in `block in run'
82
-
83
- puma (4.3.7) lib/puma/thread_pool.rb:134:in `block in spawn_thread'
84
-
85
- ```
86
-
87
-
88
-
89
- 解決法は有りませんでしょうか？
90
-
91
-
92
-
93
- `controller`(このファイルでajaxの非同期更新を実現しています。)
94
-
95
- ```ruby
96
-
97
- def show
98
-
99
- @child = child.find(params[:id])
100
-
101
- rescue ActiveRecord::RecordNotFound => e
102
-
103
- status, body = log_rescued_exception_and_set_response_params(e)
104
-
105
- respond_to do |format|
106
-
107
- format.json { render status: status, json: { body: body } }
108
-
109
- end
110
-
111
- else
112
-
113
- render partial: 'trusts/child_show', locals: { child: child.find(params[:id]) }
114
-
115
- end
116
-
117
- ```
118
-
119
- ↓動作しなくなる`child.js`ファイル(ごちゃごちゃ書いてありますが、中身は関係ないかと思います。)
120
-
121
- ```js
122
-
123
- console.log('child.js');
124
-
125
-
126
-
127
- $('.child-show').on('click', function(){
128
-
129
- console.log($('.child_id', this).val()); // cardクラスの中にあるchild_idクラスのvalueを取得
130
-
131
- var child_id = $('.child_id', this).val()
132
-
133
- showchildAjax(child_id);
134
-
135
- });
136
-
137
-
138
-
139
- var showchildAjax = function (child_id) {
140
-
141
- data = {
142
-
143
- id: child_id
144
-
145
- };
146
-
147
- var path = /childs/ + child_id
148
-
149
- issueArrangementAjax(path, 'GET' ,data, showchildCallback, templateErrorCallback);
150
-
151
- };
152
-
153
-
154
-
155
- var showchildCallback = function (data) {
156
-
157
- $('#ajax-child-show').children().remove();
158
-
159
- $('#ajax-child-show').append(data);
160
-
161
- }
19
+ w
162
-
163
-
164
-
165
- // 「詳細情報」入力時のUI
166
-
167
- $('.ajax-update').on('focusin',function(){
168
-
169
- console.log('focusin');
170
-
171
- var interval = setInterval(savechildInfo.bind(undefined, $(this)), 5000);
172
-
173
- $(this).on('focusout',function(){
174
-
175
- console.log('focusout');
176
-
177
- clearInterval(interval);
178
-
179
- savechildInfo($(this));
180
-
181
- });
182
-
183
- });
184
-
185
-
186
-
187
- $('.ajax-update').on('keypress', function(){
188
-
189
- console.log('keypress');
190
-
191
- $(this).css('background-color', '#FFEEDE');
192
-
193
- });
194
-
195
-
196
-
197
- var savechildInfo = function (obj) {
198
-
199
- var child_id = $('#child-id').val();
200
-
201
- var column = obj.attr('id').substr(9);
202
-
203
- var value = obj.val();
204
-
205
- data = {
206
-
207
- child: {
208
-
209
- id: child_id
210
-
211
- },
212
-
213
- info: {
214
-
215
- [column]: value
216
-
217
- }
218
-
219
- };
220
-
221
- var path = /childs/ + child_id
222
-
223
- };
224
-
225
-
226
-
227
- var updatechildCallback = function (data) {
228
-
229
-
230
-
231
- };
232
-
233
- ```
234
-
235
- jsを読み込んでいるファイル(partialを複数回ネストしています。)
236
-
237
- `show.html.haml`
238
-
239
-
240
-
241
- ```haml
242
-
243
- ~
244
-
245
- = render partial: 'trusts/child_show', locals: { child: child }
246
-
247
- ~
248
-
249
- = javascript_include_tag 'child.js'
250
-
251
- ```
252
-
253
-
254
-
255
- `child_show.html.haml`
256
-
257
- ```haml
258
-
259
- ~
260
-
261
- = render partial: 'trusts/child_edit', locals: { child: child }
262
-
263
- ~
264
-
265
- ```
266
-
267
- `child_edit.html.haml`
268
-
269
- ```haml
270
-
271
- = form_with url: childs_path(child.id), method: "PATCH" do |f|
272
-
273
- = fields_for :child do |r|
274
-
275
- .child-info{ class: 'child_id', value: child.id }
276
-
277
- .form-row
278
-
279
- .field.col-form-label.col-2
280
-
281
- = r.label :family_name, "氏名"
282
-
283
- .field.form-group.col-5
284
-
285
- = r.text_field :family_name, class: "form-control ajax-update", value: child.info.family_name
286
-
287
- .field.form-group.col-5
288
-
289
- = r.text_field :given_name, class: "form-control ajax-update", value: child.info.given_name
290
-
291
- ```
292
-
293
-
294
-
295
- パスの指定方法が間違えっている気がするのですが、jsファイルなので記載の仕様がなく・・・・
296
-
297
- 解決法は有りませんでしょうか？

2

誤字

2021/05/09 09:51

投稿

tarotarotarotar
tarotarotarotar

スコア41

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,88 @@
1
1
  初回ロード時にはjsファイルが正常に動作するのですが、ajaxで非同期更新にてpartialを更新するとそのpartialのjsが効かなくなってしまいます。
2
2
 
3
- partialファイルに直接`= javascript_include_tag 'child.js'`で読み込ませるようにすれば解決するのですが、collectionする分、読み込まれて動作が重くなってしまいます。
3
+ partialファイルに直接`= javascript_include_tag 'child.js'`で読み込ませるようにすれば解決するのですが、以下のエラーが出てしまい、動作はするのですが、とんでもない処理の量が裏で走ってます。
4
+
5
+
6
+
7
+ ```
8
+
9
+ Started GET "/trusts/relative.js-ed00b7487d7faaa69a62bdef861f105afbea4389ccf3aeabf05ba4b39ae04ad0.map" for ::1 at 2021-05-03 09:44:18 +0900
10
+
11
+
12
+
13
+ ActionController::RoutingError (No route matches [GET] "/trusts/relative.js-ed00b7487d7faaa69a62bdef861f105afbea4389ccf3aeabf05ba4b39ae04ad0.map"):
14
+
15
+
16
+
17
+ actionpack (6.0.3.6) lib/action_dispatch/middleware/debug_exceptions.rb:36:in `call'
18
+
19
+ web-console (4.1.0) lib/web_console/middleware.rb:132:in `call_app'
20
+
21
+ web-console (4.1.0) lib/web_console/middleware.rb:28:in `block in call'
22
+
23
+ web-console (4.1.0) lib/web_console/middleware.rb:17:in `catch'
24
+
25
+ web-console (4.1.0) lib/web_console/middleware.rb:17:in `call'
26
+
27
+ actionpack (6.0.3.6) lib/action_dispatch/middleware/show_exceptions.rb:33:in `call'
28
+
29
+ railties (6.0.3.6) lib/rails/rack/logger.rb:37:in `call_app'
30
+
31
+ railties (6.0.3.6) lib/rails/rack/logger.rb:26:in `block in call'
32
+
33
+ activesupport (6.0.3.6) lib/active_support/tagged_logging.rb:80:in `block in tagged'
34
+
35
+ activesupport (6.0.3.6) lib/active_support/tagged_logging.rb:28:in `tagged'
36
+
37
+ activesupport (6.0.3.6) lib/active_support/tagged_logging.rb:80:in `tagged'
38
+
39
+ railties (6.0.3.6) lib/rails/rack/logger.rb:26:in `call'
40
+
41
+ sprockets-rails (3.2.2) lib/sprockets/rails/quiet_assets.rb:13:in `call'
42
+
43
+ actionpack (6.0.3.6) lib/action_dispatch/middleware/remote_ip.rb:81:in `call'
44
+
45
+ actionpack (6.0.3.6) lib/action_dispatch/middleware/request_id.rb:27:in `call'
46
+
47
+ rack (2.2.3) lib/rack/method_override.rb:24:in `call'
48
+
49
+ rack (2.2.3) lib/rack/runtime.rb:22:in `call'
50
+
51
+ activesupport (6.0.3.6) lib/active_support/cache/strategy/local_cache_middleware.rb:29:in `call'
52
+
53
+ actionpack (6.0.3.6) lib/action_dispatch/middleware/executor.rb:14:in `call'
54
+
55
+ actionpack (6.0.3.6) lib/action_dispatch/middleware/static.rb:126:in `call'
56
+
57
+ rack (2.2.3) lib/rack/sendfile.rb:110:in `call'
58
+
59
+ actionpack (6.0.3.6) lib/action_dispatch/middleware/host_authorization.rb:82:in `call'
60
+
61
+ sentry-ruby-core (4.3.2) lib/sentry/rack/capture_exceptions.rb:23:in `block in call'
62
+
63
+ sentry-ruby-core (4.3.2) lib/sentry/hub.rb:52:in `with_scope'
64
+
65
+ sentry-ruby-core (4.3.2) lib/sentry-ruby.rb:147:in `with_scope'
66
+
67
+ sentry-ruby-core (4.3.2) lib/sentry/rack/capture_exceptions.rb:14:in `call'
68
+
69
+ webpacker (4.3.0) lib/webpacker/dev_server_proxy.rb:23:in `perform_request'
70
+
71
+ rack-proxy (0.6.5) lib/rack/proxy.rb:57:in `call'
72
+
73
+ railties (6.0.3.6) lib/rails/engine.rb:527:in `call'
74
+
75
+ puma (4.3.7) lib/puma/configuration.rb:228:in `call'
76
+
77
+ puma (4.3.7) lib/puma/server.rb:713:in `handle_request'
78
+
79
+ puma (4.3.7) lib/puma/server.rb:472:in `process_client'
80
+
81
+ puma (4.3.7) lib/puma/server.rb:328:in `block in run'
82
+
83
+ puma (4.3.7) lib/puma/thread_pool.rb:134:in `block in spawn_thread'
84
+
85
+ ```
4
86
 
5
87
 
6
88
 
@@ -138,8 +220,6 @@
138
220
 
139
221
  var path = /childs/ + child_id
140
222
 
141
- issueArrangementAjax(path, 'PATCH' ,data, updatechildCallback, templateErrorCallback);
142
-
143
223
  };
144
224
 
145
225
 
@@ -212,12 +292,6 @@
212
292
 
213
293
 
214
294
 
215
- なんらかのajaxによってこれらのpartialを非同期で更新すると、更新されたファイルでは`child.js'`が効かなくなってしまいます。
216
-
217
-
218
-
219
- それぞれのファイルに`= javascript_include_tag 'child.js'`
220
-
221
- を置くと、更新しても効くようになるのですが、とんでもない量の処理が走ってしまいます。(何らかの原因で、jsが動きまくってしまう)
295
+ パスの指定方法が間違えっている気がするのですが、jsファイルなので記載の仕様がなく・・・・
222
296
 
223
297
  解決法は有りませんでしょうか？

1

あ

2021/05/03 00:50

投稿

tarotarotarotar
tarotarotarotar

スコア41

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- 初回ロード時にはjsファイルが正常に動作するのですが、ajaxで非同期更新にてpartialを更新するとjsが効かなくなってしまいます。
1
+ 初回ロード時にはjsファイルが正常に動作するのですが、ajaxで非同期更新にてpartialを更新するとそのpartialのjsが効かなくなってしまいます。
2
2
 
3
3
  partialファイルに直接`= javascript_include_tag 'child.js'`で読み込ませるようにすれば解決するのですが、collectionする分、読み込まれて動作が重くなってしまいます。
4
4