Bagaimana mengatasi error ajax yang ditampilkan dengan append?

Saya punya kasus seperti ini saat latihan: saya membuat daftar data, di mana setiap data itu memiliki tombol preview. Saat tombol preview diklik maka akan muncul mengenai detail dari data tersebut yang dikeluarkan dengan ajax. Tampilannya seperti gambar berikut:

ketika tombol preview diklik datanya berhasil muncul. ini hasilnya:

tapi masalah muncul setelah saya membuat fungsi load more. Fungsi load more ini bertujuan untuk menampilkan data selanjutnya karena data awal yang saya tampilkan hanya 3 saja. memang datanya berhasil ditampilkan tepat di bawah data lain (append), namum ketika saya klik "PREVIEW" detail datanya tidak muncul.

ini dia koding filenya: 1. Index.php

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "ajax";

$con = mysqli_connect($host, $user, $pass, $db);
$query = "SELECT * FROM siswa LIMIT 3";
$hasil = mysqli_query($con, $query);
?>

<script type="text/javascript" src="jquery.js"></script>
<script>
	$(document).ready(function(){
		//fungsi preview data
		$('.preview').on('click', function(){
			var nilai = $(this).attr('data-id');

			$.ajax({
				method	: "POST",
				url		: "preview.php",
				data	: {id : nilai},
				success: function (data){
					$('.preview_data').html(data);
				}
			});
		});

		//fungsi load more
		$('.load_more').on('click', function(){
			var load = $(this).attr('data-id');

			$.ajax({
				method	: "POST",
				url		: "load_more.php",
				data	: {id : load},
				success: function (data){
					$('.data_awal').append(data);
				}
			});
		});
	});
</script>

<h1 id="h1">Belajar Ajax</h1>

<!-- data akan dipreview di sini -->
<div class="preview_data">
</div>

<!-- data awal -->
<div class="data_awal">
	<?php while($ar = mysqli_fetch_assoc($hasil)){?>
		<span><?=$ar['nama']?></span>
		<button class="Preview" data-id="<?=$ar['id']?>">Preview</button> <br>
	<?php } ?>
	<!-- data load more nanti akan muncul di bawah sini dengan metode append -->
</div>

<br><br>
<button class="load_more" data-id="4">Load More</button>

2.Preview.php

<?php
if($_POST ['id']){
	$id   = $_POST['id'];
	$host = "localhost";
	$user = "root";
	$pass = "";
	$db = "ajax";

	$con = mysqli_connect($host, $user, $pass, $db);
	$query = "SELECT team FROM siswa WHERE id = $id";
	$hasil = mysqli_query($con, $query);
	$ar	   = mysqli_fetch_assoc($hasil);

	$team = $ar['team'];
}
?>

<b><?=$team;?></b>

3.Load_more.php

<?php
if($_POST ['id']){
	$id   = $_POST['id'];
	$host = "localhost";
	$user = "root";
	$pass = "";
	$db = "ajax";

	$con = mysqli_connect($host, $user, $pass, $db);
	$query = "SELECT * FROM siswa WHERE id = $id";
	$hasil = mysqli_query($con, $query);

}

?>

<?php while($ar = mysqli_fetch_assoc($hasil)){?>
<span><?=$ar['nama']?></span>

<button class="Preview" data-id="<?=$ar['id']?>">Preview</button> <br>
<?php } ?>
avatar onirusama
@onirusama

265 Kontribusi 184 Poin

Diperbarui 8 tahun yang lalu

8 Jawaban:

detil data dari Puppey, Burning dan Era apa...coba liat tampilannya. Dan coba paste tabelnya

avatar androidmaker155
@androidmaker155

17 Kontribusi 17 Poin

Dipost 8 tahun yang lalu

detailnya kalau dipreview seperti gambar kedua di pertanyaan saya diatas. ini tablenya: -struktur tablenya:

-datanya:

avatar onirusama
@onirusama

265 Kontribusi 184 Poin

Dipost 8 tahun yang lalu

kemungkinan kesalahannya penggunaaan metode clicknya, coba ganti jadi

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

penulisan ini kita pake kalo generate elementnya dinamis ( ga muncul dari awal langsung), kaya pada load-more yang agan bikin

avatar hilmanski
@hilmanski

2670 Kontribusi 2132 Poin

Dipost 8 tahun yang lalu

Terima kasih tanggapannya. Tapi tetap g bisa bro.

avatar onirusama
@onirusama

265 Kontribusi 184 Poin

Dipost 8 tahun yang lalu

coba lihat html nya setelah load more, paling salah penempatan div nya saran coba di bagian onclik di kasih console.log('klik previe'); suapaya kita bisa lihat, yg di click jalan apa tidak

avatar ardyhim
@ardyhim

289 Kontribusi 175 Poin

Dipost 8 tahun yang lalu

Terimakasih responnya gan. Seluruh file yang saya gunakan beserta codingnya sudah saya tampilkan diatas gan. Untuk kode html di file load_more.phpnya seperti berikut:

<span><?=$ar['nama']?></span>

<button class="Preview" data-id="<?=$ar['id']?>">Preview</button> <br>

dan ini berhasil ditampilkan (append) di bawah "data awal". ini ssnya setelah diklik load_more:

bisa dilihat muncul 1 data baru yaitu "universe". Masalahnya adalah ketika saya klik preview di universe tidak ada detail yang dikeluarkan. Berbeda dengan 3 data yang sebelumnya, ketika diklik preview detail datanya akan muncul seperti ss berikut:

saya juga sudah console log tidak ada pemberitahuan errornya.

avatar onirusama
@onirusama

265 Kontribusi 184 Poin

Dipost 8 tahun yang lalu

yang di doucment.on click duaduanya coba gan , bagian load more dan bagian preview, habis itu lihat consol lognya lagi, mungkin errornya udah muncul dimana

avatar immeng
@immeng

10 Kontribusi 18 Poin

Dipost 8 tahun yang lalu

Jawaban Terpilih

Thanks gan sudah mau berpusing2 ria, akhirnya dapat solusinya di stackoverflow.com Dari penjelasan yang saya dapatkan ternyata data yang diload_more itu hanya manipulasi HTML saja, sedangkan fungsi ajax previewnya tdk akan berfungsi, sebab fungsi itu hanya menganggap hanya 3 data saja yang akan menggunakannya (data awal). Sehingga solusinya adalah menambahkan fungsi preview ke dalam fungsi ajax load_more agar dapat bekerja. sekali lagi thanks semuanya.

avatar onirusama
@onirusama

265 Kontribusi 184 Poin

Dipost 8 tahun yang lalu

Login untuk ikut Jawaban