JQuery Kullanarak Animasyonlu AJAX Kayıt Silme

• 14-12-2016
• Admin
• 5701 Okunma
• Paylaş
• Paylaş
• Paylaş

Sql veritabanı

CREATE TABLE IF NOT EXISTS `my_table` (
  `item_id` int(11) NOT NULL AUTO_INCREMENT,
  `title` varchar(255) NOT NULL DEFAULT '',
  PRIMARY KEY (`item_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 AUTO_INCREMENT=11 ;



INSERT INTO `my_table` (`item_id`, `title`) VALUES
(1, 'başlık 1'),
(2, 'başlık 2'),
(3, 'başlık 3'),
(4, 'başlık 4'),
(6, 'başlık 6'),
(7, 'başlık 7'),
(8, 'başlık 8'),
(9, 'başlık 9'),
(10, 'başlık 10');

jquery-record-delete.php

if(isset($_GET['delete'])) {
include("connect.php");
$id=$_GET['delete'];
	$result = $db->query("DELETE FROM my_table WHERE item_id = '$id'");
}

index.php head içi

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

	<style type="text/css">
		.record	{ padding:10px 20px; background:#eee; border-top:1px solid #ccc; width:300px; }
		.delete	{ color:#f00; display:block; width:40px; float:right; }
	</style>

index.php head içi script

$(document).ready(function() {
	$('a.delete').click(function(e) {
		e.preventDefault();
		var parent = $(this).parent();
		$.ajax({
			type: 'get',
			url: 'jquery-record-delete.php',
			data: 'ajax=1&delete=' + parent.attr('id').replace('record-',''),
			beforeSend: function() {
				parent.animate({'backgroundColor':'#fb6c6c'},300);
			},
			success: function() {
				parent.slideUp(300,function() {
					parent.remove();
				});
			}
		});
	});
});

index.php body içi

include("connect.php");
$query = $db->query("SELECT * FROM my_table ORDER BY title ASC", PDO::FETCH_ASSOC);
foreach( $query as $row ){	
	echo '<div class="record" id="record-',$row['item_id'],'">
				<a href="?delete=',$row['item_id'],'" class="delete">Delete</a>
				<strong>',$row['title'],'</strong>
			</div>';
}