編集履歴

質問編集履歴

2021/05/09 09:50

投稿

tarotarotarotar

スコア41

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -9,341 +9,3 @@
 ajaxでrailsからオブジェクトをｊsonで受け取った状態で
 そのオブジェクトを元にpartialを更新したい
-以上です。
-現状をお伝えします。
-hamlから登録ボタンを押す
-↓
-必要なパラメータをサーバーに送り、@trustを更新する
-↓
-更新された@trustをjsonでフロントに戻す
-↓
-受け取ったjsonをもとにpartialを非同期で更新したい
-以上の流れをしたいのですが、全く上手くできず困っております。
-少し長いですが、関連ファイルです
-`trusts_controller.rb`
-```ruby
-  def update_roles
-    @trust = Trust.find(params[:trust_id])
-~
-    @trust.save
-    # 更新後のpartialをviewに渡す
-    # render partial: 'relative_show.html.haml', locals: { relative: Relative.find(params[:relative_id]) }
-    rescue ActiveRecord::RecordNotFound, ActiveRecord::RecordInvalid => e
-      status, body = log_rescued_exception_and_set_response_params(e)
-    else
-      status = 200
-      body = @trust
-    ensure
-      respond_to do |format|
-        format.json { render status: status, json: { body: body } }
-      end
-  end
-```
-partialファイル(更新したいファイル)※コード量が多いため一部省略しております。
-`_relative_show.html.haml`
-```haml
-.card.p-2
-  .trust-roles-section
-    %h2
-      = "#{ relative.basic_info.full_name }"
-    %p.section-title
-      信託における役割
-    -# 現在設定されている役割一覧
-    .relative-role-list
-      - if @trust.roles.present?
-        - if @trust.roles["#{ relative.id }"].present?
-          - @trust.roles["#{ relative.id }"].each do |role|
-            -# 一覧表示(世代, 代理人),及び削除モーダルに渡す引数の出し分け
-            - case role[0]
-              - when 'settlor'
-                .role-name
-                  .role-name-name
-                    = TrustRoles::TRUST_ROLES.invert[role[0]]
-                  .button.btn.btn-outline-primary.delete-btn{ class: 'delete-settlor-modal', type: 'button', data: { toggle: "modal", target: "#show-modal" }}削除
-        ~
-                = t.select :roles, @trust.select_beneficiary, { include_blank: '選択' }, { class: 'beneficiary-select' }
-              - else
-                対象無し
-            %input.roles-submit-btn{ :name => "roles-button", :type => "button", :value => "登録", :class => "submit-btn", :disabled => true }
-          = f.hidden_field :ajax_trust_id, id: "trust-id", value: @trust.id
-          = f.hidden_field :ajax_relative_id, id: "relative-id", value: relative.id
-          = f.hidden_field :ajax_relative_obj, id: "relative-obj", value: relative
- ~
-= javascript_include_tag 'trust_roles.js'
-```
-このpartialファイルは上の階層である下記のファイルにて呼び出されています。
-`_family_info.html.haml`
-```haml
-.row
-  .col-7
-    = render partial: 'trusts/relative', collection: relatives
-    .btn.btn-primary.openRelativeNew{ data: { bs: { toggle: "modal", target: "#relativeNew" } } }
-      %i.fas.fa-plus
-      家族追加
-    = render partial: 'trusts/relative_new'
-  .col-5#ajax-relative-show
-    = render partial: 'trusts/relative_show', locals: { relative: relative }← ここで呼び出している
-```
-`_relative_show.html.haml`ファイルの中にある(真ん中下段あたりにあります。わかりづらくすみません)登録ボタンを押すと下記のjsが発火します。
-`trust_roles.js`
-```js
-// 登録ボタンsubmit時
-$('.submit-btn').on('click', function(roles){
-  var role = $('.role-select-box').val();
-  var beneficiary = $('.beneficiary-select').val();
-  // 世代未入力のときは1とする
-  if ($('.generation-input-field').val() === '') {
-    generation = '1'
-  } else {
-    generation = $('.generation-input-field').val()
-  }
-  setRoleAjax(role, 'add', generation, beneficiary)
-});
-var setRoleAjax = function (role, action_type, generation='', beneficiary='') {
-  data = {
-    trust_id: trust_id,
-    relative_id: relative_id,
-    generation: generation,
-    role: role,
-    beneficiary: beneficiary,
-    action_type: action_type
-  };
-  var path = '/trusts/' + trust_id + '/update_roles';
-  issueArrangementAjax(path, 'PATCH' ,data, rolesCallback, templateErrorCallback);
-}
-function issueArrangementAjax(path, method, data, callback, errorCallback){
-  sendAjax(path, method, data)
-  .done(function (data, textStatus, jqXHR) {
-    callback(data, jqXHR);
-  })
-  .fail(function (jqXHR, textStatus, errorThrown) {
-    errorCallback(jqXHR);
-    var errorMessage = ('responseJSON' in jqXHR) ? jqXHR.responseJSON.body : 'システムエラー: ' + jqXHR.responseText.split(' ')[0];
-    $('.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');
-  });
-}
-function sendAjax(path, method, data) {
-  $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
-    if (!options.crossDomain) {
-      var token = $('meta[name="csrf-token"]').attr('content');
-      if (token) {
-        return jqXHR.setRequestHeader('X-CSRF-Token', token);
-      }
-    }
-  });
-  return $.ajax({
-    url: path,
-    type: method,
-    data: data
-  });
-}
-var rolesCallback = function (data, jqXHR) {
-  console.log(data.body['roles']);
-  var roles_obj = data.body['roles']
-  $('#ajax-relative-show').children().remove();
-  var haml = $("#ajax-relative-show").html("<%= escape_javascript(render partial:'relative_show')%>");
-  $('#ajax-relative-show').append(haml);
-```
-最後の`rolesCallback`にてpatialを更新したいのですが・・・( partialファイルをremoveして更新したものをappendsしようとしているのですがうまくいきません。 )
-情報量が多く申し訳ございませんが何卒よろしくおねがいいたします。
-以下追伸
-`rolesCallback`内にて
-`$('#ajax-relative-show').append("<%= escape_javascript render :partial => 'update_roles', :locals => {:relative => @relative} %>");`
-としても以下の文字列しか出ませんでした。
-![イメージ説明](d1e71b9ae1a895b681fa26ff337737f7.png)

