Search code examples
ruby-on-railsrubykaminari

pagination is not rendering css and js in rails(head is missing on pagination)

I have total 2 views in my app one is kanban view and another is classic view, everything is working fine but in my classic view when i click on page 2 or 3.. it will redirect to other page and all content is displayed but head tag is missing in element(i checked in browser) so that content will not display properly. i checked that after pagination it is not rendering application.html.erb file which supposed to be because there is all my css and js files.

i am using kaminari gem but i also applied pagy still same thing occur.

here is piece of code,

my index.html.erb file

...
  <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>

so based on localstorage it will fetch details for kanban and classic view , in classic view i write some piece of code that it will render one partial which is _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>

my 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>

so when i first time load classic view it will working perfectly enter image description here enter image description here

after clicking on any page it just render only data of _classic_view.html.erb and not rendering application.html.erb enter image description here enter image description here

So guys you find any solution please let me know, Thank You!

Solution

  • I just found a solution why is this happening because when pagination is applying it is not finding any suitable turbo_frame to replace content so it is redirecting complete page rather than specific frame so just need to add one turbo_frame in _classic_view.html.erb which resolved my issues

    <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 %>