Ajax で日付変更したあとに destroy すると前のデータが消されてしまう

Question

前提・実現したいこと

日付に対してデータがある場合とない場合でdestroyリンクを動的に表示。
入力されている日付に紐づくデータをdestroyできるようにしたい。

仕様

日付に対してその日の血圧を記録するアプリを作っています。
モーダルフォーム（form_for）の日付フィールドにはデフォルトで今日の日付が入っていて、
今日のデータがあれば update, なければ create されます。
日付フィールドを変更すれば、変更された日付に紐づくデータ（Ajaxで取得）も編集・更新できます。

new, create, edit, update までは実装ができましたが、
destroyがうまく実装できません。

（画面イメージ）

デザインを入れ込んでいませんが、一番下の「delete」を押すとデータが消されるようにしたいです。

発生している問題・エラーメッセージ

1. 日付フィールドを変更すると、Ajaxで変更した日付に紐づくデータが各入力値に入るようになっています。しかし、deleteリンクを押すと、デフォルトで入力されていた今日の日付のデータが消されてしまいます。

2. データがあればdeleteリンクを表示させるようにしたいのに、今日の日付データがない場合に日付変更しても、deleteリンクが表示されません。今日の日付データがある場合は表示され、今日の日付のデータをdestroyすることはできますが、日付変更すると1のようになってしまいます。

該当のソースコード

入力フォーム

<div class="modal-dialog" role="document">
  <div class="modal-content">
    <%= form_for @record, remote: true do |f| %>
      <!--エラーメッセージ省略-->
      <div class="form-group">
        <%= f.label :date, for: "inputDate" %>
        <%= f.date_field :date, class: "form-control", id: "inputDate", value: @record.date %>
      </div>
      <p class="rcd-lbl">朝：</p>
      <div class="form-row">
        <div class="form-group col-md-4">
          <%= f.label :m_sbp, for: "inputM_SBP", class: "sr-only" %>
          <%= f.telephone_field :m_sbp, placeholder: "最高血圧", class: "form-control", id: "inputM_SBP", value: @record.m_sbp %>
        </div>
        <div class="form-group col-md-4">
          <%= f.label :m_dbp, for: "inputM_DBP", class: "sr-only" %>
          <%= f.telephone_field :m_dbp, placeholder: "最低血圧", class: "form-control", id: "inputM_DBP", value: @record.m_dbp %>
        </div>
        <!--入力フォーム省略-->

      <div class="form-group">
        <%= f.submit "記録する", class: "btn btn-block btn-blue", id: "record-btn" %>
      </div>
    <% end %>

    <% unless current_user.records.find_by(date: @record.date).nil? %>
      <%= form_for current_user.records.find_by(date: @record.date),
          html: { method: :delete } do |f| %>
        <%= f.submit "削除する", class: "btn" %>
      <% end %>
    <% end %>
  </div>
</div>

controller（searchはAjaxで使用）

def destroy
  @record = current_user.records.find_by(date: params[:date])
  respond_to do |format|
    if @record.destroy
      format.html { redirect_to root_url, notice: '記録を削除しました。'}
      format.js
    else
      format.js { render :edit }
    end
  end
end

def search
  @record = current_user.records.find_by(date: params[:date])
  respond_to do |format|
    if @record.nil?
      @record = Record.new(date: params[:date])
      format.json { render json: @record }
    else
      format.json { render json: @record }
    end
  end
end

Ajax（日付フィールド変更時に稼働）

$(document).on('change', '#inputDate','turbolinks:load', function(){ 
  var inputDate = $("#inputDate").val();
$.ajax({
    url: '/records/search',
    type: 'GET',
    data: ('date=' + inputDate),
    processData: false,
    contentType: false,
    dataType: 'json'
  })
  .done(function(data){ //変更された日付のデータを格納
    $("#inputM_SBP").val(data.m_sbp);
    $("#inputM_DBP").val(data.m_dbp);
    // 省略（入力フォーム）
    if(inputDate == "") {
      // 省略（記録するボタンの表示・非表示切り替え）
    }
  })
  .fail(function(data){ //
    $("#inputM_SBP").val("");
    $("#inputM_DBP").val("");
    // 省略（入力フォーム）
  })
});

試したこと

Ajaxで変更された日付に紐づくデータと一緒に、destroyのform_forを更新できないかな？と調べて見ましたがよくわからず。。。。

補足情報（FW/ツールのバージョンなど）

・ruby 2.6.5
・rails 6.0.2

何かヒントや参考記事だけでも良いのでアドバイスいただけると大変助かります。
よろしくお願いいたします。

Answer 1

知り合いのエンジニアに助けてもらって、自己解決できました。
結論としては、Ajaxでdoneのときに送信先を書き換えてあげる ということでした。
試行錯誤して、以下の方法でできました。

<% if @record.id != nil %>
  <%=link_to "削除する", @record, id: "destroy_form", class: "btn btn-gray",
    method: :delete, data: { confirm: "本当に削除しますか？" } %>
<% else %>
  <%=link_to "削除する", @record, id: "destroy_form", class: "btn btn-gray disabled",  
    method: :delete, data: { confirm: "本当に削除しますか？" }  %>
<% end %>

@record の id があるかないかの条件分岐を入れて、今日の日付のデータがまだ登録されていないときはボタンを非アクティブにしています。if文がないと、データが登録されていない時も表示されてしまい、ボタンをクリックするとエラーになってしまいます。
@record だけでも最初はできると思いましたが、上に入力フォームがあるせいかできませんでした。

  .done(function(data){ //変更された日付のデータを格納
    $("#inputM_SBP").val(data.m_sbp);
    $("#inputM_DBP").val(data.m_dbp);
    // 省略（入力フォーム）
    $("#destroy_form").attr("action", `/records/${data.id}`);
    $("#destroy_form").attr("href", `/records/${data.id}`);
    if(data.id == null){
      $("#destroy_form").addClass('disabled');
    } else {
      $("#destroy_form").removeClass('disabled');
    }
 

attr で属性値actionとhrefの値を取得して、デフォルトでは **/records/**になっている値をid入りの値に書き換えています。両方の属性値を書き換えないとうまく動きませんでした。

また、変更された日付のデータがあるときは disabled のクラスを外して、データがないときはクラスを追加するようにして、削除ボタンの活性化の切り替えをしています。

  def destroy
    @record = current_user.records.find(params[:id])
    respond_to do |format|
      @record.destroy
      format.html { redirect_to root_url, notice: "記録を削除しました。"}
      format.js
    end
  end

データのあるときだけリンクボタンが動作するようになっているので、余計なif文を削除しました。

ちなみに、form_forだと、こんな感じで実装できます。

<%= form_for @record, html: { method: :delete, id: "destroy_form" } do |f| %>
  <%= f.submit "削除する", class: "btn" %>
<% end %>

$("#destroy_form").attr("action", `/records/${data.id}`);

link_toでは actionとhrefの書き換えが必要でしたが、form_forではactionのみでできました。ですが、上記のコードには、上述の通り、さらにhtmlで記録のあるなしをif文で判定する処理が必要になるので、link_toで今回は実装しました。