U ovom delu ćemo napisati malu Ajax aplikaciju, koja omogućava korisniku da ocenjuje nešto, baš kao i ona koja se vrši na YouTube.com.

Treba nam neki serverski kod za to. Naš primer koristi php datoteku koja čita "rating" parametar i vraća ocenu i prosečnu ocenu. Pogledajte rate.php za server-side kod.

<?php
define('STORE', 'ratings.dat');
function put_contents($file,$content) {
    $f = fopen($file,"w");
    fwrite($f,$content);
    fclose($f);
}
if(isset($_REQUEST["rating"])) {
    $rating = $_REQUEST["rating"];
    $storedRatings = unserialize(file_get_contents(STORE));
    $storedRatings[] = $rating;
    put_contents(STORE, serialize($storedRatings));
    $average = round(array_sum($storedRatings) / count($storedRatings), 2);
    $count = count($storedRatings);
    $xml = "<ratings><average>$average</average><count>$count</count></ratings>";
    header('Content-type: text/xml'); 
    echo $xml;
}
?> 

Ne želimo da ovaj primer radi bez Ajax-a, iako je moguće, zato smo napravili potrebna obeležja s jQuery i dodali ih u kontejner div s ID "rating".

$(document).ready(function() {
   // generiše obeležje
   $("#rating").append("Please rate: ");
   
   for ( var i = 1; i <= 5; i++ )
     $("#rating").append("<a href='#'>" + i + "</a> ");
   
   // dodaje obeležje u kontejner i dodaje click handlers sidru
   $("#rating a").click(function(e){
     // stop normal link click
     e.preventDefault();
     
     // šalje zahtev
     $.post("rate.php", {rating: $(this).html()}, function(xml) {
       // format i rezultati
       $("#rating").html(
         "Hvala za ocenu, prosečna ocena je: " +
         $("average", xml).text() +
         ", number of votes: " +
         $("count", xml).text()
       );
     });
   });
 }); 

Ovaj deo generiše pet sidro elemenata i dodaje ih u kontejner sa id "rating". Nakon toga, za svako sidro unutar kontejnera, dodat je klik handler. Kada se klikne sidro, zahtev je poslat u rate.php sa sadržajem sidra kao parametar. Rezultat vraća kao XML potom dodaje u kontejner, zamenjujući sidra.

Ukoliko nemate web server sa PHP-om instaliran na vašem kompjuteru, možete pogledati online primer.

Više dokumentacije za Ajax jQuery metode se mogu naći ovde ili na Visual jQuery.

Vrlo uobičajeni problemi koji se javljaju kod učitavanja sadržaja Ajax-om je ovo: Kad dodajete event handlers u svoj dokument koji se takođe primjenjuju na učitani sadržaj, morate primeniti te handlers tek nakon učitavanja sadržaja. Da biste sprečili dupliranje koda, ovo možete preneti na funkciju. Primer:

function addClickHandlers() {
   $("a.remote", this).click(function() {
     $("#target").load(this.href, addClickHandlers);
   });
 }
 $(document).ready(addClickHandlers); 

Sada se addClickHandlers zove jednom kada je DOM spreman, a zatim svaki put kad korisnik klikne na link s class remote i kada se sadržaj učita.
Zapamtite $("a.remote", this) upit, je prošao kao kontekst: Za dokument ready event, ovo se odnosi na dokument, zato se pretražuje ceo dokument za sidra s class remote. Kada se addClickHandlers koristi kao poziv na load() ovo se odnosi na različite elemente: Na primer, element sa ID target-om. Ovo sprečava da se više puta za redom može izvršava click event na istom linku, što može da uzrokuje grešku.
Još jedan problem sa zajedničkim callbacks su parametri. Naveli ste vaš poziv, ali je potrebno da prođe još jedan dodatni parametar. Najjednostavniji način za postizanje ovoga je da se poziv ugradi unutar druge funkcije:

// get some data
 var foobar = ...;
 
 // specify handler, it needs data as a paramter
 function handler(data) {
   //...
 }
 
 // add click handler and pass foobar!
 $('a').click(function(){
   handler(foobar);
 });
 
 // if you need the context of the original handler, use apply:
 $('a').click(function(){
   handler.apply(this, [foobar]);
 }); 

Sa Ajax-om možemo pokriti dosta od "Web 2,0". Sada kada smo pogledali neke osnove Ajax-a, možemo dodati neke jednostavne efekte i animacije na stranici.
Zanimljivi linkovi za ovo poglavlje:

• jQuery Ajax Documentation
• jQuery API
• ThickBox

 

Animiraj me: Korišćenje efekata

Jednostavne animacije sa jQuery se mogu postići sa show() i hide()

 $(document).ready(function(){
   $("a").toggle(function(){
     $(".stuff").hide('slow');
   },function(){
     $(".stuff").show('fast');
   });
 });

Možete napraviti bilo koju kombinaciju animacije sa animate() npr. "slide fade":

$(document).ready(function(){
   $("a").toggle(function(){
     $(".stuff").animate({ height: 'hide', opacity: 'hide' }, 'slow');
   },function(){
     $(".stuff").animate({ height: 'show', opacity: 'show' }, 'slow');
   });
 });

Većina "fensi" efekata može se postići uz pomoć plugin kolekcije. Ovaj sajt nudi primere i dokumentaciju.

Iako je interface na vrhu jQuery plugin liste, postoje i mnoge druge. Sledeći deo pokazuje kako koristiti tablesorter plugin.

Zanimljivi linkovi za ovo poglavlje:

• jQuery Effects Documentation
• Interface plugin

 

Sortiraj me: Korišćenje tablesorter plugin-a

Tablesorter plugin omogućava sortiranje tabela na strani klijenta. Ovde ćemo prikazati primer kojim uključujemo jQuery, plugin i gde govorimo plugin-u koju tabelu želimo da sortiramo.

Da biste probali ovaj primer morate skinuti plugin tablesorter i dodati ovaj red u starterkit.html (ispod jquery include):

<script src="/jquery.tablesorter.js"></script>

Nakon uključenja, plugin možete zvati ovako:

 $(document).ready(function(){
   $("#large").tablesorter();
 });

Klikom na zaglavlje tabele možete videti soritiranje u rastućem redosledu za prvi klik i opadajućem za drugi.

Tabela može da koristi neke obeleživače redova, možemo ih dodati upotrebom određenih opcija:

$(document).ready(function() {
$("#large").tablesorter({
// striping looking
widgets: ['zebra']
});
});

Postoji više primera i dokumentacije o raspoloživim opcijama na tablesorter početnoj stranici.

Većina dodataka može se koristiti i na sledeći način: Uključite plugin datoteku i pozovite plugin metodu na nekom elementu, prolazeći neka opciona podešavanja za prilagodjavanje plugina.

Ažuran popis dostupnih dodataka mogu se naći na jQuery Plugin sajtu.

Ukoliko često koristite jQuery, moguće je da ćete koristiti i neki vaš kod kao plugin, bilo da ga koristite samo za sebe, firmu ili ga možete podeliti i sa zajednicom. U sledećem poglavlju daćemo neke savete o tome kako napraviti plugin.

Zanimljivi linkovi za ovo poglavlje:

• Plugins for jQuery
• Tablesorter Plugin