Sử dụng delegate hoặc on làm sống lại các thẻ (ok)
PreviousCommand Pattern Qua Ví Dụ Thực TếNextTop 10 : Best autocomplete jQuery and javascript plugins (ok)
Last updated
Last updated
C:\xampp\htdocs\admin\index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Quản lý chuyên mục</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/jquery.js"></script>
<script src="js/browser_center.js"></script>
<script src="js/category.js"></script>
</head>
<body>
<div id="popup-background">
<div id="popup">
<div id="table-ajax">
<div>
<h3></h3>
<img src="images/close.png" id="close" />
</div>
<form>
<table>
<tr>
<td>Tên mới</td>
<td><input type="text" id="txtname" /></td>
</tr>
<tr>
<td></td>
<td><input type="submit" class="submit" /><input type="submit" value="Thoát" id="cancel" /></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<div style="height:20px;width:100%;">Phần top</div>
<div style="height:20px;width:100%;">Phần menu</div>
<div id="table-list">
<div>
<h3>Quản lý chuyên mục</h3>
<button id="add"><span class="icon-add"></span>Thêm</button>
</div>
<table>
<tr>
<th style="width:100px;">STT</th>
<th>Chuyên mục</th>
<th style="width:100px">Edit</th>
<th style="width:100px;">Delete</th>
</tr>
<?php
require("library/config.php");
$result=mysqli_query($con,"select cate_id,cate_title from category");
$stt=1;
while($data=mysqli_fetch_assoc($result)){
echo"<tr>";
echo"<td>$stt</td>";
echo"<td>$data[cate_title]</td>";
echo"<td><a href='javascript:void(0)' data-id='$data[cate_id]' class='edit'><span class='icon-edit'></span>Edit</a></td>";
echo"<td><a href='javascript:void(0)' data-id='$data[cate_id]' class='del-ajax'><span class='icon-delete'></span>Delete</a></td>";
echo"</tr>";
$stt++;
}
mysqli_close($con);
?>
</table>
</div>
<div style="height:20px;width:100%;">Phần bottom</div>
</body>
</html>C:\xampp\htdocs\admin\js\category.php
<?php
$action = $_POST['action'];
require_once('../library/config.php');
if($action=='add-ajax') {
$cate_title = $_POST['cate_title'];
$query = "INSERT INTO category (cate_title) VALUES ('$cate_title')";
mysqli_query($con,$query);
$result=mysqli_query($con,"select max(cate_id) from category");
$data = mysqli_fetch_assoc($result);
$temp= $data['max(cate_id)'];
echo json_encode(
array(
"cate_title"=>"$cate_title",
"cate_id" => $temp
)
);
}elseif ($action=='get-data') {
$cate_id = $_POST['cate_id'];
$query = "SELECT cate_title FROM category WHERE cate_id= $cate_id";
$result = mysqli_query($con,$query);
$cate_title = mysqli_fetch_assoc($result)['cate_title'];
echo json_encode(
array(
"cate_title"=> "$cate_title"
)
);
}elseif ($action=='edit-ajax') {
$cate_id = $_POST['cate_id'];
$cate_title = $_POST['cate_title'];
$query = "UPDATE category SET cate_title='$cate_title' WHERE cate_id='$cate_id'";
echo json_encode(
array(
"cate_id"=>$cate_id,
"cate_title"=> "$cate_title"
)
);
mysqli_query($con,$query);
}
mysqli_close($con);
?>C:\xampp\htdocs\admin\js\category.js
$(document).ready(function() {
$("#popup-background").hide();
$("#add").click(function() {
$("#table-ajax h3").html("Thêm chuyên mục");
$(".submit").attr({
value: "Thêm",
id: "add-ajax"
});
$("#popup-background").fadeIn("fast");
});
$("#table-list").delegate(".edit", "click", function() {
$("#table-ajax h3").html("Chỉnh sửa chuyên mục");
$(".submit").attr({
value: "Chỉnh sửa",
id: "edit-ajax"
});
cate_id = $(this).attr("data-id");
ajax("get-data", cate_id);
$("#popup-background").fadeIn("fast");
});
$("#close, #cancel").click(function() {
$("#popup-background").fadeOut("fast");
});
$(".submit").click(function() {
action = $(this).attr("id");
if (action == "add-ajax") {
ajax("add-ajax");
} else if (action == "edit-ajax") {
ajax("edit-ajax", cate_id);
}
$("#popup-background").fadeOut("fast");
return false;
});
$("#table-list").delegate(".del-ajax", "click", function() {
if (confirm("Bạn muốn xóa dòng dữ liêu này?")) {
ajax("del-ajax", $(this).attr("data-id"));
}
return false;
});
function ajax(action, id) {
if (action == "add-ajax") {
name = $("#txtname").val();
data = "action=" + action + "&cate_title=" + name;
} else if (action == "del-ajax") {
data = "action=" + action + "&cate_id=" + id;
} else if (action == "get-data") {
data = "action=" + action + "&cate_id=" + id;
} else if (action == "edit-ajax") {
name = $("#txtname").val();
data = "action=" + action + "&cate_title=" + name + "&cate_id=" + id;
}
$.ajax({
url: "js/category.php",
type: "post",
data: data,
dataType: "json",
async: true,
success: function(kq) {
if (action == "add-ajax") {
stt = $("#table-list table tbody tr:last td:first").text();
stt++;
$("#popup-background").fadeOut("fast", function() {
$("#table-list table tbody").append(
"<tr><td>" + stt + "</td><td>" + kq.cate_title + "</td><td><a href='javascript:void(0)' data-id='" + kq.cate_id + "' class='edit'><span class='icon-edit'></span>Edit</a></td><td><a href='javascript:void(0)' data-id='" + kq.cate_id + "' class='del-ajax'><span class='icon-delete'></span>Delete</a></td></tr>"
);
$("#txtname").val("");
});
} else if (action == "del-ajax") {
$("a[data-id='" + kq.cate_id + "']").closest("tr").fadeOut("fast");
} else if (action == "get-data") {
$("#txtname").val(kq.cate_title);
} else if (action == "edit-ajax") {
$("#popup-background").fadeOut("fast", function() {
$("a[data-id='" + kq.cate_id + "']").closest("tr").find("td:eq(1)").html(kq.cate_title);
});
}
}
});
}
});Hoặc
C:\xampp\htdocs\admin\js\category.js
$(document).ready(function() {
$("#popup-background").hide();
$("#add").click(function() {
$("#table-ajax h3").html("Thêm chuyên mục");
$(".submit").attr({
value: "Thêm",
id: "add-ajax"
});
$("#popup-background").fadeIn("fast");
});
$("#table-list").on("click",".edit",function() {
$("#table-ajax h3").html("Chỉnh sửa chuyên mục");
$(".submit").attr({
value: "Chỉnh sửa",
id: "edit-ajax"
});
cate_id = $(this).attr("data-id");
ajax("get-data", cate_id);
$("#popup-background").fadeIn("fast");
});
$("#close, #cancel").click(function() {
$("#popup-background").fadeOut("fast");
});
$(".submit").click(function() {
action = $(this).attr("id");
if (action == "add-ajax") {
ajax("add-ajax");
} else if (action == "edit-ajax") {
ajax("edit-ajax", cate_id);
}
$("#popup-background").fadeOut("fast");
return false;
});
$("#table-list").on( "click", ".del-ajax",function() {
if (confirm("Bạn muốn xóa dòng dữ liêu này?")) {
ajax("del-ajax", $(this).attr("data-id"));
}
return false;
});
function ajax(action, id) {
if (action == "add-ajax") {
name = $("#txtname").val();
data = "action=" + action + "&cate_title=" + name;
} else if (action == "del-ajax") {
data = "action=" + action + "&cate_id=" + id;
} else if (action == "get-data") {
data = "action=" + action + "&cate_id=" + id;
} else if (action == "edit-ajax") {
name = $("#txtname").val();
data = "action=" + action + "&cate_title=" + name + "&cate_id=" + id;
}
$.ajax({
url: "js/category.php",
type: "post",
data: data,
dataType: "json",
async: true,
success: function(kq) {
if (action == "add-ajax") {
stt = $("#table-list table tbody tr:last td:first").text();
stt++;
$("#popup-background").fadeOut("fast", function() {
$("#table-list table tbody").append(
"<tr><td>" + stt + "</td><td>" + kq.cate_title + "</td><td><a href='javascript:void(0)' data-id='" + kq.cate_id + "' class='edit'><span class='icon-edit'></span>Edit</a></td><td><a href='javascript:void(0)' data-id='" + kq.cate_id + "' class='del-ajax'><span class='icon-delete'></span>Delete</a></td></tr>"
);
$("#txtname").val("");
});
} else if (action == "del-ajax") {
$("a[data-id='" + kq.cate_id + "']").closest("tr").fadeOut("fast");
} else if (action == "get-data") {
$("#txtname").val(kq.cate_title);
} else if (action == "edit-ajax") {
$("#popup-background").fadeOut("fast", function() {
$("a[data-id='" + kq.cate_id + "']").closest("tr").find("td:eq(1)").html(kq.cate_title);
});
}
}
});
}
});C:\xampp\htdocs\admin\js\xuly_category.php
<?php
$cate_title = $_POST['cate_title'];
require_once('../library/config.php');
mysqli_set_charset($conn,'utf8');
mysqli_query($conn,"insert into category(cate_title) value('$cate_title')");
echo $cate_title;
?>C:\xampp\htdocs\admin\js\xuly_delete_category.php
<?php
$cate_id = $_POST['cate_id'];
include_once('../library/config.php');
mysqli_query($conn,"delete from category where cate_id=$cate_id");
echo $cate_id;
mysqli_close($conn);
?>