Sử dụng delegate hoặc on làm sống lại các thẻ (ok)

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);
?>

PreviousCommand Pattern Qua Ví Dụ Thực TếNextTop 10 : Best autocomplete jQuery and javascript plugins (ok)

Last updated