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

Question

I want to add a dropdown form in the navigation bar in my Rails application, however, the dropdown form will randomly stop working.我想在我的 Rails 应用程序的导航栏中添加一个下拉表单，但是，该下拉表单将随机停止工作。 Sometimes it works fine, but other times I need to refresh the page to make it work.有时它工作正常，但有时我需要刷新页面才能使其工作。

I'm using Rails version 6.2.1.我正在使用 Rails 版本 6.2.1。

This is my application.html.erb:这是我的 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>

And this is the code for the dropdown form in the header:这是标题中下拉表单的代码：

<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

I noticed that if I delete我注意到如果我删除

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

the dropdown will work, but it causes other problems.下拉菜单会起作用，但会导致其他问题。 For example, the DELETE verb in the routes.rb will raise an error.例如，routes.rb 中的DELETE动词将引发错误。

Answer 1

My would be that this occurs when you navigate to the page in question from another another page (not directly putting in the url).我认为当您从另一个页面导航到相关页面时会发生这种情况（而不是直接放入 url）。 With turbolinks enabled JavaScript will handle page loading instead of the browser.启用 turbolinks 后，JavaScript 将处理页面加载而不是浏览器。 Meaning that things like document.onload don't get triggered.这意味着诸如document.onload东西不会被触发。

One of your plug-ins might attach itself to such an event.您的插件之一可能会将其自身附加到此类事件。

Most JavaScript plug-ins have a handle to manually re-initialize them.大多数 JavaScript 插件都有一个句柄来手动重新初始化它们。 In that scenario you should be able to call it when turbolinks is done loading a page .在这种情况下，您应该能够在turbolinks 完成加载页面时调用它。

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

Alternatively you could drop the turbolinks dependency from your project.或者，您可以从项目中删除 turbolinks 依赖项。 This lets pages behave like normal and also should resolve the issue.这让页面表现得像正常一样，也应该可以解决问题。

如何在 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