Live Search med Prototype JS og PHP

Update Update 28/04-08: Live-search understøtter nu ÆØÅ - download ny version i slutningen af denne post!

I forbindelse med det sidste nye redesign, har jeg oprettet en "Live search". Nåhhh ja, den er måske ikke så live som en definition vil have det - men det er da en fed feature - og funktionaliteten bag den, vil jeg da gerne dele med jer.

Live SearchDenne post består således af en gennemgang, af de vigtigste punkter i implementeringen, det være sig lidt XHTML, CSS, Javascript samt PHP.

I slutningen af posten, kan du desuden downloade en lille demo-version af funktionen.

For at benytte koden i denne post kræves det, at du har downloaded og inkluderet Javascript frameworket Prototype JS, samt effektbiblioteket script.aculo.us. Disse skal inkluderes i sidens <head>-sektion, som med et hvert andet Javascript.

Tags javascript  prototype  live search  xhtml  css  php  ajax  script.aculo.us 

Read more ...

AJAX og Æ,Ø,Å.

I den tid jeg har arbejdet hos Reklamebureauet ReFocus A/S, har min interesse for AJAX for alvor taget til. Med en god blanding af prototype og Script.aculo.us og andre visuelle scripts, har vi mulighed for at lave hjemmesider, der ligner og fungerer mere og mere som "almindelige" dekstop applikationer - Men der er et catch eller flere!

Et af de første problemer jeg hørte om, var problemet med browsers back-buttons, hvilket der heldigvis findes en løsning på - og lad os ikke glemme, at dette faktisk kun finder sted, når vi bruger AJAX til navigation, eller fjerner/opdaterer et element, så det gamle indhold forsvinder.

Alex Bosworth har skrevet et par artikler om diverse problemer, som folk enten overser eller ikke kender til - Meget interessant og relevant læsning, for folk der vil igang, eller er igang med AJAX.

AJAX og Æ,Ø,Å

I de to nævnte artikler ovenfor, kan du læse meget mere om diverse små problemer. Jeg har i mellemtiden fundet mit eget problem - og det er der nu mange der har, hvis man googler det lidt. Problemet er Æ, Ø, Å og muligvis også andre specielteng i forbindelse med request i AJAX.

I resten af denne post vil jeg tage udgangspunkt i at lave et request med prototypes AJAX objekt.

Tags ajax  xml  javascript  prototype 

Read more ...

Edit in place med AJAX

Som jeg skrev for i posten "Webcrawler", har jeg måtte se mig nødsaget til at implementerer et spam-filter på siden, da en ubehøvlet edderkop har fundet vej til mit domæne. I den process fik jeg endnu engang lejlighed til at lege lidt med , denne gang handler det om en lille fed feature - Edit in place.

Som jeg skrev for ikke så længe siden i posten "Webcrawler", har jeg måtte se mig nødsaget til at implementerer et spam-filter på siden, da en ubehøvlet edderkop har fundet vej til mit domæne. I den process fik jeg endnu engang lejlighed til at lege lidt med , denne gang handler det om en lille fed feature - Edit in place.

Edit in place effekt med AJAX.Alle der har oprettet en konto hos Flickr, har leget med fænomenet. Som animationen her til højre viser, får vi, med et enkelt klik på en tekst, mulighed for at redigerer denne og gemme ændringer - og dette helt uden at skulle reloade siden!

Hvordan virker det: Edit in place benytter sig af Prototype Frameworket (prototype.js), som er et Javascript framework alle kan hente og benytte. Derudover skal du benytte selve script-filen editinplace.js og hvis du vil editinplace.css (Download en samlet .zip i bunden af denne post). Jeg har ikke helt kunne finde ud af hvem der oprindeligt udgav scriptet, men 24ways.org har skrevet en udemærket code-walk-through, som forklare i detaljer hvad der sker bag scenen. Derudover har Joseph Scott skrevet denne side, som lader dig downloade scriptet i forskellige version.

Tags ajax  flickr  spam  prototype 

Read more ...

1