AJAX 上未加载 Dropzone

Question

我有一个在一页上有两个表单的环境。其中一个通过 AJAX 请求加载，另一个在页面加载时存在。

现在，他们俩都有一个空降区。请注意，表单和拖放区的 ID 不同，因此不存在 ID 冲突。

如果重要的话，我正在使用 Laravel 5.4。

test.blade.php

<form id="show-edit-form" name="show-edit-form" class="form-horizontal" role="form" method="post"
      enctype="multipart/form-data" action="{{url('editLocation')}}">
    {{csrf_field()}}
    <input type="hidden" id="location_id" name="location_id" value="{{$location->id}}">


    <div class="form-group">
        <div class="col-xs-12">
            <div class="dropzone" id="editfiles"></div>
        </div>
    </div>

    <div class="clearfix form-actions">
        <div class="col-md-3 col-md-9">
            <button class="btn btn-success btn-edit-submit" type="submit" id="edit-submit-all">
                <i class="ace-icon fa fa-save fa-fw bigger-110"></i> Save changes
            </button>
        </div>
    </div>

</form>

<div class="form-test">

</div>

javascript

jQuery(function ($) {

    Dropzone.options.editfiles = {
        url: 'laravel route',
        ...
    };

    $(document).on('click', '.btn-test', function () {
        $.ajax({
            url: "my url",
            success: function(data) {
                $('.form-test').html(data); // Form returned here
                Dropzone.options.files = {
                    url: 'another laravel route',
                    ...
                };
            }
        });        
    )};

)};

问题是，在 AJAX 请求之后创建的另一个放置区没有呈现，即使我已经指定了它。

一些帮助将不胜感激。谢谢

Answer 1

所以，我所做的是改变我初始化 dropzones 的方式。

而不是这个：

Dropzone.options.editfiles = {
    url: 'laravel route',
    ...
};

我用过：

var first = new Dropzone("#editfiles", {
    url: 'laravel route',
    ...
};

并且我使用 Dropzone.autoDiscover = false; 作为 jQuery 函数的第一行。

这似乎有效。

AJAX 上未加载 Dropzone

Dropzone not loading on AJAX

javascript

ajax

jquery

dropzone.js

laravel-5