Postingan lainnya
Buku Ini Koding!
Baru!
Buku ini akan jadi teman perjalanan kamu belajar sampai dapat kerjaan di dunia programming!
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Isi data dari table tidak muncul di dalam modal
Selamat malam.. saya mau tanya.-) Kenapa ya isi dari tabel nya tidak muncul didalam body modal? Apa ada kodingan yang salah? Mohon bantuannya ya.. Berikut ini koding untuk modalnya :
<html>
<head>
<title>Warteg Online</title>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css"/>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<style>
*{
padding:0px;
margin:0px;
}
.navbar-header{
position:fixed;
height:20%;
}
.navbar-header a{
font-size:16px;
}
.col-md-3{
background-color:#330000;
color:#FFFFFF;
margin-top:-18px;
padding-top:0px;
height:90%;
overflow:scroll;
}
.menu img{
margin:5%;
width:250px;
height:145px;
position:relative;
}
.menu p{
position:absolute;
color:#000000;
font-size:24px;
}
.col-md-9{
margin-top:-18px;
background-color:#330000;
height:90%;
overflow:scroll;
}
.card{
width:250px;
float:left;
margin-top:3%;
margin-right:3%;
}
</style>
<!-- Tampilan Header-->
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<p class="navbar-brand">Warteg Bahari</p>
<ul class="nav navbar-nav">
<li><a href="home_nasi.php">Nasi</a></li>
<li class="active"><a href="home_sayur.php">Sayur Mayur</a></li>
<li><a href="home_nabati.php">Lauk Nabati</a></li>
<li><a href="home_hewani.php">Lauk Hewani</a></li>
<li><a href="home_gorengan.php">Gorengan</a></li>
<li><a href="home_minuman.php">Minuman</a></li>
</ul>
</div>
</nav>
<!-- -->
<!-- Tampilan Body Home Sayur -->
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<form action="home_sayur.php" method="get">
<?php include 'koneksi.php';
$pilih=mysql_query("select *from daftar_menu where nm_menu LIKE 'Sayur%'")or die(mysql_error());
while($fpilih=mysql_fetch_array($pilih)){ ?>
<div class="card 1">
<img src="gambar/<?php echo $fpilih['gambar']; ?>" style="width:250; height:145;">
<div class="container">
<input type="hidden" value=""
<h4><b><?php echo $fpilih['nm_menu']; ?></b></h4>
<p>Rp <?php echo $fpilih['hrg_menu']; ?></p>
<input type="hidden" name="id" value="<?php echo $result['id']; ?>">
<a href="#edit_modal" data-toggle='modal' data-id='<?php echo $data['id']; ?>'><i class="btn btn-primary">Lihat Rincian</i></a>
</div>
</div>
</form>
<?php } ?>
</div>
<!-- Untuk Modal edit -->
<div class="modal fade" id="edit_modal" role="dialog">
<div class="modal-dialog" role="document">
<!-- Konten dari modal -->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"><center>Detail Menu</center></h4>
</div>
<div class="modal-body">
<div class="hasil-data"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Keluar</button>
</div>
</div>
</div>
</div>
<!-- Akhir Untuk modal edt -->
<div class="col-md-3">
<h3><center>Menu Saya</center></h3>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.data').DataTable();
});
$(document).ready(function(){
$('#edit_modal').on('show.bs.modal', function (e) {
var idx = $(e.relatedTarget).data('id');
//menggunakan fungsi ajax untuk pengambilan data
$.ajax({
type : 'post',
url : 'detail_menu.php',
data : 'idx='+ idx,
success : function(data){
$('.hasil-data').html(data);//menampilkan data ke dalam modal
}
});
});
});
</script>
</body>
</html>
dan ini untuk detail isi dari modalnya :
<?php
include "koneksi.php";
if($_POST['idx']) {
$id = $_POST['idx'];
$sql = mysql_query("SELECT * FROM daftar_menu WHERE id = '$id'")or die("gagal!");
while ($result = mysql_fetch_array($sql)){
?>
<input type="hidden" name="id" value="<?php echo $result['id']; ?>">
<div class="form-group">
<h1><?php echo $result['nm_menu']; ?></h1>
</div>
<button class="btn btn-primary" type="submit">Update</button>
<?php } }
?>
Ini adalah tampilan saat program dijalankan :
7 Jawaban:
untuk parameter data di ajax emang ngisinya begitu ya gan. soalnya kalau saya biasanya begini gan:
data :{idx : idx},
coba echo $_POST['idx'] diluar if. Kalau ada berarti di if nya. Coba pakai isset aja kaya gini:
if(isset($_POST['idx'])) {
Cob di ubah outputnya dengan menggunakan
json_encode()
lalu di scriptnya:
$(document).ready(function(){
$('#edit_modal').on('show.bs.modal', function (e) {
var idx = $(e.relatedTarget).data('id');
//menggunakan fungsi ajax untuk pengambilan data
$.ajax({
type : 'post',
url : 'detail_menu.php',
data : 'idx='+ idx, //Misalkan dah pake json_encode(), line ini bisa dilepas
dataType: 'JSON',
success : function(data){
$('.hasil-data').html(data.nama_field_pada_table);//menampilkan data ke dalam modal
}
});
});
});
@zergz kosong json_encode nya ditaro di kodingan isi modal gan?
Diletakkan di detail_menu.php Misalkan macam gini:
echo json_encode($result);
untuk echo-nya sendiri disesuaikan dgn query databasenya
ternyata salah disaya gan @zergz @devio.. ada nama variabel yg beda.. makasih ya udh dibantu..
Tanggapan
salah nya dimana ya gan ? saya gak tampil juga nih