Почему я не могу спрятать HTML-div (содержащий данные) перед его повторным рендерингом в приложении Rails?

Question

Фон

Это четкое объяснение того, что я пытаюсь сделать:

1. У меня есть форма Rails (я называю ее 'pre'-поиск '), которая содержит раскрывающийся список
2. При изменении раскрывающегося списка пользователю отображается форма поиска (форма позволяет пользователю выбрать некоторые критерии поиска) Эта форма содержит «Выполнить поиск»Кнопка, которая используется для отправки выбора формы
3. Когда на вышеуказанной форме нажимается «Run Search», таблица данных отображается прямо под формой

Проблема

И это моя проблема:

Когда критерии поиска в приведенной выше форме изменяются и снова нажимается «Выполнить поиск», мне хотелось бы: I. Таблица данных, которая была отображена ранее для удаления, и II. Новый объект данных, который будет отображаться в том месте, где был отображен старый объект данных.

Но этого не происходит. Я вижу, что дополнительные таблицы данных добавляются на страницу вместо того, чтобы удалять старые и заменять их каждый раз. Поэтому, если я запускаю поиск 4 раза, я вижу 4 таблицы данных на странице. Я хотел бы видеть только 1 дату, сколько раз я запускаю поиск.

Код

Это моя форма предварительного поиска с выпадающим списком:

<%= form_for :anything, remote: true, html: { id: 'pre_search_form' } do |f| %>
  <div style="margin-left: 10px; margin-top: 10px">

      <div class="col-lg-2">
        <div class="form-group">
          <label style="font-weight: 600;font-size:95%"><b>Category : </b>&nbsp;<%= select_tag(:search_category, options_for_select([['-Select-', ''], ['Option1', 'o1'], ['Option 2', 'o2'], ['Option 3', 'o3'], ['Option 4', 'o4']], :selected => 0)) %></label>
        </div>
      </div>
    </div>
    <!-- end of row 1 -->

  </div>

  <div id="dummy_div"> </div>

  <div id="datatable_div"></div>

<% end %>

<script type='text/javascript'>

  $(function() {
   $(document).on("change", "#search_category", function(event){

     $.ajax('show_search_form', {
       type: 'GET',
       dataType: 'script',
       data: {
         search_category: $("#search_category").val()
       },
       error: function(jqXHR, textStatus, errorThrown) {
         return console.log("AJAX Error: " + textStatus);
       }
     });
   });
 });
</script>

Это запись маршрутов, которая вызывается при изменении выпадающего списка в вышеуказанной форме предварительного поиска:

rout.rb

get "/show_search_form" => "search#show_search_form", :as => :show_search_form

Это функция контроллера, которая выполняется из-за записи маршрутов выше:

search_controller.rb

class SearchController < ApplicationController

  def show_search_form
    render :partial => "search/show_search_form.js.erb"
  end

Это частичное отображение вышефункция контроллера:

search / show_search_form.js.erb

<%= form_for :anything, remote: true, html: { id: 'search_form' } do |f| %>
  <div class="row">
      <b><%= label_tag "Entity" %><br/></b>
      <%= select_tag(:search_entity, options_for_select([["Entity 1", 1], ["Entity 2", 2]]) %>
  </div>

  <%= button_tag 'Run Search', type: 'button', class: 'btn btn-primary btn-sm', id: "search_run_button" %> 
<%end%>


<!-- Javascript code to handle events for dropdowns in the above form-->

<script type='text/javascript'>
  /* Handle event when "Run Search" button is clicked */
   $(document).on("click", "#search_run_button", function(event){
    $.ajax('search_run', {
      type: 'GET',
      dataType: 'script',
      data: {
        search_entity: $("#search_entity").val()
      },
      error: function(jqXHR, textStatus, errorThrown) {
        return console.log("AJAX Error: " + textStatus);
      }
    });
  });
</script>

Это запись маршрутов для нажатия кнопки в приведенной выше форме:

get "/search_run" => "search#run_search", :as => :search_run

Это функция контроллера, вызываемая приведенной выше записью маршрутов:

  def run_search
    logger.info "SearchController run_search"

    $search_entity = params[:search_entity]

    data_table = SearchDatatable.new(view_context)

    respond_to do |format|
      format.html
      format.json do
        render json: {
          "pageLength"      => data_table.page_length,
          "recordsTotal"    => data_table.records_total,
          "recordsFiltered" => data_table.records_filtered,
          "data"            => data_table.run_data
        }
      end
    end    
    render :partial => "search/run_search.js.erb"
  end

Это часть, вызываемая вышеупомянутой функцией контроллера:

search / run_search.js. erb

$('#datatable_div').hide();
$('#datatable_div').hide().after('<%=escape_javascript(render(:partial => 'search/run_search')) %>');

Как вы можете видеть, я скрываю datatable_div перед тем, как передать данные. Но, тем не менее, таблицы данных добавляются на страницу вместо того, чтобы перезаписываться.

Как я могу перезаписывать datatable_div каждый раз, чтобы независимо от количества поисков, выполненных на странице, ВСЕГДА отображался ТОЛЬКО ОДИН набор данных, доступный для данных?

Пожалуйста, помогите!

Это код рендеринга с датами на случай, если это уместно:

search / run_search.html.erb

<div id="datatable_div">
  <%= content_tag :table, 
                  role: :search_datatable, 
                  id: 'search_datatable', 
                  style: 'height:500px; width: 100vw; overflow-y: auto;',
                  class: 'table table-striped table-bordered table-hover', 
                  data: { url: search_datatable_path(format: :json)} do %>
    <thead>
      <tr>
        <th>Column1</th>
        <th>Column2</th>
      </tr>
    </thead>

    <tbody>
    </tbody>

  <% end %>
</div>

<script>
  $(document).ready(function(){
    $("table[role='search_datatable']").each(function(){
      var table = $(this).DataTable({
        columnDefs: [ 
        { "orderable": true, "targets": 1}, 
        ],
        aoColumns: [
              { mData: 'column1' },
              { mData: 'column2' }
          ],      
        autoWidth: true,
        pageLength: 50,
        processing: true,
        serverSide: true,
        sDom: 'ltipr',
        ajax: $(this).data('url')
      });
    });
  });  
</script>

Я попробовал это, основываясь на комментариях других пользователей stackoverflow:

Подход 1 (на основе предложения @MikeHeft)

Подход 1. а)

$('#datatable_div').html('').html('<%=escape_javascript(render(:partial => 'search/dbr/run_search')) %>');

Что случилось с этим подходом?

Это не сделает данные доступными даже в первый раз. Он не будет предоставлять никаких данных - когда-либо.

Подход 1. b)

$('#datatable_div').html('').after('<%=escape_javascript(render(:partial => 'search/dbr/run_search')) %>');

Что произошло после этого подхода?

Это сделало бы данные доступными, но это все же возвращает меня к моей первоначальной проблеме - это не заменит существующую таблицу данных в следующий раз, когда я запусту поиск. Он просто добавляет все больше и больше данных на мою страницу поиска.