Antworten zum Thema „Javascript um text zu editieren“

daimonion · 29.01.2009

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:

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" />&nbsp;
 <input type="button" onclick="AJAXEndTitleEdit(13400)" value="Speichern" class="mainoption" />&nbsp;
 <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

RaVoR · 29.01.2009

AW: Javascript um text zu editieren

Ich werd jetzt bloss mal den groben Ablauf schreiben.
Prinzipiell steht die Beschreibung in einem "DIV" und einem "P" (um konform zu bleiben). Dieses p hat ne ID und über die ID können wir jetzt mittels JavaScript einfach alles austauschen. (Das wäre der Quick'n'Dirty-Weg)

Hier mal nen Beispiel:

JS-Code

Code:

function replaceInnerP(pName){
   document.getElementById(pName).innerHTML = '<input id ="bla" type="text....';
//Hier müsste dann weitergemacht werden. Beim Button auf [B]onclick="javascript:sendInformationsToWebserver('bla','baba');"[/B] achten
}
function sendInformationsToWebserver(inputName,pName){
     var neuerText = document.getElementById(inputName).value;
     //AJAX-Stuff
    document.getElementById(pName).innerHTML = neuerText;
}

HTML

HTML:

<div class="anzeige">
    <p id="baba" onclick="javascript:replaceInnerP('baba');">Beschreibungstext</p>
</div>

Das PHP klemm ich mir jetzt einfach mal.

Man kann das ganze auch über versteckte und durch JS wieder angezeigte Input-Felder machen, wie im Beispiel. Dafür müsste man noch ein wenig mit CSS rumspielen, aber rein prinzipiell ist der Unterschied zu dem bissl Quelltext nicht wirklich enorm.

MfG
RaVoR

daimonion · 29.01.2009

AW: Javascript um text zu editieren

Cool, danke für die Erklärung des Prinzip. Das hilft mir schon mal ein Stückchen weiter.

Grüße
Daimonion

daimonion · 30.01.2009

AW: Javascript um text zu editieren

Okay, soweit hab ich das begriffen und konnte es auch so implementieren.
Du sprachst von dem Quick'n'Dirty-Weg. Wie wäre es denn schön sauber implementiert?
Ich will ja auch mal weiterkommen..

RaVoR · 31.01.2009

AW: Javascript um text zu editieren

Ein bessere Variante wäre es über CSS zu gehen. Anstatt die Elemente direkt mit JS zu schreiben, nehmen wir einfach versteckte Elemente und machen sie mit JavaScript sichtbar. So wurde es in deinem Codeschnipsel auch gemacht.

Die Schritte, die zu erledigen sind:
1) CSS anpassen (Formularfelder als unsichtbar schreiben, "visibility" oder "overflow" als Stichworte)
2) HTML anpassen... (Richtige Anordnung der Elemente)
3) JS anpassen. (document.getElementById('bla').style.visibility)

Es gäbe auch noch andere Wege, aber auf die geh ich einfach mal net ein, weil der hier erklärte Weg meistens auch der beste ist.

MfG
RaVoR
PS: Ab morgen weg... (Erst wieder nächsten Freitag anwesend

)

daimonion · 31.01.2009

AW: Javascript um text zu editieren

Okay, dann werd ich mich daran mal versuchen. ein funktionierendes Beispiel hab ich ja erst mal und die Funktionen habt ihr mir auch schon erläutert. Soweit erst mal Danke dafür. Ich meld mich.

Grüße
Daimonion