質問編集履歴

3

a

2021/05/09 09:50

投稿

tarotarotarotar
tarotarotarotar

スコア41

test CHANGED
File without changes
test CHANGED
@@ -9,341 +9,3 @@
9
9
  ajaxでrailsからオブジェクトをjsonで受け取った状態で
10
10
 
11
11
  そのオブジェクトを元にpartialを更新したい
12
-
13
-
14
-
15
- 以上です。
16
-
17
-
18
-
19
- 現状をお伝えします。
20
-
21
- hamlから登録ボタンを押す
22
-
23
-
24
-
25
- 必要なパラメータをサーバーに送り、@trustを更新する
26
-
27
-
28
-
29
- 更新された@trustをjsonでフロントに戻す
30
-
31
-
32
-
33
- 受け取ったjsonをもとにpartialを非同期で更新したい
34
-
35
-
36
-
37
- 以上の流れをしたいのですが、全く上手くできず困っております。
38
-
39
-
40
-
41
- 少し長いですが、関連ファイルです
42
-
43
-
44
-
45
- `trusts_controller.rb`
46
-
47
-
48
-
49
- ```ruby
50
-
51
- def update_roles
52
-
53
- @trust = Trust.find(params[:trust_id])
54
-
55
- ~
56
-
57
-
58
-
59
- @trust.save
60
-
61
- # 更新後のpartialをviewに渡す
62
-
63
- # render partial: 'relative_show.html.haml', locals: { relative: Relative.find(params[:relative_id]) }
64
-
65
- rescue ActiveRecord::RecordNotFound, ActiveRecord::RecordInvalid => e
66
-
67
- status, body = log_rescued_exception_and_set_response_params(e)
68
-
69
- else
70
-
71
- status = 200
72
-
73
- body = @trust
74
-
75
- ensure
76
-
77
- respond_to do |format|
78
-
79
- format.json { render status: status, json: { body: body } }
80
-
81
- end
82
-
83
- end
84
-
85
- ```
86
-
87
-
88
-
89
- partialファイル(更新したいファイル)※コード量が多いため一部省略しております。
90
-
91
- `_relative_show.html.haml`
92
-
93
-
94
-
95
- ```haml
96
-
97
- .card.p-2
98
-
99
- .trust-roles-section
100
-
101
- %h2
102
-
103
- = "#{ relative.basic_info.full_name }"
104
-
105
- %p.section-title
106
-
107
- 信託における役割
108
-
109
-
110
-
111
- -# 現在設定されている役割一覧
112
-
113
- .relative-role-list
114
-
115
- - if @trust.roles.present?
116
-
117
- - if @trust.roles["#{ relative.id }"].present?
118
-
119
- - @trust.roles["#{ relative.id }"].each do |role|
120
-
121
- -# 一覧表示(世代, 代理人),及び削除モーダルに渡す引数の出し分け
122
-
123
- - case role[0]
124
-
125
- - when 'settlor'
126
-
127
- .role-name
128
-
129
- .role-name-name
130
-
131
- = TrustRoles::TRUST_ROLES.invert[role[0]]
132
-
133
- .button.btn.btn-outline-primary.delete-btn{ class: 'delete-settlor-modal', type: 'button', data: { toggle: "modal", target: "#show-modal" }}削除
134
-
135
-
136
-
137
- ~
138
-
139
-
140
-
141
- = t.select :roles, @trust.select_beneficiary, { include_blank: '選択' }, { class: 'beneficiary-select' }
142
-
143
- - else
144
-
145
- 対象無し
146
-
147
- %input.roles-submit-btn{ :name => "roles-button", :type => "button", :value => "登録", :class => "submit-btn", :disabled => true }
148
-
149
- = f.hidden_field :ajax_trust_id, id: "trust-id", value: @trust.id
150
-
151
- = f.hidden_field :ajax_relative_id, id: "relative-id", value: relative.id
152
-
153
- = f.hidden_field :ajax_relative_obj, id: "relative-obj", value: relative
154
-
155
-
156
-
157
- ~
158
-
159
-
160
-
161
-
162
-
163
- = javascript_include_tag 'trust_roles.js'
164
-
165
- ```
166
-
167
-
168
-
169
- このpartialファイルは上の階層である下記のファイルにて呼び出されています。
170
-
171
- `_family_info.html.haml`
172
-
173
-
174
-
175
- ```haml
176
-
177
- .row
178
-
179
- .col-7
180
-
181
- = render partial: 'trusts/relative', collection: relatives
182
-
183
- .btn.btn-primary.openRelativeNew{ data: { bs: { toggle: "modal", target: "#relativeNew" } } }
184
-
185
- %i.fas.fa-plus
186
-
187
- 家族追加
188
-
189
- = render partial: 'trusts/relative_new'
190
-
191
-
192
-
193
- .col-5#ajax-relative-show
194
-
195
- = render partial: 'trusts/relative_show', locals: { relative: relative }← ここで呼び出している
196
-
197
- ```
198
-
199
-
200
-
201
- `_relative_show.html.haml`ファイルの中にある(真ん中下段あたりにあります。わかりづらくすみません)登録ボタンを押すと下記のjsが発火します。
202
-
203
- `trust_roles.js`
204
-
205
-
206
-
207
- ```js
208
-
209
- // 登録ボタンsubmit時
210
-
211
- $('.submit-btn').on('click', function(roles){
212
-
213
- var role = $('.role-select-box').val();
214
-
215
- var beneficiary = $('.beneficiary-select').val();
216
-
217
- // 世代未入力のときは1とする
218
-
219
- if ($('.generation-input-field').val() === '') {
220
-
221
- generation = '1'
222
-
223
- } else {
224
-
225
- generation = $('.generation-input-field').val()
226
-
227
- }
228
-
229
- setRoleAjax(role, 'add', generation, beneficiary)
230
-
231
- });
232
-
233
-
234
-
235
- var setRoleAjax = function (role, action_type, generation='', beneficiary='') {
236
-
237
- data = {
238
-
239
- trust_id: trust_id,
240
-
241
- relative_id: relative_id,
242
-
243
- generation: generation,
244
-
245
- role: role,
246
-
247
- beneficiary: beneficiary,
248
-
249
- action_type: action_type
250
-
251
- };
252
-
253
- var path = '/trusts/' + trust_id + '/update_roles';
254
-
255
- issueArrangementAjax(path, 'PATCH' ,data, rolesCallback, templateErrorCallback);
256
-
257
- }
258
-
259
-
260
-
261
- function issueArrangementAjax(path, method, data, callback, errorCallback){
262
-
263
- sendAjax(path, method, data)
264
-
265
- .done(function (data, textStatus, jqXHR) {
266
-
267
- callback(data, jqXHR);
268
-
269
- })
270
-
271
- .fail(function (jqXHR, textStatus, errorThrown) {
272
-
273
- errorCallback(jqXHR);
274
-
275
- var errorMessage = ('responseJSON' in jqXHR) ? jqXHR.responseJSON.body : 'システムエラー: ' + jqXHR.responseText.split(' ')[0];
276
-
277
- $('.error-messages').append('<div class="alert alert-danger alert-dismissible" role="alert" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">' + errorMessage + '<button type="button" class="close" data-dismiss="alert" aria-label="閉じる"><span aria-hidden="true">&times;</span></button></div');
278
-
279
- });
280
-
281
- }
282
-
283
-
284
-
285
- function sendAjax(path, method, data) {
286
-
287
- $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
288
-
289
- if (!options.crossDomain) {
290
-
291
- var token = $('meta[name="csrf-token"]').attr('content');
292
-
293
- if (token) {
294
-
295
- return jqXHR.setRequestHeader('X-CSRF-Token', token);
296
-
297
- }
298
-
299
- }
300
-
301
- });
302
-
303
- return $.ajax({
304
-
305
- url: path,
306
-
307
- type: method,
308
-
309
- data: data
310
-
311
- });
312
-
313
- }
314
-
315
-
316
-
317
- var rolesCallback = function (data, jqXHR) {
318
-
319
- console.log(data.body['roles']);
320
-
321
- var roles_obj = data.body['roles']
322
-
323
- $('#ajax-relative-show').children().remove();
324
-
325
- var haml = $("#ajax-relative-show").html("<%= escape_javascript(render partial:'relative_show')%>");
326
-
327
- $('#ajax-relative-show').append(haml);
328
-
329
-
330
-
331
- ```
332
-
333
- 最後の`rolesCallback`にてpatialを更新したいのですが・・・( partialファイルをremoveして更新したものをappendsしようとしているのですがうまくいきません。 )
334
-
335
-
336
-
337
- 情報量が多く申し訳ございませんが何卒よろしくおねがいいたします。
338
-
339
-
340
-
341
- 以下追伸
342
-
343
- `rolesCallback`内にて
344
-
345
- `$('#ajax-relative-show').append("<%= escape_javascript render :partial => 'update_roles', :locals => {:relative => @relative} %>");`
346
-
347
- としても以下の文字列しか出ませんでした。
348
-
349
- ![イメージ説明](d1e71b9ae1a895b681fa26ff337737f7.png)