追記

2021/05/09 09:50

投稿

tarotarotarotar

スコア41

test CHANGED Viewed

File without changes

test CHANGED Viewed

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

省略

2021/05/04 12:07

投稿

tarotarotarotar

スコア41

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -86,7 +86,7 @@
-partialファイル(更新したいファイル)
+partialファイル(更新したいファイル)※コード量が多いため一部省略しております。
 `_relative_show.html.haml`
@@ -132,107 +132,11 @@
                   .button.btn.btn-outline-primary.delete-btn{ class: 'delete-settlor-modal', type: 'button', data: { toggle: "modal", target: "#show-modal" }}削除
-              - when 'trustee'
-                .role-name
-                  = "#{@trust.role_generation(role[1]['generation'])}#{TrustRoles::TRUST_ROLES.invert[role[0]]}"
-                  .button.btn.btn-outline-primary.delete-btn{ class: 'delete-trustee-modal', type: 'button', data: { toggle: "modal", target: "#show-modal" }}削除
-                  %input{ class: 'modal-role-name-trustee', value: "#{@trust.role_generation(role[1]['generation'])}#{TrustRoles::TRUST_ROLES.invert[role[0]]}", type: 'hidden' }
-              - when 'beneficiary'
-                .role-name
-                  = "#{@trust.role_generation(role[1]['generation'])}#{TrustRoles::TRUST_ROLES.invert[role[0]]}"
-                  .button.btn.btn-outline-primary.delete-btn{ class: 'delete-beneficiary-modal', type: 'button', data: { toggle: "modal", target: "#show-modal" }}削除
-                  %input{ class: 'modal-role-name-beneficiary', value: "#{@trust.role_generation(role[1]['generation'])}#{TrustRoles::TRUST_ROLES.invert[role[0]]}", type: 'hidden' }
-              - when 'beneficiary_agent'
-                .role-name
-                  = "#{@trust.role_generation(role[1]['generation'])}#{TrustRoles::TRUST_ROLES.invert[role[0]]}"
-                  = "(#{ Relative.find(role[1]["beneficary_id"]).basic_info.full_name })"
-                  .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" }}削除
-                  %input{ class: 'modal-role-name-beneficiary-agent', value: "#{@trust.role_generation(role[1]['generation'])}#{TrustRoles::TRUST_ROLES.invert[role[0]]}", type: 'hidden' }
-            -# 削除確認モーダル
-            .modal#show-modal
-              .modal-wrapper
-                .modal-content-part
-                  以下の人物の役割を削除します
-                  %p= "#{ relative.basic_info.full_name }"
-                  .confirmation-role-delete
-                    %p 削除対象
-                  %input{ class: 'delete-role-input', type: 'hidden' }
-                  .button.btn.btn-outline-primary{ class: 'delete-role-btn', type: 'button', data: { dismiss: "modal" }}削除
-                  .button.btn.btn-outline-primary{ class: 'delete-cancel-btn', type: 'button', data: { dismiss: "modal" }}キャンセル
-        - else
-          役割の設定はありません
-      - else
-        役割の設定はありません
-    -# 役割設定
-    .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' } 役割を設定
-    -# 既に設定済みの役割はグレーアウト
-    - if @trust.roles.present?
-      %input{ class: 'set-role', type: 'hidden', value: "#{ @trust.roles["#{ relative.id }"]}" }
-    .collapse#set-role-form
-      .field.form-group
-        = form_with url: trust_path(@trust.id), method: "PATCH" do |f|
-          = fields_for :trust do |t|
-            = t.select :roles, TrustRoles::TRUST_ROLES, { include_blank: '選択' }, { class: 'role-select-box' }
-            .generation-input-part
-              第
-              %input.generation-input-field{ :name => "roles-generation", :type => "number", :value => "", :min => 1, aria: { labelledby: "dLabel" }}世代
-              %p 半角数字で入力<br> 未入力時は1(当初)で設定されます
-            .select-beneficiary-btn
-              対象の受益者を選択
-              - if @trust.roles.present?
+        ~
                 = t.select :roles, @trust.select_beneficiary, { include_blank: '選択' }, { class: 'beneficiary-select' }
@@ -250,37 +154,7 @@
-    -# 基本情報・資産タブ
-    %ul.nav.nav-tabs
-      %li.nav-item.mx-1
-        %a.nav-link.active{ href: '#relative_edit', data: { toggle: 'tab' } }
-          %i.fas.fa-info-circle
-          基本情報
-      %li.nav-item.mx-1
-        %a.nav-link{ href: '#relative_asset', data: { toggle: 'tab' } }
-          %i.fas.fa-sack-dollar
-          資産
+ ~
-    .card-body
-      .tab-content
-        .tab-pane.active#relative_edit
-          = render partial: 'trusts/relative_edit', locals: { relative: relative }
-        .tab-pane#relative_asset
-          = render partial: 'trusts/relative_asset', collection: relative.assets
@@ -326,6 +200,8 @@
 `_relative_show.html.haml`ファイルの中にある(真ん中下段あたりにあります。わかりづらくすみません)登録ボタンを押すと下記のjsが発火します。
+`trust_roles.js`
 ```js
@@ -380,89 +256,81 @@
 }
+function issueArrangementAjax(path, method, data, callback, errorCallback){
+  sendAjax(path, method, data)
+  .done(function (data, textStatus, jqXHR) {
+    callback(data, jqXHR);
+  })
+  .fail(function (jqXHR, textStatus, errorThrown) {
+    errorCallback(jqXHR);
+    var errorMessage = ('responseJSON' in jqXHR) ? jqXHR.responseJSON.body : 'システムエラー: ' + jqXHR.responseText.split(' ')[0];
+    $('.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');
+  });
+}
+function sendAjax(path, method, data) {
+  $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
+    if (!options.crossDomain) {
+      var token = $('meta[name="csrf-token"]').attr('content');
+      if (token) {
+        return jqXHR.setRequestHeader('X-CSRF-Token', token);
+      }
+    }
+  });
+  return $.ajax({
+    url: path,
+    type: method,
+    data: data
+  });
+}
+var rolesCallback = function (data, jqXHR) {
+  console.log(data.body['roles']);
+  var roles_obj = data.body['roles']
+  $('#ajax-relative-show').children().remove();
+  var haml = $("#ajax-relative-show").html("<%= escape_javascript(render partial:'relative_show')%>");
+  $('#ajax-relative-show').append(haml);
 ```
-↓
-```js
-function issueArrangementAjax(path, method, data, callback, errorCallback){
-  sendAjax(path, method, data)
-  .done(function (data, textStatus, jqXHR) {
-    callback(data, jqXHR);
-  })
-  .fail(function (jqXHR, textStatus, errorThrown) {
-    errorCallback(jqXHR);
-    var errorMessage = ('responseJSON' in jqXHR) ? jqXHR.responseJSON.body : 'システムエラー: ' + jqXHR.responseText.split(' ')[0];
-    $('.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');
-  });
-}
-function sendAjax(path, method, data) {
-  $.ajaxPrefilter(function(options, originalOptions, jqXHR) {
-    if (!options.crossDomain) {
-      var token = $('meta[name="csrf-token"]').attr('content');
-      if (token) {
-        return jqXHR.setRequestHeader('X-CSRF-Token', token);
-      }
-    }
-  });
-  return $.ajax({
-    url: path,
-    type: method,
-    data: data
-  });
-}
-```
-最後に↓のjsにてpatialを更新したいのですが・・・( partialファイルをremoveして更新したものをappendsしようとしているのですがうまくいきません。 )
-```js
-var rolesCallback = function (data, jqXHR) {
-  console.log(data.body['roles']);
-  var roles_obj = data.body['roles']
-  $('#ajax-relative-show').children().remove();
-  var haml = $("#ajax-relative-show").html("<%= escape_javascript(render partial:'relative_show')%>");
-  $('#ajax-relative-show').append(haml);
-```
+最後の`rolesCallback`にてpatialを更新したいのですが・・・( partialファイルをremoveして更新したものをappendsしようとしているのですがうまくいきません。 )