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

Posted 2023-05-08

【中文标题】Rails 引导选项卡。选项卡中的 Dropzone 不起作用

【英文标题】：Rails Bootstrap tabs. Dropzone in tabs doesn't work

【发布时间】：2018-05-16 10:22:52

【问题描述】：

我动态创建引导选项卡，每个选项卡都有一个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 无法在其他选项卡上初始化吗？

【参考方案1】：

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

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

【讨论】：

你能详细说明一下吗？一个代码 sn-p 会很好。我现在正在做$(".dropzone").each(function (i, index) Dropzone.autoDiscover = false; var pictureDropzone = new Dropzone('div#'+ this.id, ... ，但不幸的是我收到了一个错误Dropzone is already attached

dropzone div 的 ID 是否唯一？除了new Dropzone('div#'+ this.id, ... 部分外，您的新代码 sn-p 看起来不错。如果 ID 都相同，那么它会一遍又一遍地尝试初始化第一个 dropzone div。