Dropzone 无法通过 ajax 进行模态显示
Posted
技术标签:
【中文标题】Dropzone 无法通过 ajax 进行模态显示【英文标题】：Dropzone isn't working on Modal Showing through ajax 【发布时间】：2019-12-31 13:15:15 【问题描述】：Dropzone 和 javascript 无法在引导模式上运行新视图和我正在调用的视图以及将显示模态的主视图。 Modal 工作正常，但我使用了 dropzone 插件，该插件无法正常工作，甚至没有其他 js 代码也无法使用 css。
MainView.blade.php
On button 点击以下脚本点击
这是我调用 Bootstrap Modal 的主要视图
<div class="modal" id="Edit-SpecsModal-products">
<div class="modal-dialog modal-max ">
<div class="modal-content">
<!-- Modal Header -->
<!-- Modal body -->
<div class="modal-body text-center">
<span class="f-24 black bold">Edit Product</span>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body p0">
<div class="product_details" id="product_details"></div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn-bg2" data-dismiss="modal">Cancel</button>
<input type="button" class="btn-bg1" data-dismiss="modal" onclick="submitForms()">Add to Project</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function()
$('.edit_product_model').click(function()
var product_id = $(this).attr("id");
$.ajax(
url:"url('architecture-edit-product')/" + product_id ,
method:"post",
headers:
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
,
data:product_id:product_id,
success:function(data)
$('#product_details').html(data.html);
$('#Edit-SpecsModal-products').modal("show");
);
);
);
</script>
控制器
public function editArchitectureProductSave(Request $request, $id)
$data['products'] = Product::with('productImages')->where('id',$id)->get();
$returnHTML = view('manufacturer::projects.includes.ajaxhtmlviews.edit-product-Bootstrap-modal', $data)->render();
return response()->json( ['html'=> $returnHTML], 200);
edit-product-Bootstrap-modal.blade.php
<div class="max-wid">
<div class="pl-3 pr-3 mb-5 p0">
<div class="">
<div class=" f-column in">
<div class="">
<ul class="nav nav-tabs nav-border-producttab">
<li class="nav-item ">
<a class="nav-link active" data-toggle="tab" href="#add_new_products2">Add New Product</a>
</li>
</ul>
</div>
<div class="">
<div >
<div class=" mt-3">
<!-- Nav tabs -->
<!-- Tab panes -->
<div class="tab-content model-hit">
<div id="add_new_products2" class="container tab-pane active">
<br>
<div class=" row">
<div class="col-sm-6">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">
Product Documents
<div class="clearfix"></div>
<div class="gry f-13">(Specs, CHPS Certificate, Product Data Sheet)</div>
</div>
<div class="my-form1 text-center" id="my-for2">
<?php echo Form::open(array('route' => 'architecture-product-file-save', 'files' => true, 'method' => 'PUT', 'id' => 'product-file-form', 'class' => 'dropzone', 'name' => 'formName')); ?>
<input type="hidden" name="last_product_inserted_id" id="last_product_inserted_id" value="">
<div class="col-sm-12 p-0 mrg_modal_produt">
<div id="preview-template" style="display: none;">
<div class="dz-preview dz-file-preview" style="width: 20% ;">
<div class="dz-image"><img data-dz-thumbnail /></div>
<div class="dz-details">
<div class="dz-size"><span data-dz-size></span></div>
<div class="dz-filename"><span data-dz-name></span></div>
</div>
<div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
<div class="dz-error-message"><span data-dz-errormessage></span></div>
<div class="dz-file-type">
<br />
<select name="file_type" class="dz-file-type-select" id="file_type">
<option value="">Select File Type</option>
<option value="datasheet_file">Datasheet</option>
<option value="cad_file">CAD file</option>
<option value="bim_file">BIM file</option>
<option value="leed_file">LEED Statement</option>
</select>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="col-sm-12 p-0 mrg_modal_produt">
<div class="col-sm-12 p-0 label_modal_product">Product Images</div>
<div class="my-form1 text-center" id="my-for3">
<input form="product-form" id="file-input" name="product_images[]" type="file" multiple>
<div id="preview"></div>
</div>
</div>
</div>
<div class="col-sm-6">
<?php echo Form::open(array('route' => 'architecture-product-save', 'files' => true, 'id' => 'product-form')) ?>
<input type="hidden" name="method_type" value="PUT">
<input type="hidden" name="id" value="$products['0']->id">
<div class="col-sm-12 p-0 mrg_modal_produt">
<input name="name" type="text" class="form-control input_product_modal" value="$products['0']->name">
<input name="" type="text" class="form-control input_product_modal" value="Manufacturer Name">
<input type="hidden" name="project_slug" value="Request::segment(2)">
<textarea name="description" class="form-control input_product_modal" cols="" rows="">$products['0']->description</textarea>
<input name="leed_file_url" type="text" class="form-control input_product_modal" value="$products['0']->leed_file_url">
</div>
<div id="product_images_div"></div>
<input type="submit" class="btn btn-info" value="Save" id="save-product-form-submit" style="display:hidden;">
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
代码运行良好，模态正在调用，但问题仅是当通过 mainView.blade.php 中使用的脚本调用来自 edit-product-Bootstrap-modal.blade.php 的模态时，Bootstrap Modal 不起作用
【问题讨论】：
【参考方案1】：检查您是否在 Dropzone.autoDiscover 上为 dropzone.js 禁用了 autoDiscvoer
如果其为 false，则将其值设置为 true (Dropzone.autoDiscover = true;)。
如果这也不起作用，请尝试通过将 dropzone 附加到模型来手动初始化它。
myDropDown = new Dropzone('#product_details', <options>)
【讨论】：
【参考方案2】：我在使用 modals 时遇到了类似的问题，我的 datepicker.js 输入字段在我单击它时不起作用，但 id 没有显示任何错误。我做了一些挖掘，显然，模态不会正确加载您的视图（或任何地方）中定义的脚本。我设法做到了这一点，通过再次初始化相同的脚本，但使用另一个名称，在我的app.js 中，如下所示：
$(document).ready(function ()
$('.datepickerCustom').datepicker(
//datepicker logic
).on('changeDate', function (e)
$(this).parent().find('.datePickerInput').val(e);
);
);
再次编译我的视图（webpack）后，日期选择器工作正常。还有另一种解决方案。似乎有时js 脚本“隐藏”在模态后面，因此您需要将其z-index 设置为模态的z-index，即1050。这可以在您的模态视图中完成：
<style>
.datepicker
z-index: 1600 !important; /* has to be larger than 1050 */
</style>
如果这仍然不起作用，实际上还有一个解决方案，您需要在 Modal shown event 上启动日期选择器，如下所示：
$('#myModal').on('show.bs.modal', function (e)
if (!data) return e.preventDefault() // stops modal from being shown
)
希望这些解决方案中的任何一个都可以解决您的问题。祝你好运。
【讨论】：
谢谢，但您的解决方案甚至对我都不起作用，您也没有正确阅读我的问题。以上是关于Dropzone 无法通过 ajax 进行模态显示的主要内容，如果未能解决你的问题，请参考以下文章
Laravel 将数据从 ajax 传递到位于单独文件中的模态视图，导致模态视图无法呈现