文件输入的引导模态问题

Question

我有一个关于引导模态的真正有趣的问题，让我们从头开始。

我有一个清单清单-具有可以预订，编辑，查看和删除的功能。 看图片

我的所有功能都可以正常工作，除了编辑，编辑的问题是我只能在刷新页面之前编辑一个项目。 如果我在第一行上单击“编辑”，则该显示的图像将用于以后的任何编辑-如果我单击“ 2行”或“ 3行”编辑，则会得到第一张图像-请参阅弹出图像

这是调用模式弹出窗口的javascript，您可以看到我首先清除了表单-进行Ajax调用以获取该按钮的数据。 我只对无法显示项目的实际图像有问题。

//
//  Edit the inventory
//

function edit_inventory(id)
{
   save_method = 'update';
   $('#form')[0].reset(); // reset form on modals
   $('.form-group').removeClass('has-error'); // clear error class
   $('.help-block').empty(); // clear error string
   $('[name="image_name]').empty();

   //Ajax Load data from ajax
   $.ajax({
      url : "<?php echo site_url('warehouse/inventory/ajax_edit/')?>/" + id,
      type: "GET",
      dataType: "JSON",
      success: function(data)
      {
        var previewimage =  data.image_name;
        $('[name="image_name]').val(data.image_name);
        $('[name="id"]').val(data.id);
        $('[name="user_id"]').val(data.user_id);
        $('[name="name"]').val(data.name);
        $('[name="description"]').val(data.description);
        $('[name="type_id"]').val(data.type_id);
        $('[name="certifications_id"]').val(data.certifications_id);
        $('[name="condition_id"]').val(data.condition_id);
        $('[name="location_id"]').val(data.location_id);
        $('[name="location_in_warehouse"]').val(data.location_in_warehouse);
        $('[name="quantity_id"]').val(data.quantity_id);
        $('[name="size_id"]').val(data.size_id);
        $('[name="skills_required_id"]').val(data.skills_required_id);
        $('[name="use_id"]').val(data.use_id);
        $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
        $('.modal-title').text('Edit Inventory'); // Set title to Bootstrap modal title

        $("#image_name").fileinput({
            uploadUrl: "<?php echo site_url('warehouse/inventory/ajax_fileupload')?>",
            deleteUrl: "<?php echo site_url('warehouse/inventory/ajax_deletefile')?>",
            showUpload: true,
            uploadAsync: true,
            // your upload server url
            allowedFileExtensions : ['jpg', 'jpeg', 'png','gif'],
            overwriteInitial: false,
            maxFileSize: 1000,
            minFileCount: 1,
            maxFileCount: 5,
            maxFilesNum: 10,
            initialPreview: [
            // IMAGE DATA
                "<?php echo site_url('assets/uploads/')?>/" + previewimage,
            ],
            initialPreviewAsData: true, // identify if you are sending preview data only and not the raw markup
            initialPreviewFileType: 'image', // image is the default and can be overridden in config below
            initialPreviewConfig: [
                {caption: previewimage, size: 576237, width: "120px", url: "warehouse/inventory/ajax_fileupload", key: 1},
            ],

            layoutTemplates: {
                main1: "{preview}\n" +
                "<div class=\'input-group {class}\'>\n" +
                "   <div class=\'input-group-btn\'>\n" +
                "       {browse}\n" +
                "       {upload}\n" +
                "       {remove}\n" +
                "   </div>\n" +
                "   {caption}\n" +
                "</div>"
            }
        }); 

     },
    error: function (jqXHR, textStatus, errorThrown)
    {
        alert('Error get data from ajax');
    }
  });   
}

对于我选择编辑的每个项目，每次在其中设置新的图像名称时，我都会调用后端以从数据库中获取最新图像。

var previewimage =  data.image_name; 

对于文件输入，我正在使用krajee bootstrap fileinput库，因为我需要上传图像。 http://plugins.krajee.com/file-input/demo

您可以期望通过将新的Previewimage变量添加到

        initialPreview: [
        // IMAGE DATA
            "<?php echo site_url('assets/uploads/')?>/" + previewimage,
        ],

