如何在 Ruby On Rails 中制作下拉表单

Question

我想在我的 Rails 应用程序的导航栏中添加一个下拉表单，但是，该下拉表单将随机停止工作。 有时它工作正常，但有时我需要刷新页面才能使其工作。

我正在使用 Rails 版本 6.2.1。

这是我的 application.html.erb：

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>
  <body id="main-body">
    <div class="container">
      <%= render 'layouts/header'%>
      <%= yield %>
    </div>
  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  </body>
</html>

这是标题中下拉表单的代码：

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown">
    Account <b class="caret"></b>
  </a>
  <ul class="dropdown-menu">
    <li><%= link_to "Profile", current_user %></li>
    <li><%= link_to "Settings", '#' %></li>
    <li class="divider"></li>
    <li>
      <%= link_to "Log out", logout_path, method: :delete %>
    </li>
  </ul>
</li

我注意到如果我删除

<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>

下拉菜单会起作用，但会导致其他问题。 例如，routes.rb 中的DELETE动词将引发错误。

Answer 1

我认为当您从另一个页面导航到相关页面时会发生这种情况（而不是直接放入 url）。 启用 turbolinks 后，JavaScript 将处理页面加载而不是浏览器。 这意味着诸如document.onload东西不会被触发。

您的插件之一可能会将其自身附加到此类事件。

大多数 JavaScript 插件都有一个句柄来手动重新初始化它们。 在这种情况下，您应该能够在turbolinks 完成加载页面时调用它。

document.addEventListener("turbolinks:load", function() {
  ThirdPartyLibrary.initialize();
});

或者，您可以从项目中删除 turbolinks 依赖项。 这让页面表现得像正常一样，也应该可以解决问题。

如何在 Ruby On Rails 中制作下拉表单

问题描述

1 个解决方案

解决方案1
1 2020-03-13 09:35:50

如何在 Ruby On Rails 中制作下拉表单

问题描述

1 个解决方案

解决方案1 1 2020-03-13 09:35:50

解决方案1
1 2020-03-13 09:35:50