Daftar dan Belajar Sekarang!

refresh image saat edit form, tanpa load page

foto 4key
69 Kontribusi 2 Coto
2 tahun yang lalu
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>
https://s28.postimg.org/wzkn0xfd9/form.png

Jawaban
foto gunalirezqimauludi
338 Kontribusi 233 Coto
2 tahun yang lalu
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..

foto 4key
69 Kontribusi 2 Coto
2 tahun yang lalu
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

foto gunalirezqimauludi
338 Kontribusi 233 Coto
2 tahun yang lalu
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')

foto 4key
69 Kontribusi 2 Coto
2 tahun yang lalu
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));
		}

foto gunalirezqimauludi
338 Kontribusi 233 Coto
2 tahun yang lalu
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);

foto 4key
69 Kontribusi 2 Coto
2 tahun yang lalu
worked mas, makasih :D

foto gunalirezqimauludi
338 Kontribusi 233 Coto
2 tahun yang lalu
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()

foto 4key
69 Kontribusi 2 Coto
1 tahun yang lalu
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, https://s24.postimg.org/uogdnax2t/image.png


Login untuk diksusi di forum sekolah koding