ページネーションがレールで CSS と JS をレンダリングしません (ページネーションでヘッドが欠落しています)

概要

アプリには合計 2 つのビューがあり、1 つはカンバンビュー、もう 1 つはクラシックビューです。すべて正常に動作していますが、クラシックビューではページ 2 または 3 をクリックすると、他のページにリダイレクトされ、すべてのコンテンツが表示されますが、先頭が表示されません。要素にタグがないため（ブラウザで確認しました）、コンテンツが正しく表示されません。ページネーションの後、すべてのCSSファイルとJSファイルがあるため、application.html.erbファイルがレンダリングされていないことを確認しました。

私は Kaminari gem を使用していますが、pagy も適用しましたが、それでも同じことが発生します。

これがコードの一部です、

私のindex.html.erbファイル

...
  <div id="partial-container"></div>
...
<script>
  const partialContainer = document.getElementById('partial-container');
  const valueFromBrowserData = localStorage.getItem('view'); // return view either kanban view or classic view

  if (valueFromBrowserData) {
    selectDropdown.value = valueFromBrowserData;
    loadPartial(window.location.pathname, valueFromBrowserData, partialContainer);
  }

  form.addEventListener('change', (event) => {
    const dropdownValue = event.target.value;
    localStorage.setItem('view', dropdownValue);
    loadPartial(window.location.pathname, dropdownValue, partialContainer);
  });

  function loadPartial(url, value, container) {
    loaded_partials = true;
    // Show the loader
    var loader = document.getElementById('loader-style');
    if (loader) {
      loader.style.display = 'flex';
    }
    // Clear the partial container
    container.innerHTML = '';
    const urlWithParams = `${url}?name=${encodeURIComponent(value)}
      fetch(urlWithParams)
      .then((response) => response.text())
      .then((partialHtml) => {
        container.innerHTML = partialHtml;
        removeEmptyHeaders();
        // Hide the loader
        if (loader) {
          loader.style.display = 'none';
        }
      })
      .catch((error) => {
        console.error('Error loading partial:', error);
        // Hide the loader in case of error
        if (loader) {
          loader.style.display = 'none';
        }
      });
   }
</script>

したがって、localstorageに基づいて、かんばんとクラシックビューの詳細を取得します。クラシックビューでは、_classic_view.html.erbである1つの部分をレンダリングするコードをいくつか書きます。

<div id="flash-notification"></div>
<div class="can-table-data">
<% @data.each do |data|%>
... # showing details
<% end %>
</div>

<div class="table-pagination">
  <%= paginate @data %>
  <div class="dynamic-page-selection mt-1">
    <div class="dropdown">
      <button class="btn btn-row dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        <%= @data.limit_value %> Rows / Page
      </button>
      <ul class="dropdown-menu">
        <% PAGE_SIZES.each do |size| %>
          <li><%= link_to size, url_for(per_page: size), class: "dropdown-item" %></li>
        <% end %>
      </ul>
    </div>
  </div>
</div>

私のapplication.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <!-- Dropzone Stand alone V6 css -->
    <link href="https://unpkg.com/[email protected]/dist/dropzone.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <%= javascript_include_tag "jquery" %>
    <%= stylesheet_link_tag "application.bootstrap", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>
    <%= javascript_include_tag "delete_confirmation_dialog" %>
    <%= javascript_include_tag "polling" %>
    <%= javascript_include_tag 'sortable_developer_fields' %>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body>
    <%if @current_user %>
      <div class="wrapper">
        <%= render 'layouts/header' %>
        <div class="content-page">
          <div class="custom-container">
            <%= yield %>
          </div>
        </div>
      </div>
    <% else %>
      <%= render 'layouts/flash' %>
      <%= yield %>
    <% end %>
  </body>
</html>

初めてクラシックビューをロードすると、完璧に機能します

任意のページをクリックすると、_classic_view.html.erb のデータのみがレンダリングされ、application.html.erb はレンダリングされません。

解決策を見つけたらぜひ教えてください。ありがとうございます!

解決策

ページネーションが適用されているときに、コンテンツを置き換える適切なturbo_frameが見つからないため、特定のフレームではなく完全なページをリダイレクトしているため、_classic_view.html.erbにturbo_frameを1つ追加するだけで問題が解決されるため、なぜこれが起こるのか解決策を見つけたところです。問題

<div id="flash-notification"></div>
<%= turbo_frame_tag "classic_view_table" do %>

  <div class="can-table-data">
  <% @data.each do |data|%>
  ... # showing details
  <% end %>
  </div>

  <div class="table-pagination">
    <%= paginate @data %>
    <div class="dynamic-page-selection mt-1">
      <div class="dropdown">
        <button class="btn btn-row dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
          <%= @data.limit_value %> Rows / Page
        </button>
        <ul class="dropdown-menu">
          <% PAGE_SIZES.each do |size| %>
            <li><%= link_to size, url_for(per_page: size), class: "dropdown-item" %></li>
          <% end %>
        </ul>
      </div>
    </div>
  </div>
<% end %>