Ich bin neudropzone.js Bootstrap-modal - Fehler: Dropzone bereits angebracht - wenn modal Lasten
dropzone.js Ich habe eine Seite erstellt, die Datentabellen verwendet aus verschiedenen Einträgen für den Benutzer die Daten anzuzeigen. Sobald der Benutzer einen Eintrag auswählt, wird das Bootstrap-Modal ausgelöst. Das modale from muss einen Dropzone-Bereich enthalten, der Dateien anzeigt, die sich bereits auf dem Server befinden.
Ich erhalte einen Fehler von Error: Dropzone already attached.
. Ich habe Dropzone.autoDiscover = false;
am Anfang des Skripts gesetzt.
Also für die Faust Element ausgewählt die modale mit der Info öffnet, wenn ein anderes Produkt nach dem gewählt ist, dass die modale nicht geöffnet und ich erhalte die Fehler Dropzone already attached
Mein modal
<!-- Bootstrap modal - Add/Edit -->
<div class="modal fade" id="modal_form" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title">Disbursement</h3>
</div>
<div class="modal-body form">
<div id="the-message"></div>
<form action="#" id="form" class="form-horizontal">
<input type="hidden" value="" name="disb_id"/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3">Date</label>
<div class="col-md-9">
<input name="dod" placeholder="yyyy-mm-dd" class="form-control datepicker" type="text">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Description</label>
<div class="col-md-9">
<textarea name="descript" placeholder="Description" class="form-control"></textarea>
<span class="help-block"></span>
</div>
</div>
</form>
<div class="form-group">
<div class="col-md-12">
<!--Add Dropzone here-->
<div id="disb_drop" class="dropzone"></div>
<div id="receipt"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Mein JS
Dropzone.autoDiscover = false;
//some code for datatable...
function edit_disburs(id)
{
save_method = 'update';
//reset_form
function dist_cal(){ //some code
}
function calVAT(){ // some code
}
function getReceipt(fileID){
var myDropzone = new Dropzone('div#disb_drop',{
url : "<?php echo site_url("disburs/upload"); ?>",
acceptedFiles: "image/*",
addRemoveLinks: true,
dictDefaultMessage: "Drop files here to upload or Click here",
enqueueForUpload: true,
},
function(){
var self = this;
$.getJSON("<?php echo site_url("disburs/list_files") ?>/" + fileID, function(data){
if(data.length > 0){
console.log(data)
$.each(data, function(key,value) {
alert(console.log("index", key, "value", value));
var mockFile = { name: value.name, size: value.size };
self.emit("addedfile", mockFile);
self.emit("thumbnail", mockFile, "<?php echo base_url()."upload_disbursments/"; ?>" + value.name);
self.createThumbnailFromUrl(mockFile, "<?php echo base_url()."upload_disbursments/"; ?>" + value.name);
self.emit("complete", mockFile);
});
}
});
});
}
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('disburs/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
getReceipt(data.receipt);
//some code to assign data to inputs
}
$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit Disbursement'); // Set title to Bootstrap modal title
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Please select an entry to edit');
}
});
}
danke für Ihre Hilfe. Es funktionierte. Jetzt müssen Sie nur herausfinden, wie Sie es codieren, damit es die Datei bereits auf dem System zeigt. –
jede Idee, wie ich die Funktion get() oder getJSON() aufrufen könnte, um die vorhandenen Dateien auf dem Server abzurufen, benutze 'Dropzone.options.myAwesomeDropzone = {..}' –