Daftar dan Belajar Sekarang!

Data tidak ditampilkan

foto irya
59 Kontribusi 12 Coto
3 minggu yang lalu
mohon bantuannya gan. saya ingin mengedit data menggunakan ajax. id data ditangkap tapi data lainnya tidak di tampilkan ke tag input. tombol edit
<a href="<?= base_url('kategori/ubah/'); ?><?= $row['id_kategori'] ?>" data-toggle="modal" data-target="#modalTambah" data-id="<?= $row['id_kategori']; ?>" class="btn btn-success tombolEdit">Edit</a>
modal edit
<div class="modal-body">
  <input type="hidden" class="form-control" id="id_kategori" name="id_kategori">
    <div class="form-group">
      <label>Kategori</label>
	<input type="text" class="form-control" id="kategori" name="kategori" placeholder="Masukan Kategori">
    </div>
    <div class="form-group">
      <label>Keterangan</label>
      <input type="text" class="form-control" id="keterangan" name="keterangan" placeholder="Masukan Keterangan">
      </div>
</div>
<div class="modal-footer">
     <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
     <button type="submit" class="btn btn-primary">Add</button>
</div>
contoller
public function getubah()
{
    echo json_encode($this->kategori->getProdukById($id));
}

public function ubah($id)
{
    $data['produk'] = $this->kategori->getProdukById($id);
    $this->kategori->ubahProduk();
    $this->session->set_flashdata('message', '<div class="alert alert-success" role="alert">Data berhasil diubah</div>');
    redirect('kategori');
}
model
public function getAllData()
{
   return $this->db->get('kategori')->result_array();
}

public function getProdukById($id)
{
   return $this->db->get_where('kategori', ['id_kategori' => $id])->row_array();
}
jquery
$('.tombolEdit').on('click', function() {

   $('#ModalLabel').html('Ubah Data Produk');
   $('.modal-footer button[type=submit]').html('Ubah Data'); 
	
   $('.modal-body form').attr('action', 'http://localhost/ci-toko/kategori/ubah')
	
   const id = $(this).data('id');
   // console.log(id);
	
   $.ajax({
	url: '<?= base_url(kategori/getubah) ?>',
	data: {id_kategori: id},
	method: 'POST',
	dataType: 'json',
	success: function(data) {
	   $('#kategori').val(data.kategori);
	   $('#keterangan').val(data.keterangan);
	}
    });
});
output https://i.imgur.com/6BbFQwf.png
  • Itu letak script jQuery Ajax nya dimana? - PUYUP
  • di file script.js - irya
  • itu baseurlnya udah bener? - kanganjay08
Tampikan semua komentar

Login untuk tulis komentar


Jawaban
foto hendri18
57 Kontribusi 29 Coto
3 minggu yang lalu
ini yg salah mungkin
public function getubah()
{
    echo json_encode($this->kategori->getProdukById($id));
}
getproductbyid tapi variable idnya gk dideklarasiin
  • variabel idnya saya dekralasikan di model. apakah itu beda mas? - irya
  • wah kalo soal model ci saya kurang ngerti gan - hendri18

Login untuk tulis komentar


foto Shefin17
19 Kontribusi 9 Coto
3 minggu yang lalu
variable id perlu di declarasi $id = this->uri->segment(3) kalo di model itu menangkap variable dari controller model public function getProdukById($id) { return $this->db->get_where('kategori', ['id_kategori' => $id])->row_array(); } controller public function getubah() { $id = this->uri->segment(3)//segment 3 mengambil url dari-> {halaman/fungsi/id} $id = this->input->get()//ini jg bisa untuk mengambil id diurl echo json_encode($this->kategori->getProdukById($id)); }
  • udah saya tambahkan mas tapi hasilya tetap sama tidak ada data yang di tampilkan. klo yang ajaxnya itu udah benar ya mas? - irya

Login untuk tulis komentar


foto PUYUP
17 Kontribusi 7 Coto
2 minggu yang lalu
Kenapa tidak tampil? Karena kalau fungsi AJAX ada dalam file.js terpisah maka kode php TIDAK AKAN BERJALAN.
url: '<?= base_url(kategori/getubah) ?>',
Deklarasikan terlebih dahulu URL endpoint, letakkan tepat diatas file.js Contoh;
/* <![CDATA[ */
var global_param = {"ajax_url":"http://www.endpoint.ajax"};
/* ]]> */
Kemudian;
url: global_param.ajax_url,
Silhkan di coba.
  • saya udah ganti url: '<?= base_url(kategori/getubah) ?>', ke url: global_param.ajax_url, tapi kenapa hasilnya tetap sama ya mas? endpointnya sudah saya tambahkan juga. codenya saya tulis dibawah mas - irya

Login untuk tulis komentar


foto irya
59 Kontribusi 12 Coto
2 minggu yang lalu
nulisanya seperti ini mas @PUYUP?
var global_param = {"ajax_url":"http://www.endpoint.ajax"};


$(function() {
	
   $('.tombolTambah').on('click',function () {
	$('#ModalLabel').html('Tambah Data Produk');
	$('.modal-footer button[type=submit]').html('Tambah Data');

	$('#kategori').val('');
	$('#keterangan').val('');
   });
	
	$('.tombolEdit').on('click', function() {

	$('#ModalLabel').html('Ubah Data Produk');
	$('.modal-footer button[type=submit]').html('Ubah Data'); 
	$('.modal-body form').attr('action', 'http://localhost/ci-toko/kategori/ubah')

		
		const id = $(this).data('id');
		
		
		$.ajax({
			url: global_param.ajax_url,
			data: {id_kategori: id},
			method: 'POST',
			dataType: 'json',
			success: function(data) {
				$('#kategori').val(data.kategori);
				$('#keterangan').val(data.keterangan);
			}
		});
	});
});

foto PUYUP
17 Kontribusi 7 Coto
1 minggu yang lalu
Kasusnya; Ada data seperti ini misalnya: (proses) #1. Budi ---- (edit) <- klik #2. AJAX untuk request data dijalankan #3. Membuka popup modal Jika koding backend tidak error dan saat direct akses ke endpoint (ex: http://puyup.com/data/edit/10) muncul data dalam format JSON. Maka urutan request data dan modal yang belum tepat. (urutan proses 1, 2, 3 belum tepat). Kenapa? AJAX dan modal berjalan terpisah, jadi tidak ketemu. Proses yang benar adalah; #1. Budi ---- (edit) <- klik #2. Membuka popup modal #3. AJAX untuk request data dijalankan Lebih kurang seperti ini;
$( document ).on( 'show.bs.modal', '#id-modal', function( e ) {
	// Jalankan AJAX disini
});
Dengan begitu ibaratnya tempat sudah disediakan (form, input, dll). Si AJAX berjalan dilatar belakang, ketika respon siap AJAX menginput data ke form, input, dll. Proses yang mas buat adalah menyiapkan data, tapi wadahnya belum ada., maaf jika penjelasannya biking bingung :D
  • terima kasih banyak atas bantuannya mas - irya

Login untuk tulis komentar


foto PUYUP
17 Kontribusi 7 Coto
1 minggu yang lalu
Contohnya bisa dicek disini: http://portofolio.puyup.com/bootstrap-ajax-modal/ Download file: http://portofolio.puyup.com/bootstrap-ajax-modal.zip Silahkan dicoba.


Login untuk diksusi di forum sekolah koding