Rails Bootstrap 个标签页。选项卡中的 Dropzone 不起作用

Question

我动态创建 bootstrap 个选项卡，每个选项卡都有一个 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 在第一个选项卡上正常工作，但在其他选项卡上似乎没有初始化并且 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 被初始化而不是其余的。

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

Rails Bootstrap 个标签页。选项卡中的 Dropzone 不起作用

Rails Bootstrap tabs. Dropzone in tabs doesn't work

javascript

jquery

ruby-on-rails

twitter-bootstrap

dropzone.js