Postingan lainnya
hapus jquery ajax tidak berfungsi ???
ane udah ikutin cara masalah menghapus data pada tutorial CRUD AJAX di sekolah koding. jadi ketika ane tambahin data nya dia berhasil menambahkan data nya dan memunculkan tombol hapus nya, tapi ketika ane klik tombol hapus nya dia tidak menghapus data pada tabel view browser nya tetapi di database nya dia berhasil menghapus data nya. nah ini codingan menampilkan data nya di tabel view browser nya
<?php while($row = mysqli_fetch_assoc($isi_table)): ?>
<tbody id="display">
<tr id="hapus_<?= $row['id']; ?>">
<td><?= $row['mata_kuliah']; ?></td>
<td><?= $row['dosen']; ?></td>
<td><?= $row['kelas']; ?></td>
<td><?= $row['sks']; ?></td>
<td><?= $row['hari']; ?></td>
<td><?= $row['jam']; ?></td>
<td><input type="button" name="btn_hapus" class="btn_hapus" data-id="<?= $row['id']; ?>" value="Hapus"></td>
</tr>
</tbody>
<?php endwhile; ?>
yang ini codingan ajax nya
$(document).on('click','.btn_hapus',function(){
var id = $(this).attr('data-id');
$.ajax({
type: "POST",
url: "hapus_krs.php",
data: {hapus_krs:id},
success: function(data){
$('#hapus_'+id).fadeOut();
}
});
});
yang ini codingan menampilkan data nya ketika di tambahkan data nya
<?php
require_once "core/init.php";
global $link;
$output = '';
$list_kuliah = mysqli_real_escape_string($link, $_POST['kuliahList']);
$list_dosen = mysqli_real_escape_string($link, $_POST['dosenList']);
$list_kelas = mysqli_real_escape_string($link, $_POST['kelasList']);
$list_sks = mysqli_real_escape_string($link, $_POST['sksList']);
$list_hari = mysqli_real_escape_string($link, $_POST['hariList']);
$list_jam = mysqli_real_escape_string($link, $_POST['jamList']);
if (!empty(trim($list_kuliah)) && !empty(trim($list_dosen)) && !empty(trim($list_kelas)) && !empty(trim($list_sks)) && !empty(trim($list_hari)) && !empty(trim($list_jam))) {
if (tambah_data_krs($list_kuliah,$list_dosen,$list_kelas,$list_sks,$list_hari,$list_jam)) {
$last_id = mysqli_insert_id($link);
$output .= '<tr id="hapus_"'.$last_id.'">
"<td>'.$list_kuliah.'</td>",
"<td>'.$list_dosen.'</td>",
"<td>'.$list_kelas.'</td>",
"<td>'.$list_sks.'</td>",
"<td>'.$list_hari.'</td>",
"<td>'.$list_jam.'</td>",
"<td><input type="button" name="btn_hapus" class="btn_hapus" data-id="'.$last_id.'" value="Hapus"></td>"
</tr>';
}else{
$output .= 'Ada Masalah Saat Menambah Data KRS';
}
}else{
$output .= 'Semua Data Wajib Di isi';
}
echo $output;
?>
satu lagi codingan hapus data nya
<?php
require_once "core/init.php";
$query = "DELETE FROM kartu_studi WHERE id=".$_POST['hapus_krs'];
$result = mysqli_query($link, $query);
if($result){
echo "1";
}else{
echo "-1";
}
?>
nah maksud ane kalo dia berhasil menambah kan data nya dan memunculkan tombol hapus nya pada tabel view di browser nya. trus ane klik tombol hapus nya, data nya akan terhapus di tabel view browser nya dan database nya. sedangkan masalah yang terjadi saat ini dia hanya menghapus data di database nya tetapi di tabel view browser nya dia tidak menghapus data nya...
Bagaimana solusi nya menurut om,tante,mba,mas,bro,sis yang ada disini apakah ada yang salah di codingan nya ??
mohon pencerahan nya. sekian dan terima kasih :(
17 Jawaban:
berarti backend tidak ada masalah. 1. Sudah coba inspect element apa yang error ? 2. Setelah berhasil menambahkan /memunculkan data baru, sudah dicek apakah id nya benar ? sesuai yang diinginkan (diinspect element juga) 3. lihat console.log / keluarkan id yang diklik pada saat menghapus, untuk ngelihat apakah udah benar id yang dimau yang diklik atau bukan
1. Sudah coba inspect element apa yang error ? sudah di inspect element mas hilman, hasil nya tidak ada yang error.
2. Setelah berhasil menambahkan /memunculkan data baru, sudah dicek apakah id nya benar ? sesuai yang diinginkan (diinspect element juga). id nya benar kok mas hilman, sesuai yang di inginkan..
3. lihat console.log / keluarkan id yang diklik pada saat menghapus, untuk ngelihat apakah udah benar id yang dimau yang diklik atau bukan sudah di console.log mas hilman hasil nya udah benar id nya sesuai yang diklik.
aneh yak mas hilman harus nya kan dia berfungsi program nya karena sudah saya cek berulang ulang tidak ada yang error?
wah, udah semua kayanya ngga ada yang salah, aneh juga, kita tunggu detective conan yang memecahkan :P , nanti kalo nemu saya balik lagi.
Ohiya satu lagi, pas nambahin datanya, strukturnya juga usaha seperti ini
$(document).on('click','.tambah',function(){ ... }
bukan $(namaId).click({..})
oke maas hilman, ane coba liat di yusup dulu barang kali ada tutorial alternatif yang bisa memecah kan masalah ini hoho.
terima kasih mas hilman udah mau bantuin ane dan ikut bingung hehe
mudah mudahan bisa terpecah kan dan ane bisa share lagi cara nya di sini..
$.ajax waktu read data, tambahin option cache: false
Itu pakek JQuery kan? Coba script Javascript/JQuery-nya ditaruh di dalam ini:
$(window).load(function()
{
// script di sini...
// Misal $(document).ready(function(){}); dan seterusnya
// Btw, bener kata Bang Hilman, usahakan struktur syntaxnya seperti ini:
// $(document).on('click','.tambah',function(){ ... }
});
sama aja hasil nya mas @QaiserLab dan mas @dalikewara tidak menghilangkan elemt nya pas diklik tombol hapusnya.
Okeh, tetep taruh javascript di dalam kode window load tadi. Dan ini kayaknya ada yang aneh.
Pada bagian menampilkan data setelah data ditambahkan.
$output .= '<tr id="hapus_"'.$last_id.'">'; // dan seterusnya.
Itu bener string tr-nya gitu? Kayaknya outputnya bakalan jadi gini: misal id = 1.
<tr id="hapus_"1">
Coba bikin kodenya jadi gini:
// hapus tanda " setelah hapus_
$output .= '<tr id="hapus_'.$last_id.'">'; // dan seterusnya.
yakin mas @dalikewara dan tidak ada masalah kalo codingan yang itu
Coba dihapus dulu tanda " setelah hapus_
ajax pas nambahin element, kodenya gimana? udah kaya gini juga strukturnya?
$(document).on('click','.tambah',function(){ ... }
coba ditampilkan
$(document).on('click','#btn_cetak', function(){
var kuliah_list = $('#kuliah').val();
var dosen_list = $('#dosen_list').val();
var kelas_list = $('#kelas_list').val();
var sks_list = $('#sks_list').val();
var hari_list = $('#hari_list').val();
var jam_list = $('#jam_list').val();
if(kuliah_list == '' || dosen_list == '' || kelas_list == '' || sks_list == '' || hari_list == '' || jam_list == ''){
$('#message').html("Semua data wajib di isi");
}else{
$.ajax({
type: "POST",
url: "kartu_studi.php",
data: {kuliahList:kuliah_list,dosenList:dosen_list,kelasList:kelas_list,
sksList:sks_list,hariList:hari_list,jamList:jam_list},
success: function(data){
$('#message').fadeIn().html("Data Tersimpan");
setTimeout(function(){
$('#message').fadeOut('slow');
$('#display').prepend(data);
}, 3000);
}
});
}
});
ini codingan ajax pas nambahin element nya mas hilman..
mas @dalikewara sudah dihapus dan hasil nya sama aja
Jawaban Terpilih
ketemu cara nya mas @hilmanrdn dan @dalikewara .. yahuuuu hehehe
before strukturnya kaya gini dan gagal menghilangkan element nya
$(document).on('click','.btn_hapus',function(){
var id = $(this).attr('data-id');
$.ajax({
type: "POST",
url: "hapus_krs.php",
data: {hapus_krs:id},
success: function(data){
$('#hapus_'+id).fadeOut();
}
});
});
trus saya ubah pake cara yang saya liat di youtube struktur nya kaya gini dia berhasil menghilangkan element nya
$(document).delegate('.btn_hapus','click',function(){
var id = $(this).attr('data-id');
$.ajax({
type: "POST",
url: "hapus_krs.php",
data: {hapus_krs:id},
success: function(data){
$('#hapus_'+id).fadeOut();
}
});
});
tapi saya bingung dengan fungsi dari metode delegate dan baru ngeliat pake metode delegate biasanya pake metode live..??
Pake jquery versi berapa, delegate sejak versi 3 harusnya udah deprecated. Coba cek aja versi jquerynya
pake jquery 3.1.1 itu saya ambil src nya dari jquery cdn, sementara saya kasih jawaban terbaik dulu mas hilman karena berhasil..