[Blackex]

Jag har läst en del om prototype och har tänkt mig att försöka bygga någonting användbart med Ajax och JSON (php på serversidan).

Men det första jag fastnade på var hur designen skall se ut. Låt oss säga att man har en vanlig databastabell där man vill kunna lägga till/ta bort/ändra data, men via javascript. Ganska basic saker helt enkelt. Men hur designar man ett sådant formulär så att det passar bra med Ajax-tekniken?

Eftersom detta är ganska basic saker som man gör med data så tänker jag mig att det säkert redan finns någon som har gjort gränssnitt som passar bra med ajax (prototype). Är det någon som känner till något sådant?

Min tanke är att designen bör se ut någonting sådant här:

[ sökruta ] [sök-knapp]
[tabell med resultat, varje rad motsvarar en rad i tabellen]
[ny-knapp]

När man klickar på en rad i tabellen så blir den editerbar. Varje rad har en [spara-knapp].
Klickar man på [ny-knapp] dyker det upp en ny tom rad i tabellen som är editerbar.

Jag tänker mig att själva sökrutan är kopplad med ajax så att den uppdaterar tabellen.
Spara-knappen bör också vara kopplad med ajax så att den uppdaterar raden (eller skapar ny om raden tidigare var tom).

Är tacksam för alla tips jag kan få...

[koala]

Ett tips har jag: Titta på jQuery, som jag själv precis konverterat till, efter att ha råkat ut för några av Prototypes begränsningar (t ex att om man hämtar en sida som innehåller en script-tag, så kommer denna inte med), samt upptäckt hur mycket mer kompakt kod man kan få till med jQuery!

[Blackex]

Tack för tipset! Hittade även en plugin som automatiskt skickar in formulär med jQuery.

Fast jag är fortfarande fast i design-problemet....

[koala]

Du kan säkert hitta något lärorikt hos IBM.

EDIT:
Eller kanske inte, med tanke på att du ju frågar om själva designen. Men den behöver inte skilja sig från hur en Web 1.0-applikation skulle se ut.

När man klickar på en rad i tabellen så blir den editerbar. Varje rad har en [spara-knapp].
Klickar man på [ny-knapp] dyker det upp en ny tom rad i tabellen som är editerbar.

Här får du helt enkelt göra en request till "changeItem.php?id=12&name=NewName" när man klickar på Spara. I "changeItem.php" bör du uppdatera objektet med id=12 och spara det med det nya namnet "NewName".

Lämpligen skriver changeItem.php även ut tabellinnehållet i JSON. Du får då i anropande fil (den fil där du skrev ut listan inklusive spara-knappen) ställa in en lämplig callback för AJAX-requesten, så att när den är klar, uppdateras innehållet i tabellen.