Bootstrap模态主体:Json在上传Codeigniter后刷新
Bootstrap Modal-Body: Json Refresh After Upload Codeigniter
我有一个Bootstrap Modal弹出窗口,我使用json来调用控制器函数,以便在codeigniter中上传。
一旦显示成功警报,我希望它只刷新内部模型主体,以便显示新上传的文件。
目前我必须刷新整个页面才能查看上传的文件。
问题在json警报成功完全上传后,我如何让它只刷新内部引导模式主体。
Json/Java脚本
<script type="text/javascript"><!--
$('#button-upload').on('click', function() {
$('#form-upload').remove();
$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" value="" /></form>');
$('#form-upload input[name=''file'']').trigger('click');
timer = setInterval(function() {
if ($('#form-upload input[name=''file'']').val() != '') {
clearInterval(timer);
$.ajax({
url: 'admin/common/filemanager/upload',
type: 'post',
dataType: 'json',
data: new FormData($('#form-upload')[0]),
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
$('#button-upload i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
$('#button-upload').prop('disabled', true);
},
complete: function() {
$('#button-upload i').replaceWith('<i class="fa fa-upload"></i>');
$('#button-upload').prop('disabled', false);
},
success: function(json) {
if (json['error']) {
alert(json['error']);
}
if (json['success']) {
alert(json['success']);
$('#button-refresh').trigger('click');
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "'r'n" + xhr.statusText + "'r'n" + xhr.responseText);
}
});
}
}, 500);
});
</script>
引导模式
<div class="container" style="margin-top: 3%;">
<div class="row">
<div class="col-lg-offset-1 col-lg-10 ">
<div class="modal-content">
<div class="modal-header clearfix">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close ×</button>
<h4 class="modal-title">File Manager</h4>
</div>
<div class="modal-body">
<?php echo $resize_error;?>
<div class="row">
<div class="col-sm-5">
<button type="button" data-toggle="tooltip" title="Upload" id="button-upload" class="btn btn-primary"><i class="fa fa-upload"></i> Select A File</button>
</div>
</div>
<hr />
<?php foreach (array_chunk($images, 4) as $image) { ?>
<div class="row">
<?php foreach ($image as $image) { ?>
<div class="col-sm-3 text-center">
<?php if ($image['type'] == 'directory') { ?>
<div class="text-center"><a href="<?php echo $image['href']; ?>" class="directory" style="vertical-align: middle;"><i class="fa fa-folder fa-5x"></i></a></div>
<label>
<input type="checkbox" name="path[]" value="<?php echo $image['path']; ?>" />
<?php echo $image['name']; ?></label>
<?php } ?>
<?php if ($image['type'] == 'image') { ?>
<a href="<?php echo $image['href']; ?>" class="thumbnail"><img src="<?php echo $image['thumb']; ?>" alt="<?php echo $image['name']; ?>" title="<?php echo $image['name']; ?>" /></a>
<label>
<input type="checkbox" name="path[]" value="<?php echo $image['path']; ?>" />
<?php echo $image['name']; ?></label>
<?php } ?>
</div>
<?php } ?>
</div>
<br />
<?php } ?>
</div>
<div class="modal-footer"><?php var_dump($paginations);?>::<?php echo $paginations; ?></div>
</div><!-- /.modal-content -->
</div>
</div>
</div>
你可以这样做:
...
success: function(json) {
...
if (json['success']) {
$('.modal-body').html('Success! ' + json['success']);
}
},
....
感谢@Rudi给了我一个主意,我解决了自己的问题,我所做的是在我的文件管理器控制器中使用代码点火器,我添加了具有网站url的数据,即$data['refresh'] = site_url('admin/common/filemanager');
然后在我的json/javascript代码上,我添加了
<script>
$('#button-refresh').on('click', function(e) {
e.preventDefault();
$('#modal-image').load($(this).attr('href'));
});
</scrip>
然后在添加成功之后,我添加了一个触发器。
success: function(json) {
if (json['error']) {
alert(json['error']);
}
if (json['success']) {
alert(json['success']);
$('#button-refresh').trigger('click');
}
},
完整
<div class="container" style="margin-top: 3%;">
<div class="row">
<div class="col-lg-offset-1 col-lg-10 ">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header clearfix">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">Close ×</button>
<h4 class="modal-title">File Manager</h4>
</div>
<div class="modal-body">
<?php echo $resize_error;?>
<div class="row">
<div class="col-sm-5">
<button type="button" data-toggle="tooltip" title="Upload" id="button-upload" class="btn btn-primary"><i class="fa fa-upload"></i> Select A File</button>
<a href="<?php echo $refresh; ?>" id="button-refresh" class="btn btn-default"><i class="fa fa-refresh"></i> Refresh</a>
</div>
</div>
<hr />
<?php foreach (array_chunk($images, 4) as $image) { ?>
<div class="row">
<?php foreach ($image as $image) { ?>
<div class="col-sm-3 text-center">
<?php if ($image['type'] == 'image') { ?>
<a href="<?php echo $image['href']; ?>" class="thumbnail"><img src="<?php echo $image['thumb']; ?>" alt="<?php echo $image['name']; ?>" title="<?php echo $image['name']; ?>" /></a>
<label>
<input type="checkbox" name="path[]" value="<?php echo $image['path']; ?>" />
<?php echo $image['name']; ?></label>
<?php } ?>
</div>
<?php } ?>
</div>
<br />
<?php } ?>
</div>
<div class="modal-footer"><?php var_dump($paginations);?>::<?php echo $paginations; ?></div>
</div><!-- /.modal-content -->
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('a.thumbnail').on('click', function(e) {
e.preventDefault();
<?php if ($element) { ?>
$('#<?php echo $element; ?>').find('img').attr('src', $(this).find('img').attr('src'));
<?php } ?>
<?php if ($target) { ?>
$('#<?php echo $target; ?>').attr('value', $(this).parent().find('input').attr('value'));
<?php } else { ?>
var range, sel = document.getSelection();
if (sel.rangeCount) {
var img = document.createElement('img');
img.src = $(this).attr('href');
range = sel.getRangeAt(0);
range.insertNode(img);
}
<?php } ?>
$('#modal-image').modal('hide');
});
$('#button-refresh').on('click', function(e) {
e.preventDefault();
$('#modal-image').load($(this).attr('href'));
});
</script>
<script type="text/javascript"><!--
$('#button-upload').on('click', function() {
$('#form-upload').remove();
$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" value="" /></form>');
$('#form-upload input[name=''file'']').trigger('click');
timer = setInterval(function() {
if ($('#form-upload input[name=''file'']').val() != '') {
clearInterval(timer);
$.ajax({
url: 'admin/common/filemanager/upload',
type: 'post',
dataType: 'json',
data: new FormData($('#form-upload')[0]),
cache: false,
contentType: false,
processData: false,
beforeSend: function() {
$('#button-upload i').replaceWith('<i class="fa fa-circle-o-notch fa-spin"></i>');
$('#button-upload').prop('disabled', true);
},
complete: function() {
$('#button-upload i').replaceWith('<i class="fa fa-upload"></i>');
$('#button-upload').prop('disabled', false);
},
success: function(json) {
if (json['error']) {
alert(json['error']);
}
if (json['success']) {
alert(json['success']);
$('#button-refresh').trigger('click');
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(thrownError + "'r'n" + xhr.statusText + "'r'n" + xhr.responseText);
}
});
}
}, 500);
});
</script>
我的控制器
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
error_reporting(0);
class Filemanager extends MX_Controller {
public function __construct() {
parent::__construct();
}
public function index() {
$scan_filter = $this->input->get('filter_name');
$element = $this->input->get('element');
//target
$input = $this->input->get('input');
if (isset($scan_filter)) {
$filter_name = rtrim(str_replace(array('../', '..''', '..', '*'), '', $scan_filter), '/');
} else {
$filter_name = null;
}
$directory = FCPATH . 'image/catalog/';
$request_page = $this->input->get('page');
if (isset($request_page)) {
$page = $request_page;
} else {
$page = 1;
}
$data['images'] = array();
// Get directories
$directories = glob($directory . '/' . $filter_name . '*', GLOB_ONLYDIR);
$directories = glob($directory);
if (!$directories) {
$directories = array();
}
// Get files
$files = glob($directory . '/' . $filter_name . '*.{jpg,jpeg,png,gif,JPG,JPEG,PNG,GIF}', GLOB_BRACE);
if (!$files) {
$files = array();
}
// Merge directories and files
$images = array_merge($directories, $files);
// Get total number of files and directories
$image_total = count($images);
// Split the array based on current page number and max number of items per page of 10
$images = array_splice($images, ($page - 1) * 9, 9);
$server = base_url();
foreach ($images as $image) {
$name = str_split(basename($image), 14);
$config['image_library'] = 'gd2';
$config['source_image'] = FCPATH . 'image/catalog/'. implode($name);
$config['create_thumb'] = FALSE;
$config['maintain_ratio'] = FALSE;
$config['width'] = 100;
$config['height'] = 100;
$config['new_image'] = FCPATH . 'image/cache/'.implode($name);
$created_thumb = base_url() . 'image/cache/'.implode($name);
$this->load->library('image_lib', $config);
$this->image_lib->initialize($config);
if (!$this->image_lib->resize()) {
$data['resize_error'] = $this->image_lib->display_errors('<div class="alert alert-danger">', '</div>');
} else {
// No Resize Errors
$data['resize_error'] = '';
if (is_dir($image)) {
$data['images'][] = array(
'thumb' => '',
'name' => implode(' ', $name),
'type' => 'directory',
'path' => utf8_substr($image, utf8_strlen(FCPATH . 'image/catalog/')),
'href' => $server . 'image/catalog/' . utf8_substr($image, utf8_strlen(FCPATH . 'image/catalog/')),
);
} elseif (is_file($image)) {
$server = base_url();
$data['images'][] = array(
'thumb' => $created_thumb,
'name' => implode(' ', $name),
'type' => 'image',
'path' => utf8_substr($image, utf8_strlen(FCPATH . 'image/catalog/')),
'href' => $server . 'image/catalog/' . utf8_substr($image, utf8_strlen(FCPATH . 'image/catalog/'))
);
}
}
}
$data['refresh'] = site_url('admin/common/filemanager');
if ($element) {
$data['element'] = $element;
}
if ($input) {
$data['target'] = $input;
}
$this->load->library('paginations');
$paginations = new Paginations();
$paginations->total = $image_total;
$paginations->page = $page;
$paginations->limit = 16;
if ($this->uri->segment(5)) {
$paginations->url = site_url('admin/common/filemanager/update'.'/'.$this->uri->segment(5).'/'.'{page}');
} else {
$paginations->url = site_url('admin/common/filemanager/add'.'/'.'{page}');
}
$data['paginations'] = $paginations->render();
return $this->load->view('template/common/filemanager', $data);
}
public function upload() {
$json = array();
$config['upload_path'] = './image/catalog/';
$config['allowed_types'] = 'gif|jpg|png';
$config['max_size'] = '100';
$config['max_width'] = '0';
$config['max_height'] = '0';
$this->load->library('upload', $config);
// Alternately you can set preferences by calling the ``initialize()`` method. Useful if you auto-load the class:
$this->upload->initialize($config);
$name = "file";
if (!$this->upload->do_upload($name)) {
$json['error'] = $this->upload->display_errors('<div class="alert alert-danger"', '</div>');
} else {
$json['success'] = '<div class="alert alert-success">Success</div>';
}
$this->output->set_content_type('Content-Type: application/json');
$this->output->set_output(json_encode($json));
}
}
相关文章:
- 强制模板刷新ember.js
- 如何通过ajax刷新JSF填充的javascript变量
- 如何解决Yii中的页面刷新问题
- Jquery提交表单而不刷新
- 刷新页面后会出现警报
- 刷新后保留对网页的更改
- 如何在不刷新页面的情况下更新显示框
- 重定向时角度刷新浏览器
- 如何防止jQueryonclick事件中的Ruby方法在页面刷新时执行
- Javascript,输出结果后页面不断刷新
- $(document).height()在刷新时随机化值(Safari 5.1.10)
- 刷新父窗口后无法关闭窗口
- 刷新页面时hasClass不起作用
- Bootstrap模态主体:Json在上传Codeigniter后刷新
- 使用 Codeigniter 3 关闭警报 javascript 而不刷新页面
- CodeIgniter:如何创建不刷新的菜单
- 通过ajax更新数据库,而不刷新页面codeigniter
- 添加帖子并在不刷新页面的情况下显示Codeigniter
- Codeigniter:使用jQueryajax提交表单数据,无需刷新页面
- Codeigniter:如何在不刷新的情况下将数组从控制器传递到视图