Nicht mehr ganz neu hier
Hallo Leute
Nachdem ich mit HTML und PHP gut klar komme will ich mich nun ein wenig an Javascript versuchen um meine Fähigkeiten dahingehend zu erweitern. Dazu hab ich mir eine Beispielanwendung rausgesucht, die ich programmieren will.
Folgendes Szenario:
Ich hab einen Container (div-Tag) in dem ein Text (z.B. ein Bildtitel) steht.
Durch Klick auf den Text soll dieser verschwinden und in einem input-Tag erscheinen. (Der Input-Tag soll quasi mit dem Text an der Stelle des Textes erscheinen. Damit kann der Benutzer den Text verändern. Ein Speichernbutton initialisiert nach der Änderung wieder Speichervorgang, der den geänderten Text mittels Ajax an den Server schickt und ihn dort in der DB speichert. (wobei der Serverteil jetzt für mich nicht schwierig wär).
Nachdem die Speicherung abgeschlossen ist, soll der Input-Tag verschwinden und der geänderte Text wieder erscheinen.
Gesehen hab ich das in einem Orion-Forum, wo das bereits Funktioniert.
In diesem Forum sieht der HTML-Teil wie folgt aus:
Auf die dort verwendeten Javascriptfunktionen hab ich zwar Zugriff, aber da ich aber nicht nur blind abschreiben will, würde ich mich freuen, wenn ihr mir Ansätze geben könntet, wie so eine Funktion implementiert wird. Auch Buchvorschläge sind erwünscht.
Danke für die Hilfe.
PS.: Anbei hab ich nochmal ein Bild gestellt, wie das in dem Forum aussieht:
Gruß
Daimonion
Nachdem ich mit HTML und PHP gut klar komme will ich mich nun ein wenig an Javascript versuchen um meine Fähigkeiten dahingehend zu erweitern. Dazu hab ich mir eine Beispielanwendung rausgesucht, die ich programmieren will.
Folgendes Szenario:
Ich hab einen Container (div-Tag) in dem ein Text (z.B. ein Bildtitel) steht.
Durch Klick auf den Text soll dieser verschwinden und in einem input-Tag erscheinen. (Der Input-Tag soll quasi mit dem Text an der Stelle des Textes erscheinen. Damit kann der Benutzer den Text verändern. Ein Speichernbutton initialisiert nach der Änderung wieder Speichervorgang, der den geänderten Text mittels Ajax an den Server schickt und ihn dort in der DB speichert. (wobei der Serverteil jetzt für mich nicht schwierig wär).
Nachdem die Speicherung abgeschlossen ist, soll der Input-Tag verschwinden und der geänderte Text wieder erscheinen.
Gesehen hab ich das in einem Orion-Forum, wo das bereits Funktioniert.
In diesem Forum sieht der HTML-Teil wie folgt aus:
HTML:
<span class="topictitle">
<span id="topicnewest_696">
<img src="images/icon_clip.gif" alt="" border="0" />
</span>
<a href="viewtopic.php?t=696" id="topiclink_13400" class="topictitle">Einladung zur 53. FAR-Sitzung</a>
<span id="title_13400" style="display:none;">
<input type="text" class="post" name="topictitle_13400" id="topictitle_13400" value="Einladung zur 53. FAR-Sitzung" size="40" maxlength="60" onkeyup="AJAXTitleEditKeyUp(event, 13400)" />
<input type="hidden" id="orig_topictitle_13400" value="Einladung zur 53. FAR-Sitzung" />
<input type="button" onclick="AJAXEndTitleEdit(13400)" value="Speichern" class="mainoption" />
<input type="button" onclick="AJAXCancelTitleEdit(13400)" value="Abbrechen" class="liteoption" />
</span>
Auf die dort verwendeten Javascriptfunktionen hab ich zwar Zugriff, aber da ich aber nicht nur blind abschreiben will, würde ich mich freuen, wenn ihr mir Ansätze geben könntet, wie so eine Funktion implementiert wird. Auch Buchvorschläge sind erwünscht.
Danke für die Hilfe.
PS.: Anbei hab ich nochmal ein Bild gestellt, wie das in dem Forum aussieht:
Gruß
Daimonion