質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.06%

ajax: partial部分を更新したい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 44

score 23

partial更新について質問させてください。
丸一日考えても上手くいかず、お力添いただければ幸いです。

  • 実現したいこと
    ajaxでrailsからオブジェクトをjsonで受け取った状態で
    そのオブジェクトを元にpartialを更新したい

以上です。

現状をお伝えします。
hamlから登録ボタンを押す

必要なパラメータをサーバーに送り、@trustを更新する

更新された@trustをjsonでフロントに戻す

受け取ったjsonをもとにpartialを非同期で更新したい

以上の流れをしたいのですが、全く上手くできず困っております。

少し長いですが、関連ファイルです

trusts_controller.rb

  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

.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

.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

// 登録ボタン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} %>");
としても以下の文字列しか出ませんでした。
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.06%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る