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 :(

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Diperbarui 7 tahun yang lalu

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

avatar hilmanski
@hilmanski

2672 Kontribusi 2132 Poin

Dipost 7 tahun yang lalu

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?

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

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({..})

avatar hilmanski
@hilmanski

2672 Kontribusi 2132 Poin

Dipost 7 tahun yang lalu

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..

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

$.ajax waktu read data, tambahin option cache: false

avatar QaiserLab
@QaiserLab

366 Kontribusi 390 Poin

Dipost 7 tahun yang lalu

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(){ ... }
});

avatar dalikewara
@dalikewara

351 Kontribusi 260 Poin

Dipost 7 tahun yang lalu

sama aja hasil nya mas @QaiserLab dan mas @dalikewara tidak menghilangkan elemt nya pas diklik tombol hapusnya.

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

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.

avatar dalikewara
@dalikewara

351 Kontribusi 260 Poin

Dipost 7 tahun yang lalu

yakin mas @dalikewara dan tidak ada masalah kalo codingan yang itu

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

Coba dihapus dulu tanda " setelah hapus_

avatar dalikewara
@dalikewara

351 Kontribusi 260 Poin

Dipost 7 tahun yang lalu

ajax pas nambahin element, kodenya gimana? udah kaya gini juga strukturnya?

$(document).on('click','.tambah',function(){ ... }

coba ditampilkan

avatar hilmanski
@hilmanski

2672 Kontribusi 2132 Poin

Dipost 7 tahun yang lalu

$(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..

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

mas @dalikewara sudah dihapus dan hasil nya sama aja

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

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..??

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

Pake jquery versi berapa, delegate sejak versi 3 harusnya udah deprecated. Coba cek aja versi jquerynya

avatar hilmanski
@hilmanski

2672 Kontribusi 2132 Poin

Dipost 7 tahun yang lalu

pake jquery 3.1.1 itu saya ambil src nya dari jquery cdn, sementara saya kasih jawaban terbaik dulu mas hilman karena berhasil..

avatar BadRabbit
@BadRabbit

149 Kontribusi 56 Poin

Dipost 7 tahun yang lalu

Siipp...

avatar dalikewara
@dalikewara

351 Kontribusi 260 Poin

Dipost 7 tahun yang lalu

Login untuk ikut Jawaban