Postingan lainnya
Data tidak ditampilkan
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
Tanggapan
Itu letak script jQuery Ajax nya dimana?
di file script.js
itu baseurlnya udah bener?
Udah bener
6 Jawaban:
ini yg salah mungkin
<pre> public function getubah() { echo json_encode($this->kategori->getProdukById($id)); } </pre> getproductbyid tapi variable idnya gk dideklarasiin
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)); }
Tanggapan
udah saya tambahkan mas tapi hasilya tetap sama tidak ada data yang di tampilkan. klo yang ajaxnya itu udah benar ya mas?
Kenapa tidak tampil? Karena kalau fungsi AJAX ada dalam file.js terpisah maka kode php TIDAK AKAN BERJALAN.
<pre> url: '<?= base_url(kategori/getubah) ?>', </pre>
Deklarasikan terlebih dahulu URL endpoint, letakkan tepat diatas file.js Contoh;
<pre> /* <![CDATA[ / var global_param = {"ajax_url":"http://www.endpoint.ajax"}; / ]]> */ </pre>
Kemudian;
<pre> url: global_param.ajax_url, </pre>
Silhkan di coba.
Tanggapan
saya udah ganti url: '', ke url: global_param.ajax_url, tapi kenapa hasilnya tetap sama ya mas? endpointnya sudah saya tambahkan juga. codenya saya tulis dibawah mas
nulisanya seperti ini mas @PUYUP?
<pre>
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);
}
});
});
}); </pre>
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;
<pre> $( document ).on( 'show.bs.modal', '#id-modal', function( e ) { // Jalankan AJAX disini }); </pre>
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
Tanggapan
terima kasih banyak atas bantuannya mas
Contohnya bisa dicek disini: http://portofolio.puyup.com/bootstrap-ajax-modal/
Download file: http://portofolio.puyup.com/bootstrap-ajax-modal.zip
Silahkan dicoba.