Rahinaa.biz / Lehti / Ajaxia testaillessa
Ajaxia testaillessa
Julkaistu: 8. tammikuuta 2008
Rakentelin taas tänne Rahinan ja rähinen puolelle pikku-kivaa Ajaxin avulla, tosin tähän liittyy myös jonkin verran PHP:ta. Lopputuloksena saamme tuon uuden valikon mikä näkyy sivuston yläreunassa – tietysti vain jos teillä on JavaScript tälle sivustolle sallittuna (ja jos sivustoa ei ole muutettu, tulevaisuuden huomioiden), vaihtoehto-valikko on kuitenkin kehitteillä. Mutta miten tämä on tehty?
Aluksi on tietysti luotu tarvittavat tiedostot jotka makaavat tämän serverin turvissa. Loin myös tämän tuottamiseen pluginin joka simppelisti listaa soitetut musatiedostot ja työntää vähän lisääkin tietoa peliin. Tosin tämä on vielä vähän keskeneräinen.
Aluksi tämän kehittämiseen tarvitsemme jonkin Javascript kirjastoista, minä valitsin omakseni Prototype.js snipetin joka on tähän asti toiminut kuin unelma. Emme edes tarvitse hommaan Protypen kanssa käytettävää Scriptaculousta joka mahdollistaa erinäisten efektien käyttämistä Protypen kanssa.
Aluksi kuitenkin tarvitsemme tiedoston, jota kutsua Ajaxilla, kuten /tippukoodit/?tippu=nytsoi – tämä vastaa nytsoi tiedostosta, jota kirjoittamani nytsoi plugini Textpatternille suoltaa.
Sitten tarvitsee meidän kutsua Prototypea sivuston head-osiosta käsin, tämä onnistuu helposti vain laittamalla sinne:
<script type="text/javascript" src="/js/prototype.js"></script>
Sen jälkeen tarvitsemme erillisen JavaScript-tiedoston jonne laitamme maagisen skriptin joka käsittelee Ajaxia:
var url = '/tippukoodit/'; // URL serverillä
var pars = 'tippu=nytsoi'; // GET-parametrit
var target = 'nyt-soitossa'; // Elementti jonne koodi sijoitetaan
var myAjax = new Ajax.Updater(target, url, {method: 'get',parameters: pars}); // Tehdään Ajax päivitys
Tämä tuo sisällön suoraan sivustolle ja lisää sen <div id="nyt-soitossa"></div>-elementin sisälle, jonka lisäämme jonnekin sivustolle – toisin sanoen sinne minne haluamme lisätä Nyt Soi-sivun sisällön.
Mutta nythän tuo elementti on auki ja näkyvillä, tämän blogin skeississä se veisi puolet näyttöruudusta. Sen takia tarvitsemme vähän magiaa – tähän on kaksi tietä: joko CSS tai JavaScript, jonka avulla lisäämme #nyt-soitossa elementtiin display: none; määritelmän.
Prototypen kanssa JavaScriptillä luotuna tämä näyttäisi suurinpiirtein tältä:
$(nyt-soitossa).setStyle({display: none});
Minä kuitenkin päätin käyttää inline-CSS:ää, sillä en tarvitse objektia mihinkään muuhun kuin slide-valikkoihin, joten sain aikaan tällaista:
<div id="nyt-soitossa" style="display: none;"><!-- Tänne ilmestyy Ajaxin sisältö --></div>
Sitten tarvitsemme jotain millä näyttää tämä kaikki. Parsetin tuonkin Ajaxin kautta, jotta ne joilla ei JavaScript ole sallittuna, eivät myöskään tuota valikkoa näe. Yksin kertaisettuna kuitenkin linkki tuon elementin näyttämiseen ja piilottamiseen näyttää ratkaisussa tältä:
<a href="#nyt-soitossa" onclick="Element.toggle('nyt-soitossa'); return false;">Nyt soitossa</a>
Olisin voinut laittaa togglerin kuitenkin myös oikeaan JavaScript tiedostoon, sillä inline-JS on oikeastikkin väärä tapa nykyaikana. Koska kuitenkin navigaatio lisätään Ajaxin avulla, ajattelin että tuo on vähän sama. Kukaan ei sitä näe selaimissaan, saati sitten tuo on helpoin tapa nopeaan toimintaa – Ajaxissa kuitenkin on omat ongelmansa.
Seuraavalla kerralla jaan tietoa itsessään pluginista joka tekee tippukoodit mahdolliseksi.
Kommentointi suljettu [2] Tagit: ajax, js
Petri kirjoitti 9. tammikuuta 2008:
Yes, yes. Tällaisia lisää. Tämä on oikeastaan hyödyllisin blogimerkintä minkä olen lukenut pitkään aikaan!
Gocom kirjoitti 10. tammikuuta 2008:
Kiitoksia Petri :-)
Kun vielä pääsisi eroon Futuron ongelmasta eli siitä että sivusto välillä kaatuu Ajaxin lataamisen aikana, jolloin tuota yläpalkkia ei ilmesty vaikka muu sivusto toimisi – Ajaxihan latautuu muun sivun jälkeen.
No, se on kyllä täysin Futuronin vika :-)
Tämän bloggauksen kommentointi on suljettu, sen oltua auki 8. tammikuuta 2008 lähtien kuusi viikkoa. Tuona aika merkintä sai 2 kommenttia. Merkinnän kestolinkki: http://www.rahinaa.biz/lehti/ajaxia-testaillessa
Elämä on pääasiassa kahvia, taiteilua, ohjelmointia, musaa, tunteita, nauttimista, aurinkoa, kävelemistä, kokkaamista, elokuvia hitusella kauneutta, sekä vastakohtaista rumuutta.
Jukka, 19,
web developer,
haahuilija,
musafriikki