我有一个真正有趣的问题,一个bootstrap模式,让我们从头开始。
我有一个清单列表 - 您可以预订,编辑,查看和删除该功能。见图片
我的所有功能除编辑外都有效,我编辑的问题是我只能在页面刷新前编辑一个项目。如果我在第一行上单击编辑,则显示的图像用于任何后续编辑 - 如果我单击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">×</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
添加到按钮。
答案 0 :(得分:0)
在声明文件输入之前,只需将这段代码放在首位即可
$('#selector').fileinput('destroy');