please help me. I'm making an application using codeigniter and ajax, when uploading a photo successfully. But when I click edit button, the photo doesn't appear in the bootstrap modal to be updated.
Here some code, I use the datatable server side. User_model.php
public function get_by_id($id)
{
$this->db->from($this->table);
$this->db->where('user_id',$id);
$query = $this->db->get();
return $query->row();
}
User.php (controller)
public function ajax_edit($id)
{
$data = $this->User_model->get_by_id($id);
echo json_encode($data);
}
user.php (view using modal bootstrap)
<div class="modal fade" id="modal_form" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Tambah Pengguna</h3>
</div>
<form action="#" id="form" class="form-horizontal" >
<input type="hidden" value="" name="id"/>
<div class="modal-body">
<div class="form-group">
<label class="control-label col-xs-3" >Username <font color="red>">*</font></label>
<div class="col-xs-9">
<input name="userNm" class="form-control" type="text" placeholder="" style="width:335px;"required>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" >Nama Pengguna <font color="red>">*</font></label>
<div class="col-xs-9">
<input name="nama" class="form-control" type="text" placeholder="" style="width:335px;" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" >Email <font color="red>">*</font></label>
<div class="col-xs-9">
<input name="email" class="form-control" type="text" placeholder="" style="width:335px;" required>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-3" >Upload Foto <font color="red>">*</font></label>
<div class="col-xs-9">
<input type="file" name="fupload" required/>
</div>
</div>
<div id="preview" style="display:none";>
</div>
<div><br></div>
<font color="red">*</font> : kolom wajib di isi.
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Batal</button>
<button class="btn btn-info" id="btn_simpan" type="submit" onclick="save()">Simpan</button>
<!--<button class="btn btn-info" id="btn_simpan" type="submit" >Simpan</button>-->
</div>
</form>
</div>
</div>
and here the ajax for display data into edit form.
function edit_user(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
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('user/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('[name="id"]').val(data.user_id);
$('[name="userNm"]').val(data.username);
$('[name="nama"]').val(data.complete_name);
$('[name="email"]').val(data.user_email);
//$('[name="fupload"]').val(data.user_image);
$(".#preview").attr("src", './assets/img_user/'+val(data.user_image);
$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit Data Pengguna'); // Set title to Bootstrap modal title
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
I hope anyone can help me. Thanks before.