"dropzone is not a function" in ajax response

Question

I have a page that fetches an ajax response. That response

includes another ajax response
the last response has a dropzone which is initialised with the following

$(document).ready(function() {
    $("#uploadme").dropzone({
        paramName: 'photos',
        url: 'upload.php',
        dictDefaultMessage: "drop here",
        clickable: true,
        enqueueForUpload: true,
        maxFilesize: 1,
        uploadMultiple: false,
        addRemoveLinks: true
    });
});

That works well the first time.

The second response (2.) reloads itself when posting in a form. When this happens, I get this error in the console

Uncaught TypeError: $(...).dropzone is not a function

I guess (and I'm purely guessing now) that dropzone is called upon to soon, but how do I solve this?

It´s included in the header at the first page, below Jquery. — Thomas, Oct 01 '17 at 15:06
`$(document).ready(function($) {` Most likely you have multiple versions of jquery. adding `$` to the ready callback gives you a `$` that won't be overwritten by the additional version of jquery. you should definitely avoid having multiple versions of jquery. — Kevin B, Oct 03 '17 at 21:20

score 1 · Answer 1 · answered Oct 01 '17 at 21:23

I might have find a solution myself.

First of all, I moved the code outside $(document).ajaxComplete(function())

Second, using clues found on DropzoneJS: How to get PHP response after upload success? , I rewrote the code to

   new Dropzone("#uploadme", { 
               maxFilesize: 2, // MB
               dictDefaultMessage: "Dra bilder hit om du vill inkludera dom i din kommentar",
            url: 'upload.php',
            init: function() {
                this.on("success", function(file, responseText) {
                    console.log(responseText);
                });
            }
        });

I'm not quite sure why it worked, but it might help someone else.

"dropzone is not a function" in ajax response

1 Answers1