CODEWITHSUNDEEP
javascriptjqueryajaxlaravel-5dropzone.js
Zubin Kadva
Zubin Kadva

Reputation: 601

Dropzone not loading on AJAX

I have an environment where I have two forms on one page. One of them is loaded via an AJAX request and the other one exists on page load.

Now, both of them have a dropzone. Note that the IDs of the forms and dropzones are different so there is no ID conflict.

I am using Laravel 5.4 if that matters.

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',
                    ...
                };
            }
        });        
    )};

)};

The problem is that, the other dropzone which is created after an AJAX request is not rendered even though I have specified it.

Some help would be appreciated. Thanks.

Upvotes: 1

Views: 1361

Answers (1)

Zubin Kadva
Zubin Kadva

Reputation: 601

So, what I did is changed the way I initialize dropzones.

Instead of this:

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

I used:

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

And I used Dropzone.autoDiscover = false; as the first line in the jQuery function.

This seems to work.

Upvotes: 3

Related Questions