文件輸入的引導模態問題

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