javascript - Dropzone 无法通过 ajax 进行模态显示

Question

Dropzone 和 Javascript 在 bootstrap Modal 上不起作用，我通过 ajax 调用 Modal。因为我有数百条记录，我不想将 Modal 放在 foreach 中，所以我在按钮单击 Controller 方法命中时使用了 ajax 并返回新 View 和我正在调用的 View 以及将显示模式的主视图。 Modal 工作正常，但我使用了 dropzone 插件，该插件不起作用，甚至没有其他 js 代码也不起作用。

MainView.blade.php在按钮上单击以下脚本命中这是我调用 Bootstrap Modal 的主要 View

<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>

Controller

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);

编辑产品-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 不起作用

Answer 1

检查您是否已在 Dropzone.autoDiscover 上禁用 dropzone.js 的 autoDiscvoer如果其值为 false，则将其值设置为 true (Dropzone.autoDiscover = true;)。

如果这也不起作用，请尝试通过将拖放区附加到模型来手动初始化拖放区。

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