Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
refresh image saat edit form, tanpa load page
mohon bantuannya gan mas, saya masih belajar ni, saya membuat form edit codeigniter dan ajax, nah ketika proses edit data disitu saya menampilkan image pada form tersebut, saat saya mengganti image dan klik button update, image yang ada pada form tidak berubah, tetapi sudah ganti datanya. hanya tampilannya saja yg tidak berubah, imagenya tidak berbubah karena saya tidak reload formnya. pertanyaaannya bagaimana caranya saya mereload image tersebut tanpa reload page. berikut script yg saya gunakan.
function update()
{
$('#btnSave').text('updating...'); //change button text
$('#btnSave').attr('disabled',true); //set button disable
var url;
url = "<?php echo site_url('blog/ajax_update')?>";
// ajax adding data to database
tinyMCE.triggerSave();
var formData = new FormData($('#form')[0]);
$.ajax({
url : url,
type: "POST",
data: formData,
contentType: false,
processData: false,
dataType: "JSON",
success: function(data)
{
if(data.status) //if success close modal and reload ajax table
{
alert('Data Berhasil diUpdate');
// location.reload();
}
else
{
for (var i = 0; i < data.inputerror.length; i++)
{
$('[name="'+data.inputerror[i]+'"]').parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
$('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
}
}
$('#btnSave').text('update'); //change button text
$('#btnSave').attr('disabled',false); //set button enable
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error adding / update data');
$('#btnSave').text('update'); //change button text
$('#btnSave').attr('disabled',false); //set button enable
}
});
}
contoh script yg saya guakan untuk menampilkan image di form
<form>
<div>
<label class="control-label">Profil Image</label>
<input type="file" name="profil_image">
<?php if($get_data->profil_image=="no_image.png"){?>
<img src="<?php echo base_url()?>uploads/no_image.png?>" class="thumbnail" width="70" height="80" style="object-fit:cover; object-position:20% 20%;">
<?php }else{ ?>
<img src="<?php echo base_url()?>uploads/profil/<?php echo $get_data->profil_image?>" class="thumbnail" width="70" height="80" style="object-fit:cover; object-position:20% 20%;">
<?php } ?>
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<button type="button" id="btnSave" onclick="update()" class="btn btn-success">
<span class="glyphicon glyphicon-floppy-disk"></span> Update
</button>
<button type="reset" class="btn btn-default">
<span class="glyphicon glyphicon-floppy-disk"></span> Clear
</button>
</div>
</div>
</form>
32 Jawaban:
ketika post success lewat ajax, image di reload yah, tanpa reload pagenya..
coba..
if(data.status) //if success close modal and reload ajax table
{
alert('Data Berhasil diUpdate');
// location.reload();
$("#myimg").attr("src", "http://localhost/project/img/"+ data.image);
}
url sesuaikan, dan [ data.image ] return nama file image yang berhasil di upload nya..
kebetulan saya lagi coba mas, permasalahannya bagaimana cara ngambil data.imagenya itu ini script yang lagi saya coba
if(data.status) //if success close modal and reload ajax table
{
alert('Data Berhasil diUpdate');
document.getElementById("myImage").src = '"'+base_url+'uploads/brand_logo/'+"<?php echo $get_data->brand_logo?>";
}
hasil dari imagenya selalu;
"http://localhost:8080/belajar/uploads/brand_logo/undefined
untuk image yg di simpan filename nya kan yah? untuk get nya ambil dari return success ajax, ga pake <?php echo $get_data->brand_logo?>
coba console.log
success: function(data)
{
console.log(data);
if(data.status) //if success close modal and reload ajax table
{
alert('Data Berhasil diUpdate');
// location.reload();
}
......
hasil console.log(data); , apa yah?
dan coba liat script yng mengarah ke url site_url('blog/ajax_update')
iya mas sebenarnya untuk datanya ketika diupdate udah kesimpen, tinggal ngambil urlnya aja yg gak dapat, untuk script ajax_update seperti ini sih
public function ajax_update()
{
$this->_validate();
$data = array(
'brand_name'=>$this->input->post('brand_name'),
'brand_description'=>$this->input->post('brand_description'),
'brand_istrash'=>1
);
if(!empty($_FILES['brand_logo']['name']))
{
$upload = $this->_do_upload();
$data['brand_logo'] = $upload;
}
$update = $this->mdl->update(array('brand_id'=>$this->input->post('brand_id')), $data);
echo json_encode(array("status"=>TRUE));
}
coba di ajax_update() , tambahin di array json_encode nya jadi
....
$update = $this->mdl->update(array('brand_id'=>$this->input->post('brand_id')), $data);
echo json_encode(
array(
"image"=>$_FILES['brand_logo']['name'],
"status"=>TRUE
)
);
....
view nya, di ajax tetep get data.image
$("#myimg").attr("src", "http://localhost:8080/belajar/uploads/brand_logo/"+ data.image);
siipppp :) , url nya variable yah, kalo di codeigniter, bisa juga di buatin file helper untuk deklarasiin path url asset -> css,image, dll, nnt helpernya masukin di autoload.
atau simplenya yah di js nya buat
var image_url = "http://localhost:8080/belajar/uploads/brand_logo/"
jadi image_url+data.image
atau langsung + data.image
array(
"image"=>"http://localhost:8080/belajar/uploads/brand_logo/".$_FILES['brand_logo']['name'],
"status"=>TRUE
)
jadi pemanggilan tinggal "src", data.image)...
biar dinamis juga http://localho.... ganti jadi base_url()
mas rezqi maaf mau tanya lagi, kalo imagenya gak diganti supaya image yg tampil masih image yg sama itu gimana ya?
soalnya ketika saya tidak ganti imagenya, pas diklik update malah ke refresh value image yg ada,
Itu di page mau update data? Jadi ceritanya mau nampilin gambar sesuai uploadan terakhir? Atau gmna?
iya mas pas di page update data, kan kalo diupdate ganti imagenya pagenya gak reload dan gambarnya ganti sama yg baru diupdate, nah itu udah sukses, pas sya update dan gak ganti imagenya tampilannya jadi seperti itu, harusnya tampilannya sama dengan image yg ada sebelumnya.
untuk perubahan dan auto reload image itu kan pake ajax, nah untuk get default nya ( get image sesuai yag ada di db terkhir kali ) brrt yah get pake php.. ,
tapi saya liat itu di post mas@4key, udah ada.. jadi di load dulu..
<?php if($image != ''){ ?>
<img src="<?php echo base_url()?>uploads/profil/<?php echo $image; ?>">
<? }else{ ?>
<img src="<?php echo base_url()?>uploads/profil/default.jpg">
<? } ?>
jika image tidak kosong, ambil gambar dari database,, jika gambarnya kosong agar tidak terlihat image not found kasih image default..
sebenarnya saya sudah pake sih mas kalo itu,\
<?php if($get_data->brand_foto=="no_image.png"){?>
<img src="<?php echo base_url()?>uploads/no_image.png?>" class="thumbnail" width="70" height="80" id="brandImage" style="object-fit:cover; object-position:20% 20%;">
<?php }else{ ?>
<img src="<?php echo base_url()?>uploads/brand_foto/<?php echo $get_data->brand_foto?>" class="thumbnail" id="brandImage" width="70" height="80" style="object-fit:cover; object-position:20% 20%;">
<?php } ?>
yg saya heran, harusnya tetep image default yg muncul, tapi pas diklik update image location yg asli malah ilang
memang image location yg asli kaya apa? kalo di liat di 'inspect elemenntnya' sih itu blank karna memang /brand_foto/ ... /kosong gada imagenya.. apa awal muncul? ketika awal load page?
kalo pas awal muncul mas,
jadi kalo saya klik update, dan gak ganti i magenya value si imagenya ilang seperti gambar sebelumnya
ke db nya juga jadi ke ubah ga image namenya? asalnya sayap-md.png? ketika ga dirubah dan di klik update itu gambarnya jadi blank? coba di cek di db nya blank juga ga?
kalo ke dbnya gak blank, dan anehnya setelah saya reload pagenya. image yg awal muncul lagi valuenya
oowh brrt coba ada event onclick ga di button update nya di js? permasalahannya mungkin ada disitu, coba aja pake validasi jika image == '' maka gausah di update
ada sih mas, jadi fungsi update ini, dipanggil dibuttonnya pake onlcick, kalo mau saya kasih validasi tersebut sebelah mana ya mas, sedikit bingung
function update()
{
$('#btnSave').text('updating...'); //change button text
$('#btnSave').attr('disabled',true); //set button disable
var url;
url = "<?php echo site_url('brand_image/ajax_update')?>";
// ajax adding data to database
var formData = new FormData($('#form')[0]);
$.ajax({
url : url,
type: "POST",
data: formData,
contentType: false,
processData: false,
dataType: "JSON",
success: function(data)
{
if(data.status) //if success close modal and reload ajax table
{
alert('Data Berhasil diUpdate');
$("#brandImage").attr("src", ""+base_url+"uploads/brand_foto/"+ data.image);
}
else
{
for (var i = 0; i < data.inputerror.length; i++)
{
$('[name="'+data.inputerror[i]+'"]').parent().addClass('has-error'); //select parent twice to select div form-group class and add has-error class
$('[name="'+data.inputerror[i]+'"]').next().text(data.error_string[i]); //select span help-block class set text error string
}
}
$('#btnSave').text('update'); //change button text
$('#btnSave').attr('disabled',false); //set button enable
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error adding / update data');
$('#btnSave').text('update'); //change button text
$('#btnSave').attr('disabled',false); //set button enable
}
});
}
nama input image nya apa? misal input_image lah yah <input type="file" name="input_image">
coba
if(data.status) //if success close modal and reload ajax table
{
alert('Data Berhasil diUpdate');
if($("#input_image") != ''){
$("#brandImage").attr("src", ""+base_url+"uploads/brand_foto/"+ data.image);
}
}
ini nama file inputnya
<input type="file" name="album_foto_image">
kalo dilihat di script diatas berarti saya tambahkan id di file inputnya ya
ooh iya lupa saya, iya bener tambah id="album_foto_image" maksudnya
sudah saya coba mas, ketika imagenya gak diganti default yg ditampilkan tetap itu, skarang ketika image diganti gak mau ganti
if($("#album_foto_image") == ''){
$("#albumImage").attr("src", ""+base_url+"uploads/album_foto/"+ data.image);
}
saya tambahkan else, malah tidak terbaca yg pertama itu == ""
owalaah sorry sorry,
if($("#album_foto_image").val() != ''){
$("#albumImage").attr("src", ""+base_url+"uploads/album_foto/"+ data.image);
}
maksudnya itu, coba.. jika album_foto_image != kosong maka album image attr src di update, klo ga memenuhi syarat yah sudah tidak ada yg di eksekusi
oka mas @gunalirezqimauludi berhasil, makasih mas atas bantuannya, kalo saya mau ngambil value image yg ditampikan pada form itu dari database bagaimanaya? pas bagian script ini
$data = array(
'album_gallery_id'=>$this->input->post('album_gallery_id'),
'album_foto_title'=>$this->input->post('album_foto_title'),
'album_foto_keterangan'=>$this->input->post('album_foto_keterangan'),
'album_foto_istrash'=>1
);
if(!empty($_FILES['album_foto_image']['name']))
{
$upload = $this->_do_upload();
$data['album_foto_image'] = $upload;
}
$update = $this->mdl->update(array('album_foto_id'=>$this->input->post('album_foto_id')), $data);
echo json_encode(array(
"image"=>$_FILES['album_foto_image']['name'],
"status"=>TRUE
));
itukan variable "imagenya" valuenya yg ada di value input filenya ya, sedangkan kalo saya update dengan image yg menggunakan spasi, hasil image value yg ada pada input file sama yg didatabase berbeda, karena yg didatabase space diganti jadi underscore
saya atasi di fungsi upload filenya menggunakan remove_spaces, supaya image yg tersimpan gak jadi under-score pertanyaannya apakah ada alternatif lain selain pada mengubah remove_spaces
mungkin banyak alternatif , kalo saya biasanya image yg di upload itu di enkripsi file namenya atau di ganti jadi random string atau apapun itu, tpi selama menggunakan fungsi untuk remove_spaces bisa, dan gada masalah yah oke oke aja.. sesuai keinginan & kebutuhan..
kalo saya ambil pada bagian image ini dari database bisa ga mas ya,
echo json_encode(array(
"image"=>$_FILES['album_foto_image']['name'],
"status"=>TRUE
));
soalnya value image yg diupdate sama yg didatabase tadi berbeda, sehingga image tidak muncul langsung pada viewnya mesti di refresh page, itu terjadi kalo image yang diupdate menggunakan spasi, contoh: yang diupload = image satu.jpg database = image_satu.jpg
ya bisa dong, tnggal pas input sisipin query untuk get ke db where nya misalkan where id post, nnt return imagenya templein ke json encode, dari $_FILES[.... ganti ke hasil get dari db, atau mau gampang yaudah tiap image yg ada spasinya sebelum file di disimpan ke di folder tempat uploadnya rename aja.. replace spasi jadi kosong jadi biar dempet nama image.jpg => namaimage.jpg / di enkripsi aja namaimage.jpg jadi 23uhdad32.jpg misalnya..
saya kurang tau sih klo nama file yg spasi di inputkan ke db auto jadi underscore..
saya coba, kalo yg ditampilkan ambil dari database pas direload datanya gak langsung berubah ya, apakah ada yg slah, atau memang sepertinya tidak bisa ya mas
$this->db->where('album_foto_id',$_POST['album_foto_id']);
$query = $this->db->get('album_foto');
$query->result();
$row = $query->row_array();
$update = $this->mdl->update(array('album_foto_id'=>$this->input->post('album_foto_id')), $data);
echo json_encode(array(
"image"=>$row['album_foto_image'],
"status"=>TRUE
));
1. saat ke page update, awal load itu defaultnya image di get dari table db, jika image di table gada brrt munculin image default, jika ada munculin gambarnya, maka
....
<?php if($image != ''){ ?>
<img src="lokasi_image/<?php echo $image; ?>">
<? }else{ ?>
<img src="lokasi_image/default.jpg">
<? } ?>
....
2. ingin imagenya auto update, biar gambarnya langsung rubah sesuai gambar yg habis di upload.. brrt bisa pake ajax, onClick button update misalnya
if($("#image").val() == ''){
$("#albumImage").attr("src", "lokasi_image"+ data.image);
}
ketika input gambar kosong alias ga di ganti gambarnya, #albumImage gakan di ganti gambarnya jadi bakal tetep, klo gambarnya di ganti, maka di get ulng 'attr src...' nya gambar sesuai return dari php nya ' data.image ' , data.image ini sebelumnya kan dari $_FILES['album_foto_image']['name'] , file name ini misal masukin image namanya 'abc.jpg' maka ke db pun masuk nya 'abc.jpg' return nya pun data.image = 'abc.jpg' amaaaan?? karna filename sama dengan yg masuk ke db? , naah tapi ada masalah baru?? ketika nyoba masukin file name yg berspasi abc def gh.jpg, misalnya.. masuknya ke db jadinya abc_def_gh.jpg? maka ga sesuai get $_FILES[... itu abc def gh.jpg tapi kan data di db nya abc_def_gh.jpg, maka image blank?
jadi ngatasinnya ketika di post, return untuk data.imagenya bukan dari nama file yg bru diinputkan, tpi coba get dari db.. biar yg di load sama ga masalahin lg beda _ (underscore) atau apapun itu?
$this->db->where('album_foto_id',$_POST['album_foto_id']);
$query = $this->db->get('album_foto');
$query->result();
$row = $query->row_array();
$update = $this->mdl->update(array('album_foto_id'=>$this->input->post('album_foto_id')), $data);
echo json_encode(array(
"image"=>$row['album_foto_image'],
"status"=>TRUE
));
bener sihh.. yg jadi masalahnya gmna? imagenya ga nampil? klo memang ganampil coba print_r $row['album_foto_image'] , imagenya ada ga..
maaf mas jadi banyak tanya, permasalahan lebih tepatnya kalo saya get dari database, ketika di klik update pada form. imagen yang tampil gak ngeganti langsung sama tampilan image yg baru diupdate. berbeda dengan ketika tidak get dari database atau menguunakan $_FILES['album_foto_imag].. imangenya langsung ke ganti atau tampilannya sesuai dengan image yg baru diupload
gapapa santai aja, akupun ambil belajar, coba print_r($row['album_foto_image']);exit(); ada ga? klo ada coba rubah scriptnya jd gini, klo blank ... brt ada kesalahan di get nya mungkin :D
$this->db->where('album_foto_id',$_POST['album_foto_id']);
$query = $this->db->get('album_foto');
$query->result();
$row = $query->row_array();
$update = $this->mdl->update(array('album_foto_id'=>$this->input->post('album_foto_id')), $data);
if($update){
echo json_encode(array(
"image"=>$row['album_foto_image'],
"status"=>TRUE
));
}