ブートストラップfileinputでのモーダル問題

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ブートストラップfileinputライブラリを使用しています。 http://plugins.krajee.com/file-input/demo

あなたはそれが別の画像を表示します

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

に新しいpreviewimage変数を追加することによって期待される - 何とかそのイメージを行わ最初の編集をクリックし、モーダルに常駐し、クリアされません。

私はモーダルをクリアするためにいくつかのことを試みました。

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

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

何も、私がクリアするために右の要素が届かないか、正しくクリアされませんkrajeeブートストラップファイル入力に何かがあると思われ、機能しません。

これは私がこの問題を解決するために任意のヘルプや提案を感謝し、私のモーダル

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

ためのコードです。ここ

Answer 1

は、サーバー側のコードです：

 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