【发布时间】:2020-08-14 07:17:40
【问题描述】:
我遇到了一个非常奇怪的问题。我昨天在我的 Rails 应用程序(Algolia Places)中为我的表单添加了一个自动完成选项。我还安装了 webpacker,以使用我的应用程序中的包。因此,结果表明,在我的 address.html.erb 中,我现在得到了两个显示在彼此下方的表单:一个带有自动完成功能,另一个没有。见下图(第一个表格有自动完成地址,下面那个没有)。
我认为问题出在我的 application.html.erb 中,现在的代码如下所示:
<!DOCTYPE html>
<html>
<head>
<title>Neigbornow</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<meta>
<%= yield %>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
<%= javascript_pack_tag 'autocomplete' %>
</meta>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<% if @user.nil? %>
<%= render 'layouts/header' %>
<% elsif user_signed_in? && current_page?(user_step_path) || %>
<%= render partial: "layouts/header_address" %>
<% else %>
<%= render 'layouts/header_rest' %>
<% end %>
<%= render 'layouts/flash' %>
<%= yield %>
</body>
</html>
控制台抛出以下错误:
You are loading Turbolinks from a <script> element inside the <body> element. This is probably not what you meant to do!
Load your application’s JavaScript bundle inside the <head> element instead. <script> elements in <body> are evaluated with each page change.
For more information, see: https://github.com/turbolinks/turbolinks#working-with-script-elements
——
Suppress this warning by adding a `data-turbolinks-suppress-warning` attribute to: <script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1"></script>
如果我改变了
<%= yield %>
到
<%= yield :js %>
第二种形式消失了,但自动完成功能也消失了。如果我移动,也会发生同样的情况
<%= yield %>
到最后。这对我来说是一个谜。我真的需要这方面的帮助,因为互联网上没有这方面的材料。
附: 这是布局/标题
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand pull-left" href="#">
<img src="<%= image_path('logo_transparent.png') %>" width="147" height="70" class="d-inline-block align-left mr-2">
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav pull-right">
<li><%= link_to 'Home', root_path, method: :get %></li>
<li><a>About</a></li>
<li><a>Search</a></li>
<li><a>Contact</a>
<% if user_signed_in? %>
<% if current_user.profile == nil %>
<li><span class="bg-primary text-white rounded"><%= link_to 'Create profile', new_user_profile_path(current_user.id) %></span></li>
<% else %>
<li><span class="bg-primary text-white rounded"><%= link_to 'My profile', user_profile_path(@user) %></span></li>
<% end %>
<li><span class="bg-primary text-white rounded"><%= link_to 'Log out', destroy_user_session_path, method: :delete %></span></li>
<% else %>
<li><div class="log-in-btn"><button class="btn" type="submit"><%= link_to 'Log in', new_user_session_path %></button></div></li>
<% end %>
</ul>
</div> <!--/.nav-collapse -->
</div>
但我实际上在此页面上呈现另一个标题 - 一个空的,如您所见
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand pull-left" href="#">
<img src="<%= image_path('logo_transparent.png') %>" width="147" height="70" class="d-inline-block align-left mr-2">
</div>
</div>
</div>
</nav>
在首页,没有自动填充功能,这个问题不会出现。
附: - 编辑版本
<!DOCTYPE html>
<html>
<head>
<title>Neigbornow</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= yield :meta %>
<%= yield %>
<%= javascript_include_tag 'application' %>
<%= javascript_pack_tag 'application' %>
<%= javascript_pack_tag 'autocomplete' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= yield :css %>
</head>
<body>
<% if @user.nil? %>
<%= render 'layouts/header' %>
<% elsif user_signed_in? && current_page?(user_step_path) || %>
<%= render partial: "layouts/header_address" %>
<% else %>
<%= render 'layouts/header_rest' %>
<% end %>
<%= render 'layouts/flash' %>
<!- I would really recommend that you wrap this in an element -!>
<div id="main">
</div>
</body>
</html>
【问题讨论】:
标签: ruby-on-rails