CODEWITHSUNDEEP
javascriptjqueryajaxdropzone.js
stereozwo
stereozwo

Reputation: 11

Dynamically initialize dropzone.js in Ajax-loaded Form

I would like to use dropzone.js in a dynamically loaded form. This is my actual code.

Implement the source and set autodiscover to false

<script src="scripts/dropzone.min.js"></script>
<script>
  Dropzone.autoDiscover = false;
</script>

I load the Form with jquery

$.ajax({
  method: "GET",
  url: "form.php",
  data: { user_id: userId }
}).done(function( result ) {
  $( ".user-details-"+userId ).append( result );
  var myDropzone = new Dropzone("div.dropzone", {
    url: "imageupload.ajax.php",
  });
});

After the html-result from the ajax-call is appended to my div.user-details the dropzone works without problems. But when I close the Form (remove from dom) and load it again I´ve got the error "Dropzone already attached." in my console.

This error also occours, if I change the initialization and use a div with a unique id.

How can I destroy the dropzone after remove the form from the dom?

Upvotes: 0

Views: 1838

Answers (2)

Kevin Wasie
Kevin Wasie

Reputation: 45

var element = document.getElementById("#Your-DropZone-Element")
if (element.dropzone) {
    element.dropzone.destroy();
}

Upvotes: 1

Rohit Kumar
Rohit Kumar

Reputation: 1792

The problem is you are using a class selector div.dropzone

So you should check if this class exists...& if exists does it already contains a dropzone..make it empty $('div.dropzone').empty();

another way would to be to use dynamic ID 

  var myDropzone = new Dropzone("div#dropzone", {

Upvotes: 1

Related Questions