2

追記

2021/05/09 09:50

投稿

tarotarotarotar
tarotarotarotar

スコア41

test CHANGED
File without changes
test CHANGED
@@ -335,3 +335,15 @@
335
335
 
336
336
 
337
337
  情報量が多く申し訳ございませんが何卒よろしくおねがいいたします。
338
+
339
+
340
+
341
+ 以下追伸
342
+
343
+ `rolesCallback`内にて
344
+
345
+ `$('#ajax-relative-show').append("<%= escape_javascript render :partial => 'update_roles', :locals => {:relative => @relative} %>");`
346
+
347
+ としても以下の文字列しか出ませんでした。
348
+
349
+ ![イメージ説明](d1e71b9ae1a895b681fa26ff337737f7.png)

1

省略

2021/05/04 12:07

投稿

tarotarotarotar
tarotarotarotar

スコア41

test CHANGED
File without changes
test CHANGED
@@ -86,7 +86,7 @@
86
86
 
87
87
 
88
88
 
89
- partialファイル(更新したいファイル)
89
+ partialファイル(更新したいファイル)※コード量が多いため一部省略しております。
90
90
 
91
91
  `_relative_show.html.haml`
92
92
 
@@ -132,107 +132,11 @@
132
132
 
133
133
  .button.btn.btn-outline-primary.delete-btn{ class: 'delete-settlor-modal', type: 'button', data: { toggle: "modal", target: "#show-modal" }}削除
