Postingan lainnya
cara edit dengan ajax javascript php
mohon bantuanya sedikit kawan" saya mengalamin kendala dalam edit nya,sudah 2hari googling masih blm dapat solusinya kawan
$conn = mysqli_connect('localhost','root','','latihan_ajax');
<?php
include 'config.php';
$sql = mysqli_query($conn,"SELECT * FROM latihan_satu");
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<title>JS - Onclick</title>
</head>
<body>
<div class="container mt-5 mb-5">
<div class="row justify-content-center">
<div class="col-8">
<div class="card rounded-0">
<div class="card-header font-weight-bold rounded-0"><h3 class="mb-0">Data Provinsi</h3></div>
<div class="card-body p-0 rounded-0">
<table class="table table-striped table-hover rounded-0 p-0 m-0">
<thead>
<tr>
<th></th>
<th>NO</th>
<th>NAMA PROVINSI</th>
</tr>
</thead>
<tbody>
<?php $nomor = 1; while ($row = mysqli_fetch_array($sql)) { ?>
<tr id="tr<?php echo $row['id'] ?>">
<td class="pl-4">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary btn-sm rounded-0" onclick="lihat(<?php echo $row['id'] ?>,'<?php echo $row['city'] ?>');">lihat</button>
<button type="button" class="btn btn-warning btn-sm rounded-0" onclick="edit(<?php echo $row['id'] ?>,'<?php echo $row['city'] ?>');">ubah</button>
<button type="button" class="btn btn-danger btn-sm rounded-0" onclick="hapus(<?php echo $row['id'] ?>,'<?php echo $row['city'] ?>');">hapus</button>
</div>
</div>
</td>
<td><?php echo $nomor ?></td>
<td id="text<?php echo $row['id'] ?>"><?php echo $row['city'] ?></td>
</tr>
<?php $nomor++; } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal">
<div class="modal-dialog" role="document">
<div class="modal-content rounded-0">
<div class="modal-header">
<h4 class="modal-title">Modal title</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="modal-body rounded-0">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-sm rounded-0" data-dismiss="modal" id="close">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script type="text/javascript">
function lihat(id, nama_provinsi) {
$("#modal").modal({
show:true
});
$(".modal-title").text("#" + id);
$(".modal-body").html("<p>" + nama_provinsi + "</p>");
}
function hapus(id, nama_provinsi) {
$("#modal").modal({
show:true
});
$(".modal-title").text("Data ID #" + id);
$(".modal-body").html("<p> Apakah Anda yakin ingin menghapus data " + nama_provinsi + "?</p>");
$('<button type="button" class="btn btn-success btn-sm rounded-0" data-dismiss="modal" id="yes" onclick="remove('+id+');">Ya Hapus Data Ini</button>').insertBefore('#close');
}
function edit(id, nama_provinsi) {
var attr = $(document.createElement("input")).attr({"type":"text","value":nama_provinsi, 'data-id':id});
$('#text'+id).html(attr);
$('#tr'+id).find('.btn-group').html('<button type="button" id="tombol_'+id+'" class="btn btn-success btn-sm rounded-0" onclick="change()">Save</button>');
}
$(document).ready(function() {
$(".close, #close").on('click', function(event) {
event.preventDefault();
$("#yes").remove();
});
});
function remove(id) {
$.ajax({
url: 'action.php',
type: 'POST',
data: {post_id: id, type: 'delete'},
success: function(str) {
$('#tr'+id).closest('tr').find('td').fadeOut(1000,
function(){
$('#tr'+id).parents('tr:first').remove();
}
);
$("#yes").remove();
$("#modal").modal('toggle');
}
});
}
function change(id, nama_provinsi) {
$.ajax({
url: 'action.php',
type: 'POST',
data: {city_name: name, delete_id: id, type:'update'},
success: function(data){
if(data == 'success'){
alert("succes")
}else{
alert("fail")
}
}
});
}
</script>
</body>
</html>
<?php
include 'config.php';
if ( isset($_POST['type'])=='delete' ) {
$id = $_POST['post_id'];
mysqli_query($conn,"DELETE FROM latihan_satu WHERE id= $id");
}else if(isset($_POST['type'])=='update'){
$id = $_POST['delete_id'];
$name = $_POST['city_name'];
mysqli_query($conn, "UPDATE latihan_satu SET city='$name' WHERE id=$id");
}else {
header('location:latihan1.php');
}
?>
2 Jawaban:
coba ini <pre> include 'config.php';
if ( isset($_POST['type'])=='delete' ) { $id = $_POST['post_id']; if(mysqli_query($conn,"DELETE FROM latihan_satu WHERE id= $id")) echo "success"; else echo "fail"; }else if(isset($_POST['type'])=='update'){ $id = $_POST['delete_id']; $name = $_POST['city_name']; if(mysqli_query($conn, "UPDATE latihan_satu SET city='$name' WHERE id=$id")) echo "success"; else echo "fail"; }else { header('location:latihan1.php'); } </pre>
coba dilihat errornya menggunakan console.log
di scriptnya:
<pre>
function change(id, nama_provinsi) {
$.ajax({
url: 'action.php',
type: 'POST',
data: {city_name: name, delete_id: id, type:'update'},
success: function(data){
console.log(data)
}
});
});
</pre>
dan di phpnya :
<pre> include 'config.php';
if ( isset($_POST['type'])=='delete' ) { $id = $_POST['post_id']; if(mysqli_query($conn,"DELETE FROM latihan_satu WHERE id= $id")) echo "success"; else echo "fail"; }else if(isset($_POST['type'])=='update'){ $id = $_POST['delete_id']; $name = $_POST['city_name']; $edit = mysqli_query($conn, "UPDATE latihan_satu SET city='$name' WHERE id=$id"); if($edit) echo "success"; else var_dump($edit); }else { header('location:latihan1.php'); } </pre>
