Rails 引导选项卡。选项卡中的 Dropzone 不起作用

Question

我动态创建引导选项卡，每个选项卡都有一个partial

<ul class="nav nav-tabs" id="tabs-from-locales" role="tablist">

  <% @locales.each_with_index do |locale, i| %>
      <li class="nav-item">
        <a class="nav-link <%= 'active' if i == 0 %>"
           id="<%= locale.downcase %>-locale-tab"
           data-toggle="tab" href="#<%= locale.downcase %>"
           role="tab"
           aria-controls="<%= locale.downcase %>"
           aria-selected="true"><%= locale %></a>
      </li>

  <% end %>

</ul>

<div class="tab-content" id="tabs-from-locales-content">

  <%= @locales.each_with_index do |locale, i| %>
      <div
      class="tab-pane fade <%= 'show active' if i == 0 %>"
      id="<%= locale.downcase %>"
      role="tabpanel"
      aria-labelledby="<%= locale.downcase %>-tab"> A + <%= i %> <%= render 'form' %> </div>
  <% end %>

</div>

部分是一个form，它有另一个带有dropzone div的部分。

<%= form_with(:id => 'my-form', model: [:admin, @island], local: true, 

    html: {id: 'myForm'}) do |f| %>

       ....
       ....

        <div class="form-group">
          <%= render partial: 'shared/dropzone', locals: {upload_url: admin_pictures_path, thumbnail_urls: @thumbnail_urls} %>
        </div>

        <%= f.submit class: 'btn btn-primary' %>

    <% end %>

dropzone 部分包含 dropzone 设置。

Dropzone 在第一个选项卡上正常工作，但在其他选项卡上它似乎没有被初始化并且fallback div 是可见的。

我有一个 js 文件，用于初始化和配置我的 dropzone 设置。

document.addEventListener("turbolinks:load", function () {
    if (document.getElementById('picture_dropzone')) {
        console.log("element found.")
        Dropzone.autoDiscover = false;
        // noinspection JSUnusedGlobalSymbols
        var pictureDropzone = new Dropzone('div#picture_dropzone', {

        ....
        ....
     }

知道为什么dropzone 无法在其他选项卡上初始化吗？

Answer 1

您似乎正在使用 ID #picture_dropzone 搜索所有 dropzone 元素。当然，你只能让一个元素有一个特定的 ID；具有该 ID 的其他元素将被忽略。这就是为什么只有第一个 dropzone 被初始化而不是其余的。

如果您将一个类 (.picture_dropzone) 添加到您的 dropzone div，那么您可以搜索它，搜索将返回所有 dropzone div，而不仅仅是第一个。