Korišćenje Ajax-a

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

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

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

// 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]);
 }); 

• 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