Postingan lainnya
Kelas Premium!
Belajar Javascript untuk website
Gunakan kupon "mulaijs" untuk diskon 75 ribu!
Edit data di dalam form Modal Bootstrap
Buat para master sekalian, saya lagi ada projek sebuah aplikasi berbasis web menggunakan codeigniter, nah sekarang saya lagi mentok nih pas mau edit data tapi lewat popup modal bootstrap kalo bisa sih tanpa ajax biar gampang, udah coba pake cara di web bootstrap tapi tetep aja ga muncul datanya di dalem form popup modalnya, ada mungkin ada yang bisa bantu.
untuk kode sementara buat coba-coba sebelum dimasukin di dalem kodingan.
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<a href="#myModal" class="btn btn-info btn-lg" data-toggle="modal" data-code="code" data-company="company name">
Show Modal
</a>
<div class="modal fade bs-example-modal-sm" tabindex="-1" id="myModal">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="mySmallModalLabel">Codes & Company</h4>
</div>
<div class="modal-body">
<input type="text" id="code" class="form-control" />
<input type="text" id="company" class="form-control" />
</div>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/JavaScript">
$(function () {
$("#myModal").on("show.bs.modal", function (event) {
var button = $(event.relatedTarget);
var code = button.data("code");
var company = button.data("company");
var modal = $(this);
modal.find("#code").value(code);
modal.find("#company").value(company);
});
});
sekian, semoga ada yang bisa bantu. thanks
11 Jawaban:
kalau saya sih pake jquery nama fungsi nya$.post()
kalo saya sih biasanya buat nampilih modal lewat jquery pake $('#modal').modal('show')
ouhh maksudnya mau nampilin popup modal nya??
Mungkin ini bisa bantu
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Edit data di dalam form Modal Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<table class="table table-bordered">
<tr>
<th>No</th>
<th>data yang akan ditampilkan</th>
</tr>
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "nama_database";
// Membuat Koneksi
$koneksi = new mysqli($servername, $username, $password, $dbname);
// Melakukan Cek Koneksi
if ($koneksi->connect_error) {
die("Koneksi Gagal : " . $koneksi->connect_error);
}
//Melakukan query
$sql = "SELECT * FROM nama_table";
$hasil = $koneksi->query($sql);
$no = 1;
if ($hasil->num_rows > 0) {
foreach ($hasil as $row) { ?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $row['nama_data']; ?></td>
<?php echo "<td><a href='#myModal' class='btn btn-default btn-small' id='custId' data-toggle='modal' data-id=".$row['id'].">Detail</a></td>"; ?>
</tr>
<?php
$no++;
}
} else {
echo "0 results";
} $koneksi->close();
?>
</table>
</div>
</div>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Detail Barang</h4>
</div>
<div class="modal-body">
<div class="fetched-data"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Keluar</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function (e) {
var rowid = $(e.relatedTarget).data('id');
//menggunakan fungsi ajax untuk pengambilan data
$.ajax({
type : 'post',
url : 'detail.php',
data : 'rowid='+ rowid,
success : function(data){
$('.fetched-data').html(data);//menampilkan data ke dalam modal
}
});
});
});
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
Mungkin gak sesuai perintah gak make ajax tapi disini saya pake itu
<?php
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "nama_database";
// membuat koneksi
$koneksi = new mysqli($servername, $username, $password, $dbname);
// melakukan pengecekan koneksi
if ($koneksi->connect_error) {
die("Connection failed: " . $koneksi->connect_error);
}
//menangkap parameter yang dikirimkan dari detail.php
$id = $_POST['id'];
$nama_data = $_POST['nama_data'];
//perintah untuk melakukan update
//melakukan update data berdasarkan ID
$sql = "UPDATE barang SET namadata = '$namabarang' WHERE id=$id";
if ($koneksi->query($sql) === TRUE) {
//jika berhasil tampil ini
echo "Data Berhasil Diubah"."</br>";
echo "<a href='bootstrap.php'>Kembali Ke Halaman Depan</a>";
} else {
// jika gagal tampil ini
echo "Gagal Melakukan Perubahan: " . $koneksi->error;
}
$koneksi->close();
?>
dibagian terahir itu mestinya val() bukan value(), ingat agan pakai jquery
modal.find("#code").value(code);
modal.find("#company").value(company);
mestinya
modal.find("#code").val(code);
modal.find("#company").val(company);
@adityarizki17 kalau kata ane sih beda... sesuai penggunaan nya.. kalau ga salah misal nya di javascript biasa untuk merubah value tulis .value = "yang ingin di gantikan", nah kalau di jquery .val("asdas")
jadi sesuai di gunain nya di mana.. karena .val() / value() itu sebuah fungsi, kalau kita salah panggil fungsi ya ga akan jalan.. misal kita mau nyuruh orang dengan nama tugas / petugas nya tukang sapu, tapi tukang sapu nya ga ada, maka apa yang terjadi?? ya perintah kita yang manggil tukang sapu ga akan jalan2 orang tukang sapunya aja ga ada :V
terimakasih, setahu saya pas belajar js itu value tapi ternyata setelah masuk jquery berubah disingkat val, terimakasih @sukmah
mungkin modal bootstrap ane ga jalan gara-gara numpuknya javascript didalem halaman web ane. cz memang baru trial and error. Dan cara terakhir ya terpaksa haruus menggunakan ajax. thanks buat semua bantuannya.