[英]Javascript dosn't work in bootstrap modal
我一直在努力解決有趣的錯誤。 我的Javascript代碼無法在引導模式下工作。
我正在使用"Dropzone.js"
文件上傳系統。 問題就在那里:它加載dropzone.js,但不加載我的自定義js,更改dropzone.js輸入字段位於許多模式之一。
我試過是否將輸入字段放在非模態的任何其他位置,它會加載我的自定義腳本,但是當它處於模態時,它不會加載。
添加腳本:
<link href="../Style/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../Style/vendors/dropzone/dist/min/dropzone.min.css" rel="stylesheet">
<script src="../Style/vendors/pnotify/dist/pnotify.nonblock.js"></script>
<script src="../Style/vendors/dropzone/dist/min/dropzone.min.js"></script>
<script>
$('#image_upload_panel').on('shown', function() {
Dropzone.options.uploadWidget = {
autoProcessQueue: false,
maxFilesize: 10,
maxFiles: 1,
addRemoveLinks: true,
dictResponseError: 'Server not Configured',
acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
init:function(){
var self = this;
// config
self.options.addRemoveLinks = true;
self.options.dictRemoveFile = "Delete";
//New file added
self.on("addedfile", function (file) {
console.log('new file added ', file);
});
// Send file starts
self.on("sending", function (file) {
console.log('upload started', file);
$('.meter').show();
});
// File upload Progress
self.on("totaluploadprogress", function (progress) {
console.log("progress ", progress);
$('.roller').width(progress + '%');
});
self.on("queuecomplete", function (progress) {
$('.meter').delay(999).slideUp(999);
});
// On removing file
self.on("removedfile", function (file) {
console.log(file);
});
}
};
});
</script>
打開模式按鈕:
<a id="post_upload" class="post_upload" style="float:right; margin-top:-20px;" href="#" data-toggle="modal" data-target=".image_upload"><button type="submit" name="btn-upload" id="btn-upload" class="btn btn-danger ">Upload Image</button></a>
和模式:
<!-- Image Upload -->
<div class="modal fade image_upload" id="image_upload_panel" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form class="dropzone" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" id="uploadWidget">
<b><center><div class="modal-header">Upload Post</div></center></b>
<center><input type="text" name="title" style="margin-top:20px; width:60%; height:35px; text-align:center;" placeholder="Here goes title!" /></center>
<hr>
<div class="dz-message" data-dz-message><span>Drop or select your file!</span></div>
<div class="modal-footer"><button type="submit" id="uploadPostForm" name="uploadPostForm" class="btn btn-primary ">Upload</button></div>
</form>
</div>
</div>
</div>
<!-- END OF Image Upload -->
我等不及您對我的問題的回答,問這是否是bootstrap 4 。 我要在幾分鍾后離開,希望這能解決您的問題。 如果沒有,請告訴我,我會解決的。 參見代碼中的注釋,但是我可以正常工作,並且正在應用本地配置:
$(document).ready(function(){
// The bootstrap 4 modal event is "shown.bs.modal", not just "shown"
$(document).on('shown.bs.modal', '#image_upload_panel', function() {
// I am using the jQuery method of creating the dropzone.
// Using #uploadWidget here would not work for me.
$("#image_upload_panel").dropzone({
url: '/kookoopapa'
});
});
// I'm automating the opening of the modal on page load,
// then selecting a file. A 404 page not found error verifies
// that the local config is being applied to the dropzone.
$('#image_upload_panel').modal();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.