134
134
 
135
- - when 'trustee'
136
-
137
- .role-name
138
-
139
- = "#{@trust.role_generation(role[1]['generation'])}#{TrustRoles::TRUST_ROLES.invert[role[0]]}"
140
-
141
- .button.btn.btn-outline-primary.delete-btn{ class: 'delete-trustee-modal', type: 'button', data: { toggle: "modal", target: "#show-modal" }}削除
142
-
143
- %input{ class: 'modal-role-name-trustee', value: "#{@trust.role_generation(role[1]['generation'])}#{TrustRoles::TRUST_ROLES.invert[role[0]]}", type: 'hidden' }
144
-
145
- - when 'beneficiary'
146
-
147
- .role-name
148
-
149
- = "#{@trust.role_generation(role[1]['generation'])}#{TrustRoles::TRUST_ROLES.invert[role[0]]}"
150
-
151
- .button.btn.btn-outline-primary.delete-btn{ class: 'delete-beneficiary-modal', type: 'button', data: { toggle: "modal", target: "#show-modal" }}削除
152
-
153
- %input{ class: 'modal-role-name-beneficiary', value: "#{@trust.role_generation(role[1]['generation'])}#{TrustRoles::TRUST_ROLES.invert[role[0]]}", type: 'hidden' }
154
-
155
- - when 'beneficiary_agent'
156
-
157
- .role-name
158
-
159
- = "#{@trust.role_generation(role[1]['generation'])}#{TrustRoles::TRUST_ROLES.invert[role[0]]}"
160
-
161
- = "(#{ Relative.find(role[1]["beneficary_id"]).basic_info.full_name })"
162
-
163
- .button.btn.btn-outline-primary.delete-btn{ class: 'delete-beneficiary-agent-modal', type: 'button', value: "#{@trust.role_generation(role[1]['generation'])}#{TrustRoles::TRUST_ROLES.invert[role[0]]}", data: { toggle: "modal", target: "#show-modal" }}削除
164
-
165
- %input{ class: 'modal-role-name-beneficiary-agent', value: "#{@trust.role_generation(role[1]['generation'])}#{TrustRoles::TRUST_ROLES.invert[role[0]]}", type: 'hidden' }
166
-
167
-
168
-
169
- -# 削除確認モーダル
170
-
171
- .modal#show-modal
172
-
173
- .modal-wrapper
174
-
175
- .modal-content-part
176
-
177
- 以下の人物の役割を削除します
178
-
179
- %p= "#{ relative.basic_info.full_name }"
180
-
181
- .confirmation-role-delete
182
-
183
- %p 削除対象
184
-
185
- %input{ class: 'delete-role-input', type: 'hidden' }
186
-
187
- .button.btn.btn-outline-primary{ class: 'delete-role-btn', type: 'button', data: { dismiss: "modal" }}削除
188
-
189
- .button.btn.btn-outline-primary{ class: 'delete-cancel-btn', type: 'button', data: { dismiss: "modal" }}キャンセル
190
-
191
-
192
-
193
- - else
194
-
195
- 役割の設定はありません
196
-
197
- - else
198
-
199
- 役割の設定はありません
200
-
201
-
202
-
203
- -# 役割設定
204
-
205
- .button.btn.btn-outline-primary.dropdown-toggle{ role: "button", data: { toggle: "collapse", target: "#set-role-form" }, aria: { hidden: "true", controls: "set-role-form" }, class: 'set-role-btn' } 役割を設定
206
-
207
- -# 既に設定済みの役割はグレーアウト
208
-
209
- - if @trust.roles.present?
210
-
211
- %input{ class: 'set-role', type: 'hidden', value: "#{ @trust.roles["#{ relative.id }"]}" }
212
-
213
- .collapse#set-role-form
214
-
215
- .field.form-group
216
-
217
- = form_with url: trust_path(@trust.id), method: "PATCH" do |f|
218
-
219
- = fields_for :trust do |t|
220
-
221
- = t.select :roles, TrustRoles::TRUST_ROLES, { include_blank: '選択' }, { class: 'role-select-box' }
222
-
223
- .generation-input-part
224
-
225
-
226
-
227
- %input.generation-input-field{ :name => "roles-generation", :type => "number", :value => "", :min => 1, aria: { labelledby: "dLabel" }}世代
228
-
229
- %p 半角数字で入力<br> 未入力時は1(当初)で設定されます
230
-
231
- .select-beneficiary-btn
232
-
233
- 対象の受益者を選択
234
-
235
- - if @trust.roles.present?
135
+
136
+
137
+ ~
138
+
139
+
236
140
 
237
141
  = t.select :roles, @trust.select_beneficiary, { include_blank: '選択' }, { class: 'beneficiary-select' }
238
142
 
@@ -250,37 +154,7 @@
250
154
 
251
155
 
252
156
 
253
- -# 基本情報・資産タブ
254
-
255
- %ul.nav.nav-tabs
256
-
257
- %li.nav-item.mx-1
258
-
259
- %a.nav-link.active{ href: '#relative_edit', data: { toggle: 'tab' } }
260
-
261
- %i.fas.fa-info-circle
262
-
263
- 基本情報
264
-
265
- %li.nav-item.mx-1
266
-
267
- %a.nav-link{ href: '#relative_asset', data: { toggle: 'tab' } }
268
-
269
- %i.fas.fa-sack-dollar
270
-
271
- 資産
157
+ ~
272
-
273
- .card-body
274
-
275
- .tab-content
276
-
277
- .tab-pane.active#relative_edit
278
-
279
- = render partial: 'trusts/relative_edit', locals: { relative: relative }
280
-
281
- .tab-pane#relative_asset
282
-
283
- = render partial: 'trusts/relative_asset', collection: relative.assets
284
158
 
285
159
 
286
160
 
@@ -326,6 +200,8 @@
326
200
 
327
201
  `_relative_show.html.haml`ファイルの中にある(真ん中下段あたりにあります。わかりづらくすみません)登録ボタンを押すと下記のjsが発火します。
328
202
 
203
+ `trust_roles.js`
204
+
329
205
 
330
206
 
331
207
  ```js
@@ -380,89 +256,81 @@
380
256
 
381
257
  }
382
258
 
259
+
260
+
261
+ function issueArrangementAjax(path, method, data, callback, errorCallback){
262
+
263
+ sendAjax(path, method, data)
264
+
265
+ .done(function (data, textStatus, jqXHR) {
266
+
267
+ callback(data, jqXHR);
268
+
269
+ })
270
+
271
+ .fail(function (jqXHR, textStatus, errorThrown) {
272
+
273
+ errorCallback(jqXHR);
274
+
275
+ var errorMessage = ('responseJSON' in jqXHR) ? jqXHR.responseJSON.body : 'システムエラー: ' + jqXHR.responseText.split(' ')[0];
276
+
277
+ $('.error-messages').append('<div class="alert alert-danger alert-dismissible" role="alert" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">' + errorMessage + '<button type="button" class="close" data-dismiss="alert" aria-label="閉じる"><span aria-hidden="true">&times;</span></button></div');
278
+
279
+ });
280
+
281
+ }
282
+
283
+
284
+
285
+ function sendAjax(path, method, data) {
286
+
287
+ $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
288
+
289
+ if (!options.crossDomain) {
290
+
291
+ var token = $('meta[name="csrf-token"]').attr('content');
292
+
293
+ if (token) {
294
+
295
+ return jqXHR.setRequestHeader('X-CSRF-Token', token);
296
+
297
+ }
298
+
299
+ }
300
+
301
+ });
302
+
303
+ return $.ajax({
304
+
305
+ url: path,
306
+
307
+ type: method,
308
+
309
+ data: data
310
+
311
+ });
312
+
313
+ }
314
+
315
+
316
+
317
+ var rolesCallback = function (data, jqXHR) {
318
+
319
+ console.log(data.body['roles']);
320
+
321
+ var roles_obj = data.body['roles']
322
+
323
+ $('#ajax-relative-show').children().remove();
324
+
325
+ var haml = $("#ajax-relative-show").html("<%= escape_javascript(render partial:'relative_show')%>");
326
+
327
+ $('#ajax-relative-show').append(haml);
328
+
329
+
330
+
383
331
  ```
384
332
 
385
-
386
-
387
- ```js
388
-
389
- function issueArrangementAjax(path, method, data, callback, errorCallback){
390
-
391
- sendAjax(path, method, data)
392
-
393
- .done(function (data, textStatus, jqXHR) {
394
-
395
- callback(data, jqXHR);
396
-
397
- })
398
-
399
- .fail(function (jqXHR, textStatus, errorThrown) {
400
-
401
- errorCallback(jqXHR);
402
-
403
- var errorMessage = ('responseJSON' in jqXHR) ? jqXHR.responseJSON.body : 'システムエラー: ' + jqXHR.responseText.split(' ')[0];
404
-
405
- $('.error-messages').append('<div class="alert alert-danger alert-dismissible" role="alert" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">' + errorMessage + '<button type="button" class="close" data-dismiss="alert" aria-label="閉じる"><span aria-hidden="true">&times;</span></button></div');
406
-
407
- });
408
-
409
- }
410
-
411
-
412
-
413
- function sendAjax(path, method, data) {
414
-
415
- $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
416
-
417
- if (!options.crossDomain) {
418
-
419
- var token = $('meta[name="csrf-token"]').attr('content');
420
-
421
- if (token) {
422
-
423
- return jqXHR.setRequestHeader('X-CSRF-Token', token);
424
-
425
- }
426
-
427
- }
428
-
429
- });
430
-
431
- return $.ajax({
432
-
433
- url: path,
434
-
435
- type: method,
436
-
437
- data: data
438
-
439
- });
440
-
441
- }
442
-
443
- ```
444
-
445
- 最後に↓のjsにてpatialを更新したいのですが・・・( partialファイルをremoveして更新したものをappendsしようとしているのですがうまくいきません。 )
446
-
447
- ```js
448
-
449
-
450
-
451
- var rolesCallback = function (data, jqXHR) {
452
-
453
- console.log(data.body['roles']);
454
-
455
- var roles_obj = data.body['roles']
456
-
457
- $('#ajax-relative-show').children().remove();
458
-
459
- var haml = $("#ajax-relative-show").html("<%= escape_javascript(render partial:'relative_show')%>");
460
-
461
- $('#ajax-relative-show').append(haml);
462
-
463
-
464
-
465
- ```
333
+ 最後の`rolesCallback`にてpatialを更新したいのですが・・・( partialファイルをremoveして更新したものをappendsしようとしているのですがうまくいきません。 )
466
334
 
467
335
 
468
336