Dropzone.js - Mancato funzionamento

[Pandax]

Ciao a tutti sto cercando di usare il plugin dropzone (http://www.dropzonejs.com/)
per fare l'upload di file.

Probabilmente mi perdo in un bicchiere d'acqua... e mi servirebbe una mano per capire cosa sbaglio.

Praticamente apro una modal Bootstrap e carico in modal-body tramite ajax il mio form

<div id="modal_pon" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="display: none;" data-keyboard="false" data-backdrop="static">             <div class="modal-dialog" role="document"> 
                <div class="modal-content">  
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myModalLabel">&nbsp;</h4>
                    </div>
                    <div id='div_modalpon_page' class="modal-body" > 


                        
<form id="form_addfile" class="form-horizontal" action="#" method="post" enctype="multipart/form-data">
                    <div id="my-awesome-dropzone-test" class="dropzone" style="height:200px; border:1px solid #000000;"></div> <!-- This is the dropzone element -->
                    <div class="form-group">
                      <label class="control-label col-md-3">Titolo File</label>
                      <div class="col-md-9">
                        <input type="Titolo" class="form-control" id="titolo" name="titolo" placeholder="Titolo">
                      </div>
                    </div>    
                    <div class="form-group text-center">
                      <div class="col-md-6 col-md-offset-3">
                        <button type="submit" class="btn btn-info">salva</button>
                      </div>
                    </div>
                  </form>



                    </div> 
                    <div class="modal-footer" style="padding:15px 15px 15px 15px;"> 
                        <button type="button" class="btn btn-default btnclosemsg" data-dismiss="modal">Chiudi</button> 
                    </div> 
                </div> 
            </div> 
        </div>

carico tutti i file js esterni che servono, compreso quello dove ho il mio codice js.

 

Dropzone.autoDiscover = false;   


    $("div#my-awesome-dropzone-test").dropzone({
        url: "/backend/schede/ajax/ajax_file.php",
        addRemoveLinks: true,
        success: function (file, response) {
            alert('success');
            var imgName = response;
            file.previewElement.classList.add("dz-success");
            console.log("Successfully uploaded :" + imgName);
        },
        error: function (file, response) {
            alert('success');
            file.previewElement.classList.add("dz-error");
        }
    });

quel che mi chiedo è... premendo il pulsante di submit.. non dovrebbe lanciare l'ajax alla pagina ajax_file?

...a me si chiude la modal e non fa nulla...
qualcuno sa darmi una mano?

[ciro78]

Occhio ai titoli delle discussioni. Vedi il regolamento.

In merito al tuo problema penso che dipenda dal fatto che bindi l'evento prima che effettivamente il div sia parte della dom.

[Pandax]

Mi spiace per il titolo... pensavo risultasse chiaro.

per il tuo suggerimento...non l'ho tanto capito...
il codice jquery viene eseguito quando la pagina è ready.. il caricamento del file nel box dropzone.. funziona...
è quando clicco submit che non va...


ora ho trovato un altro esempio che tento di usare......
in cui fa....

document.getElementById("testbtn").addEventListene r("click", function(e) {
alert('ok');
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();


e sembra andare meglio... se riesco a finirlo.. poi posto il codice, così magari è utile ad altri

<form id="form_addfile" name="form_addfile" class="form-horizontal" action="#" method="post" enctype="multipart/form-data">                                        
                     <div id="dropzone-panda" class="dropzone" style="height:200px; border:1px solid #000000;"></div> <!-- This is the dropzone element -->
                    
                    
                    <div class="form-group">
                      <label class="control-label col-md-3">Titolo File</label>
                      <div class="col-md-9">
                        <input type="Titolo" class="form-control" id="titolo" name="titolo" placeholder="Titolo">
                      </div>
                    </div>    
                    <div class="form-group text-center">
                      <div class="col-md-6 col-md-offset-3">
                        <button type="submit" class="btn btn-info">salva</button>
                      </div>
                    </div>
                  </form>

$(document).ready(function() {     
   Dropzone.autoDiscover = false;
   
   
    
    var myDropzonePanda = new Dropzone("div#dropzone-panda", { 
        url: "/backend/schede/ajax/ajax_file.php",
        addRemoveLinks: true,
        // The configuration we've talked about above
        autoProcessQueue: false,
        uploadMultiple: true,
        parallelUploads: 100,
        maxFiles: 100,
        // The setting up of the dropzone
        init: function() {
          var myDropzone = this;
            var form = document.forms[0];
          // First change the button to actually tell Dropzone to process the queue.
          form.querySelector("button[type=submit]").addEventListener("click", function(e) {
              alert('ok');
            // Make sure that the form isn't actually being sent.
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
          });


          // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
          // of the sending event because uploadMultiple is set to true.
          this.on("sendingmultiple", function() {
            // Gets triggered when the form is actually being sent.
            // Hide the success button or the complete form.
          });
          this.on("successmultiple", function(files, response) {
            // Gets triggered when the files have successfully been sent.
            // Redirect user or notify of success.
          });
          this.on("errormultiple", function(files, response) {
            // Gets triggered when there was an error sending the files.
            // Maybe show form again, and notify user of error
          });
        }
    });


   
      
});

[ciro78]

se carichi il form dopo in una modal....e lo chiami tramite ajax...quando il documento è pronto il form non esiste. quindi il bind fallisce.

[Pandax]

in questo modo

// First change the button to actually tell Dropzone to process the queue.
document.getElementById("btnsalva").addEventListen er("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();

});


sembra funzionare