时间戳

首页 > 解决方案 > 如何使下拉表单在 Ruby On Rails 中工作

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

问题描述

我想在我的 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' %>

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

标签： javascriptjqueryhtmlruby-on-railsruby

解决方案

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

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

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

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

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

推荐阅读