Brisanje sadržaja je jednostavna radnja koju ima svaka web aplikacija. Kako je vrlo česta, a opet jednostavna, ona je najbolji izbor za kretanje u učenje AJAX-a.

AJAX po definiciji je spoj više tehnologija (asynchronous JavaScript and XML) koji omogućuju slanje i primanje zahtjeva sa servera bez osvježavanja stranice. Postao je vrlo popularan sa takozvanim Web 2.0 aplikacijama, te danas gotovo da i nema web stranica koje nemaju neki oblika AJAX-a ukomponiran. Kod korištenja AJAX-a treba biti oprezan i provjeriti kako se aplikacija ponaša kad dođe korisnik sa isključenim javascriptom. On naravno, ne smije ostati zakinut za funkcije, koje i dalje moraju raditi na stari način.

Za ovaj primjer ćemo koristiti JQuery s kojim se ovakve radnje svode na par linija koda.

Krećemo sa definiranjem par varijabli koje nam trebaju za korištenje našeg malog javascripta.

var commentContainer = $(this).parent();
var id = $(this).attr("id");
var string = 'id='+ id ;

Varijabla commentContainer sadržava roditeljski element od gumba Obriši. Ovaj podatak nam treba pošto moramo sakriti cijeli div, a ne samo gumbić. Dalje, varijabla id sadrži vrijednost id attribut-a samog linka. On nam mora biti jedinstveni identifikator određenog polja u bazi, što je najčešće primarni ključ. Zadnja varijabla string je ustvari ono što šaljemo serveru kao zahtjev preko POST-a.

Cijela javascript funkcija izgleda ovako:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

$(function() {
	$(".delete").click(function() {
		$('#load').fadeIn();
		var commentContainer = $(this).parent();
		var id = $(this).attr("id");
		var string = 'id='+ id ;
 
		$.ajax({
			type: "POST",
			url: "delete.php",
			data: string,
			cache: false,
			success: function(){
				commentContainer.slideUp('slow', function() {$(this).remove();});
				$('#load').fadeOut();
			}
		});
		return false;
	});
});

Dakle, vidimo da se prilikom klika na element klase delete poziva datoteka delete.php i preko POST-a se šalje string. Ukoliko je zahtjev uspješno poslan brišemo cijeli div sa slideup efektom. Datoteka delete.php je zadužena za slanje upita dalje na bazu podataka za brisanjem redka. Ona je sada prazna pošto je nemoguće napraviti neki općeniti model da radi svima, ali sve što trebate tamo napraviti je preuzeti iz POST-a varijablu id te napraviti query na svoju bazu koji će izbrisati određeni redak u tablici.