分页未在rails中渲染css和js（分页上缺少head）

问题描述 投票：0回答：1

我的应用程序中共有 2 个视图，一个是看板视图，另一个是经典视图，一切正常，但在我的经典视图中，当我单击第 2 或第 3 页时..它将重定向到其他页面并显示所有内容，但元素中缺少 head 标签（我在浏览器中检查），因此内容无法正确显示。我检查了分页后它没有渲染 application.html.erb 文件，这应该是因为有我所有的 css 和 js 文件。

我正在使用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>

因此，基于本地存储，它将获取看板和经典视图的详细信息，在经典视图中，我编写了一段代码，它将渲染一个部分，即 _classic_view.html.erb

<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

所以各位找到解决方案请告诉我，谢谢！

ruby-on-rails ruby kaminari
1个回答
0
投票

我刚刚找到了一种解决方案，为什么会发生这种情况，因为当应用分页时，它找不到任何合适的 Turbo_frame 来替换内容，因此它重定向整个页面而不是特定框架，因此只需在 _classic_view.html.erb 中添加一个 Turbo_frame 即可解决我的问题

<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 %>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.