Dropzone.js and ajax

Question

Im using dropzone.js and loading it using ajax.

My menu ID = "#menu" The upload file should appear in "#div1"

The callback function is not working. I replaced Dropzone.discover by alert("test");

(document).ready(function() {

    $("#menu").click(function(){

    $("#div1").load("upload.php",null, function(){
        Dropzone.discover();
    });

Note: I tried the code below, but it didnt work.

$("#div1").load("upload.php", function(){
    Dropzone.discover();
});

Answer 1

I had a problem getting a Dropzone that was loaded via Ajax to work and discovered that adding the Dropzone.discover(); call fixed it for me.

Answer 2

You should define dropzone on #dive and add your events in init function of dropzone to change it's options related to each #menu. it's best way.

fore example:

var myDropzone = new Dropzone("#div1",{
    url: '/test.php',
    acceptedFiles: "image/*",
    addRemoveLinks: true,
    removedfile: function(file) {
        $.get('remove.php',function(data){
            var _ref;
            return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
        });
    },
    init: function() {
        var thisDropzone = this;
        $('body').on('click','a.menu',function(event){
            href = $(this).attr('href');

            thisDropzone.options.url = href;
        });

        $("body").on('click','#btnRemoveAll',function () {
                thisDropzone.removeAllFiles();
            }
        );

    }
});