使用materialize rails 4.2时无法添加collection_select

I have created a categories model with a migration with a category_id (basically everything Mackenzie Child does in his video https://www.youtube.com/watch?v=814gCeOpM4o from 25minutes) and I want it to show up in my form.

我创建了一个带有category_id的迁移的类别模型(基本上Mackenzie Child在他的视频https://www.youtube.com/watch?v=814gCeOpM4o中的所有内容从25分钟开始)并且我希望它以我的形式显示。

It doesn't work, my collection_select wont show up on screen but it will show up in the source code, and when I 'remove' the css- framework materialize.

它不起作用,我的collection_select不会显示在屏幕上,但它会显示在源代码中,当我'删除'css-框架实现时。

My code:

<div class="container"> 
<div class="row">
    <%= form_for @post do |f| %>
        <%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Choose a category" } %>
        <br>
        <%= f.label :title %>
        <%= f.text_field :title %>
        <br>
        <br>
        <div class="row">
            <div class="input-field col s12">
                <%= f.label :text %>
                <%= f.text_area :text, class: "materialize-textarea" %>
            </div>
        </div>

        <br>
        <br>
        <%= f.label :creator %>
        <%= f.text_field :creator %><br>
        <%= f.submit %>
    <% end %>   
</div>

How it's displayed in the source code:

它是如何在源代码中显示的:

    <select name="post[category_id]" id="post_category_id"><option value="">Choose a category</option>
        <option value="1">Marketing</option>
        <option value="2">Technology</option>
        <option value="3">Programming</option>
        <option value="4">Health and Fitness</option>
   </select>

3 个解决方案

#1

I looked in the materialize documentation and i found out that i just had to add the class browser-default to my collection-select (link to docs http://materializecss.com/forms.html)

我查看了materialize文档,我发现我只需要将类browser-default添加到我的collection-select(链接到docs http://materializecss.com/forms.html)

    <%= f.collection_select :category_id, Category.all, :id, :name, { prompt: "Choose a category" }, class: "browser-default" %>

#2

If you want your select boxes to render the Materialize CSS way instead of the browser default, then remove the browser-default class and initialize the select box with this code in the relevant .coffee file:

如果您希望选择框呈现Materialize CSS方式而不是浏览器默认值,则删除浏览器默认类并使用相关.coffee文件中的此代码初始化选择框:

$(document).ready ->
  $('select').material_select
  return

look under app/assets/javascripts/ for the file to put it in.

查看app / assets / javascripts /下的文件。

Also if you are also using turbolinks with jQuery you will need to add the jquery.turbolinks gem to make the $document.ready function work.

此外,如果您还在使用jQuery的turbolinks,则需要添加jquery.turbolinks gem以使$ document.ready函数正常工作。

Remember to restart your rails server after adding jquery.turbolinks

记得在添加jquery.turbolinks后重新启动rails服务器

#3

Based on Toby 1 Kenobi's answer and this one my solution, using Rails 5, was to change $(document).ready to $(document).on('turbolinks:load') like so:

根据Toby 1 Kenobi的回答,我的解决方案是使用Rails 5,将$(document).ready更改为$(document).on('turbolinks:load'),如下所示:

$(document).on('turbolinks:load', function() {
  $('select').material_select();
})

#1