Animované mazání záznamu AJAX pomocí jQuery

Jsem velkým fanouškem metody WordPressu pro mazání jednotlivých článků. Kliknete na odkaz odstranit, položka nabídky se rozsvítí červeně a položka zmizí. Zde je návod, jak této funkce dosáhnout pomocí JavaScriptu jQuery.

Zobrazit ukázku

PHP – obsah a záhlaví

Následující úryvek se nachází v horní části stránky:

if(isset($_GET['delete'])) {
	$result = mysql_query('DELETE FROM my_table WHERE item_id = '.(int)$_GET['delete'],$link);
}

K zobrazení záznamů se používá následující:

$result = mysql_query('SELECT * FROM my_table ORDER BY title ASC',$link);
while($row = mysql_fetch_assoc($result)) {
	echo '
				Delete
				',$row['title'],'
			';
}

JavaScript jQuery

$(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();
				});
			}
		});
	});
});

Ke každému odkazu přidáme událost kliknutí, která spustí požadavek AJAX. Během požadavku převedeme obsahující prvek na červené pozadí. Když požadavek AJAX vrátí odpověď „úspěch“, stáhneme prvek z obrazovky.

Zobrazit ukázku

Jak byste to použili? Sdílejte!