它将显示不同的图像-以某种方式，第一次编辑单击完成后，图像保留在模态中并且未被清除。

我已经尝试了几种方法来清除模式，例如

     $('#image_name').val('');

    $('form').find('input[type=file]').val('');

没有任何效果，似乎我没有得到正确的元素来清除，或者krajee bootstrap文件输入中的某些内容未正确清除。

这是我的模态代码

<!-- Bootstrap modal -->
<div class="modal fade" id="modal_form" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h3 class="modal-title">Inventory Form</h3>
        </div>
        <div class="modal-body form">
            <form action="#" id="form" class="form-horizontal" role="form" data-toggle="validator">
                <input type="hidden" value="" name="id"/>

                <div class="form-body">
                    <div class="form-group">
                        <label class="control-label">Select File</label>
                        <div class="col-md-9">
                            <input id="image_name" name="image_name[]" type="file" multiple class="file-loading">
                            <span class="help-block"></span>
                        </div>
                    </div>                       
                    <div class="form-group">
                        <label class="control-label col-md-3">Name</label>
                        <div class="col-md-9">
                            <input name="name" placeholder="Item Name" class="form-control" type="text" data-validate="true" data-error="Required Field" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Description</label>
                        <div class="col-md-9">
                            <input name="description" placeholder="Give a Description" class="form-control" type="text" data-validate="true"  data-error="Required Field" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Location in Warehouse</label>
                        <div class="col-md-9">
                            <input name="location_in_warehouse" placeholder="Give details on were to find in Warehouse" class="form-control" type="text" data-validate="true" data-error="Required Field" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label class="control-label col-md-3">Type</label>
                        <div class="col-md-9">
                            <select id="types" name="type_id" class="form-control">
                            </select>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Usage</label>
                        <div class="col-md-9">
                            <select id="usages" name="use_id" class="form-control">
                            </select>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Skills Required</label>
                        <div class="col-md-9">
                            <select id="skills" name="skills_required_id" class="form-control">
                            </select>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Certifications</label>
                        <div class="col-md-9">
                            <select id="certificates" name="certifications_id" class="form-control">
                            </select>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Location</label>
                        <div class="col-md-9">
                            <select id="locations" name="location_id" class="form-control">
                            </select>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Quantity</label>
                        <div class="col-md-9">
                            <input name="quantity_id" placeholder="Quantity" class="form-control" type="number" data-validate="true" data-error="Only numbers allowed" required>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Condition</label>
                        <div class="col-md-9">
                            <select id="conditions" name="condition_id" class="form-control">
                            </select>
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-md-3">Item Size</label>
                        <div class="col-md-9">
                            <input name="size_id" placeholder="Enter a size of the item" class="form-control" type="text">
                            <div class="help-block with-errors"></div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="submit" id="btnSave" onclick="save()" class="btn btn-primary">Save</button>
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Cancel</button>
                </div>
            </form>
        </div>

     </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

感谢您为解决此问题提供的帮助或建议。

---

这是服务器端代码：

switch ($inventory->status) {
  case '0':
    $row[] = '<img alt="sign in" src="' . base_url() . 'assets/uploads/warehousein.png">';
    $row[] = '<a class="btn btn-sm btn-primary" href="javascript:void(0)" title="Book" onclick="book_inventory('."'".$inventory->id."'".')"><i class="glyphicon glyphicon-check"></i> Book</a>
              <a class="btn btn-sm btn-success" href="javascript:void(0)" title="Edit" onclick="edit_inventory('."'".$inventory->id."'".')"><i class="glyphicon glyphicon-pencil"></i> Edit</a>
              <a class="btn btn-sm btn-info" href="javascript:void(0)" title="View" onclick="view_inventory('."'".$inventory->id."'".')"><i class="glyphicon glyphicon-list-alt"></i> View</a>
              <a class="btn btn-sm btn-danger" href="javascript:void(0)" title="delete" onclick="delete_inventory('."'".$inventory->id."'".')"><i class="glyphicon glyphicon-trash"></i> Delete</a>';
  break;

如您所见，我在按钮中添加了inventory->id 。

Answer 1

只需在声明文件输入之前将此代码放在第一位

$('#selector').fileinput('destroy');