Dropzone无法通过Ajax进行模态显示

Question

Dropzone和Javascript无法在Bootstrap Modal上运行，因为我要通过ajax调用Modal，因为我有数百条记录，所以我不想将Modal放在foreach中，所以我在按钮单击控制器方法的命中使用了ajax并返回了一个新视图，我正在调用的视图和将显示模式的主视图。 模态工作正常，但我使用了dropzone插件，该插件无法正常工作，甚至其他js代码也无法正常工作。

MainView.blade.php打开”按钮上，单击下面的脚本，将其称为我调用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">&times;</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);

编辑产品引导，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 Modal ，Bootstrap Modal无法正常工作

Answer 1

检查您是否已经禁用autoDiscvoer为dropzone.js上Dropzone.autoDiscover如果假将其值设置为true （ Dropzone.autoDiscover = true; ）。

如果那也行不通，请尝试通过将其附加到模型来手动初始化放置区。

   myDropDown = new Dropzone('#product_details', {<options>})

Answer 2

我对模态有一个类似的问题，当我单击它时，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事件上启动日期选择器， 如下所示 ：

$('#myModal').on('show.bs.modal', function (e) {
  if (!data) return e.preventDefault() // stops modal from being shown
})

希望这些解决方案都能解决您的问题。 祝好运。