0
jquery dropzone.jsを使用しています。フォームをロードするには、私はmustacheを以下のように使っています。しかし、その瞬間にフォームがロードされていないため、ページが完全にロードされた後にドロップゾーンに入ることはできません。それがロードされた後に、dropzoneを初期化するオプションはありますか?フォームでフォームをロードした後にdropzoneを初期化します。
口ひげファイル:
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Dropzone Area</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#">Config option 1</a>
</li>
<li><a href="#">Config option 2</a>
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<form id="my-awesome-dropzone" class="dropzone" action="#">
<div class="dropzone-previews"></div>
<button type="submit" class="btn btn-primary pull-right">Submit this form!</button>
</form>
<div>
<div class="m text-right"><small>DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews: <a href="https://github.com/enyo/dropzone" target="_blank">https://github.com/enyo/dropzone</a></small> </div>
</div>
</div>
</div>
</div>
機能は口ひげをロードし、ドロップゾーンを初期化するには:
<script>
$(document).ready(function() {
// get the mustache
loadDropZone();
// HOW CAN I DO THIS AFTER THE DROPZONE FORM IS CREATED?
// init dropzone
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
// Dropzone settings
init: function() {
var myDropzone = this;
this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("sendingmultiple", function() {
});
this.on("successmultiple", function (files, response) {
});
this.on("errormultiple", function (files, response) {
});
}
}
});
function loadDropZone() {
$.get(websiteUrl + 'storages/mustache/image-drop-zone.mst', function(template) {
Mustache.parse(template); // speeds up future uses
var rendered = Mustache.render(template);
$('#block-container').append(rendered);
});
}
</script>
:
は次のようになります。私がこのエラーを詳しく見てみると、フォームが見つからないということです。奇妙なことは、if($( "#my-awesome-dropzone")){{// log something} 'を使ってdivが存在するかどうかを確認すると、実際に存在するということです。 – CodeWhisperer
問題が見つかりました。私はdropzoneを別のフォームの中に置いたので、このエラーが発生しました。 – CodeWhisperer