1

我一直有这个烦人的问题，我点击了我的自定义表单的选择下拉输入，在我的 Rails 应用程序中使用 Zurb Foundation 4 进行样式设置，并且列表不会显示其元素。

一开始我认为这是简单表单的问题，但我更改了 f.collection_select 的 f.association，我的代码如下所示：

<h2><%= I18n.t(".sign_up") %></h2>

<%= simple_form_for(resource, :html => {:class => "custom"}, :as => resource_name, :url => registration_path(resource_name)) do |f| %>
  <%= f.error_notification %>
  <%= devise_error_messages! %>
  <%= f.input :rut %>
  <%= f.input :name %>
  <%= f.input :email %>
  <div>
    <%= f.label :supplier_type_id %>
    <%= f.collection_select :supplier_type_id, SupplierType.all, :id, :name %>
  </div>
  <%= f.input :password %>
  <%= f.input :password_confirmation %>
  <%= f.error :base %>
  <%= f.submit I18n.t(".sign_up"), :class => "button"  %>
<% end %>

<%= render "devise/shared/links" %>

最奇怪的是，有时我可以在刷新页面时看到项目，但是当我从应用程序的其他视图导航到页面时，它就不起作用了。我在使用表单提示时也注意到了这一点（即：如果我在相同的表单中有两个提示，在不同的输入中，只有一个会显示，但是当每条消息都应该显示在它们各自的输入。重新加载页面时，有时会显示一个提示，有时会显示另一个）

样式看起来不错，所以我认为这可能是基础 javascript 问题。

我注意到的另一件事是，当我加载页面时，样式在使用自定义表单时会出现一种“闪烁”。这个闪烁看起来像基础需要一段时间来加载样式，我也在他们自己的自定义表单文档站点上注意到了这一点。这可能表明这是一个带有 javascript 事件或类似内容的表单，因此这可能意味着 javascript 运行良好。

另外，复选框也有类似的问题，只有在重新加载页面时才能选中，可能与此问题有关。

我很迷茫，一些帮助会变得非常方便。谢谢！

--edit：Foundation 5 不包含自定义表单并且效果更好--

4

4 回答 4

2

您可能需要刷新每个page:change事件的下拉菜单。尝试这样的事情：

$(document).on("page:change", function() {
  // SELECTOR_TO_CUSTOM_DROPDOWNS should select any Zurb custom dropdowns you
  // are using.
  $(SELECTOR_TO_CUSTOM_DROPDOWNS).trigger("change");
});

这是来自Zurb 自定义表单 JS的文档。

于 2013-09-26T18:30:13.283 回答
1

是的，这是由 turbolinks 引起的。它停止$(document).ready在页面加载时触发，这是 Foundation 的自定义表单所要求的。

使用 ssorallen 的答案并比 OP 更不显眼，将其添加到 application.js：

$(function(){ $(document).foundation(); });

$(document).on("page:change", function() {
  if ($('form.custom').length > 0) {
    $(document).foundation('forms');
  }
});

此外，如果您有依赖于文档准备就绪的 jquery/coffeescript，请将jquery turbolinks添加到您的 Gemfile。

于 2013-12-10T05:36:36.767 回答
0

好的，所以我刚刚发现我在浏览器上重复加载了资产。这导致了一个 javascript 错误。似乎在清单中删除

//= require turbolinks

解决问题。

我解决了我的多资产问题

<%= javascript_include_tag "application" %>

在我的应用程序布局中处于领先地位。

在观看了turbolinks railscast之后，我注意到除了我的多个资产加载之外，turbolinks 和基础 4 可能不兼容，这可能是这篇文章的解决方案。但仍然不适合我。

我还注意到导航栏也受到 turbolinks 的影响。

我认为这是一个 turbolinks 问题，而不是特定的基础下拉菜单。我将结束这个问题并打开一个关于 turbolinks 和基础的新问题。

于 2013-08-14T13:35:04.240 回答
0

感谢 Nick Reed 的一些见解，我发现基础 gem 正在初始化 application.js 中的基础，如下所示：

$(function(){ $(document).foundation(); });

所以我检查了文档并使用了这个：

<script>
  $(document).foundation();
</script>

在应用程序布局中的“/body”标签之后，一切似乎都像魅力一样工作！

于 2013-09-27T08:26:17.923 回答