Edit in place med AJAX

Som jeg skrev for i posten " [Webcrawler](https://www.simon-jensen.io/Webcrawler.html “Læs 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 AJAX, denne gang handler det om en lille fed feature - Edit in place.

Som jeg skrev for ikke så længe siden i posten " [Webcrawler](https://www.simon-jensen.io/Webcrawler.html “Læs 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 AJAX, denne gang handler det om en lille fed feature - Edit in place.

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.

For at benytte scriptet, skal du indsætte script-filerne i -sektionen på dig site:

Meget hurtigt fortalt så benytter man Java functionen getElementById() til at hente indholdet (teksten) fra et forudbestemt id/div, hvorefter dette id/div (kunne være tekst…) skiftes ud med et tekst… som vi kan redigere i.

AJAX delen kommer ind i billedet når vi skal gemme vore  tekst, og dette er sådan set det eneste du skal holde for øje, hvis du vil implementerer denne feature på dit site.

I filen editinplace.js findes funktionen saveChanges(obj). Det er i denne funktion du skal definerer hvilken fil der foretage den egentligt save-funktionalitet. Der findes 2 variabler: url og pars. url skal indeholde filnavnet på filen der foretager ændringer, og pars skal indeholde de paramentre filen skal modtage for at gøre dette. Efter de to variabler er defineret benytter man AJAX til at kalde filen og gemmer indholdet (f.eks. i en database) - Mere er der faktisk ikke i det. Men det er jo også lækker!

Note: En sidste bemærkning i forbindelse med din save-fil. Da jeg implementerede edit in place, fandt jeg ret hurtigt ud af at få scriptet til at skifte mit div ud med et textarea, det var heller ikke svært at finde ud af at scriptet skulle benytte en speciel fil for at kunne gemme, det er jo helt op til en selv, hvad man vil gøre med det indhold man ændre. Herefter, og det står faktisk i bunden af artiklen på 24ways, skulle vi jo også gerne se ændringerne. Det tog lidt tid før jeg kom frem til det - skulle bare have læst artiklen færdig - men efter at du har gemt dine ændringer, skal du huske at udskrive dem igen! Som 24ways gør det:

Tadaaa … Dette er edit in place, en fed lille feature. Du kan download den version jeg har brugt herunder: o Download “Edit in place with AJAX”.