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 div添加了一个类（dropzone），那么您可以搜索该类，搜索将返回所有dropzone div，而不仅仅是第一个。{

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

1 个答案: