Eftersom jag inte fick några kommentarer på min utmärkta SQL-skola så tänkte jag försöka hitta något lite mer hippt och inne att skriva om så här till påskhelgen. 😉
Vad passar då bättre än en artikel om det enormt härliga JavaScript-biblioteket jQuery som på egen hand gjort att klient-baserad programmering på webben har gått från att vara timtal av frustration och nya gråa hårstrån funna under varje kaffepaus, till att frammana mentala bilder av guld, rökelse och myrra.
För att göra det hela ännu roligare så tänkte jag visa hur man på ett enkelt sätt kan använda jQuery för att göra AJAX-baserade sökningar mot en webservice som vi lagt upp så att ni har något att testa mot.
För att använda jQuery så börjar man med att lägga till följande kodsnutt i <head>-sektionen av sitt HTML-dokument:
<script type="text/javascript" src="/js/jquery/jquery-1.2.1.min.js"> </script>
En av de fina sakerna med jQuery är alla plugins man kan nyttja. I vårt fall kommer vi använda en plugin som heter jquery.suggest, vilken kräver att man också inkluderar jquery.dimensions.js från jQuery UI, som är ett underprojekt som tillhandahåller en rad med användbara komponenter för att bygga användargränssnitt, så vår kodsnutt för att inkludera allt godis ser ut som:
<link rel="stylesheet" type="text/css" href="/js/jquery/jquery.suggest.css" title="" media="screen" /> <script type="text/javascript" src="/js/jquery/jquery-1.2.1.min.js"> </script> <script type="text/javascript" src="/js/jquery/jquery.ui-1.0/jquery.dimensions.js"> </script> <script type="text/javascript" src="/js/jquery/jquery.suggest.js"> </script>
För att sedan göra om ett sökfält som har id=”domainsearch” och finns någonstans på vår sida till en AJAX-sökruta så använder vi följande kodsnutt:
$(document).ready(function() {
$("#domainsearch").suggest("/search.php", {
onSelect: function() {
domain = this.value.replace(/^([^:]*):.*$/, "$1");
status = this.value.replace(/^[^:]*:\s*(.*)$/, "$1");
if (status == "ledig") {
document.location.href =
'https://www.loopia.se/bestall/bestalldoman/'
+ domain;
}
}
});
});
Detta exempel visar två koncept som är viktiga i jQuery. Först och främst så är det en bra vana att man lägger till den funktionalitet som man vill utöka sidan med på formen:
$(document).ready(function() {
... användbar funktionalitet här
});
När man gör på detta sätt så körs inte koden förrän sidan är helt färdigladdad, vilket oftast är önskvärt.
Det andra konceptet som visas upp är användandet av jQuery’s selector-funktionalitet för att välja vilka element som en eller flera funktioner ska appliceras på.
I detta fallet väljer vi att applicara funktionen suggest() på alla element som matchar (med CSS-syntax, se fullständig dokumentation här) #domainsearch, vilket betyder ”alla element med id satt till domainsearch”.
Funktionen suggest (vilket är vad jquery.suggest lägger till) tar en URL som ska anropas med XMLHttpRequest i bakgrunden samt ett antal parametrar, en av vilka är onSelect. onSelect anger vilken JavaScript-funktion som ska anropas när användaren har valt en rad ur sökresultatet.
Sökresultatet består av utmatningen från den anropade URL:en. Utmatningen ska ha en sökträff per rad.
Vi väljer att returnera sökresultat på formen:
doman.se: ledig doman.com: upptagen doman.nu: ledig
… och anger sedan i onSelect-funktionen att man ska skickas till vår beställningssida med domänen förvald om man väljer en ledig domän från sökresultaten.
För att mata denna lilla kodsnutt med data så använder vi oss av följande PHP-kod (sparad som search.php):
<?
try {
$client = new
SoapClient('http://ws.loopia.se/LoopiaPublicServices.wsdl');
$results = $client->search_domain_popular_tlds($_GET['q']);
if ($results && count($results) > 0) {
foreach ($results as $result) {
if ($result->result == "FREE") {
echo $result->domain . ": ledig\n";
} else {
echo $result->domain . ": upptagen\n";
}
}
}
} catch (Exception $e) {
// Ignore exceptions, this simply means that no
// results will be echoed to the user.
}
?>
Ni kan ladda ned ett fullständigt exempel som bör fungera om ni bara packar upp det och laddar upp det i public_html för en domän eller subdomän hos oss.
Exemplet hittar ni också på http://sigint.se/.
Vad kan man mer göra med jQuery då? Ett vanligt användningsområde för JavaScript är att dölja och visa element när användaren gör något, t ex klickar på en knapp.
Istället för att böka med kod som:
var element = document.getElementById('someid');
if (element != null) {
element.style.display = "none";
}
… och kämpa för att sedan få den att fungera i alla moderna webbläsare så använder man istället:
$("#someid").hide();
$("#someid").show();
$("#someid").toggle();
… med mera.
På så sätt kan man naturligtvis även använda andra selectors som t ex för class och mycket annat användbart.
Så gott som alla funktioner i jQuery, inklusive de ovan, returnerar ett nytt jQuery-object – så det går bra att kedja anropen om man vill göra flera saker med samma element. T ex:
$("#someid").fadeIn("slow").fadeOut("slow");
Vi har inkluderat lite test-animationer i exempelfilen ovan.
Hoppas att detta gett er lite kul inspiration att leka med över ledigheten.
Glad påsk!
Grymt! Jobbar själv med jQuery och ibland mootools ( http://mootools.net/ ).
Jag måste dock säga att taggarna i ser lite knäppa ut.
T.ex.
href=”/js/jquery/jquery.suggest.css” title=”” media=”screen” />
border väl vara
Annars, bra jobbat!
//wally
Vår eminente redaktör råkade köra över taggarna med åkgräsklipparen. Nu ska det vara fixat.
Hippt och bra. Snart kanske det kommer en Loopia-plugin? 😉
Grymt! Tack, kul med lite förklaring av jQuery på svenska!
Great work Jimmy, jQuery looks interesting.
Prototype and Scriptaculous were enough for the job, but recently I’m experimenting with Ext JS (http://extjs.com), looks like very powerful JavaScript library…
P.S. Sorry for my non svenska comment.