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

Posted 2023-05-09

技术标签:

【中文标题】如何使下拉表单在 Ruby On Rails 中工作【英文标题】：How to make a dropdown form work in Ruby On Rails 【发布时间】：2020-06-24 22:11:51 【问题描述】：

我想在我的 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 动词会引发错误。

【问题讨论】：

听起来像是 turbolinks 问题。这应该会有所帮助：github.com/turbolinks/turbolinks#installing-javascript-behavior 当您说it will stop working randomly 时，您确定没有导致错误的特定操作。我很确定没有导致错误的特定操作，因为我已经尝试了多次，注释和取消注释 turbolinks 行，当该行是未注释。代码中不会发生随机性；有什么东西在触发它。我知道它不应该是随机的，但我就是不知道这里发生了什么。 【参考方案1】：

我的想法是，当您从另一个页面导航到有问题的页面时会发生这种情况（而不是直接放入 url）。启用 turbolinks 后，JavaScript 将代替浏览器处理页面加载。这意味着像 document.onload 这样的事情不会被触发。

您的某个插件可能会将自己附加到此类事件。

大多数 JavaScript 插件都有一个手动重新初始化它们的句柄。在那种情况下，您应该可以在turbolinks is done loading a page 时调用它。

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

或者，您可以从项目中删除 turbolinks 依赖项。这可以让页面正常运行，也应该可以解决问题。

【讨论】：

同意 Turbolinks 兼容性听起来是最可能的原因。您尝试从 Bootstrap 安装下拉行为吗？如果是这样，您可能需要查看 Bootstrap 与 Turbolinks 的兼容性。您还可以查看如何禁用 Turbolinks。（为了记录，我真的很喜欢 Turbolinks。）

以上是关于如何使下拉表单在 Ruby On Rails 中工作的主要内容，如果未能解决你的问题，请参考以下文章

Ruby on Rails 表单添加带有文本框的“其他”选项以选择下拉菜单

Ruby on Rails：搜索表单 - 多个搜索字段

Ruby on Rails - 简单表单自动完成关联搜索

chardinjs 不在 ruby on rails 中工作

mailchimp 邮件程序不能在 ruby on rails 中工作

如何在 Ruby-on-Rails 中生成 PDF 表单