Anzeige

Javascript um text zu editieren

Javascript um text zu editieren | PSD-Tutorials.de

Erstellt von daimonion, 29.01.2009.

  1. daimonion

    daimonion Nicht mehr ganz neu hier

    Dabei seit:
    23.04.2008
    Beiträge:
    83
    Geschlecht:
    männlich
    Kameratyp:
    EOS 400D
    Javascript um text zu editieren
    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:
    1.  
    2. <span class="topictitle">
    3.  <span id="topicnewest_696">
    4.   <img src="images/icon_clip.gif" alt="" border="0" />
    5.  </span>
    6.  <a href="viewtopic.php?t=696" id="topiclink_13400" class="topictitle">Einladung zur 53. FAR-Sitzung</a>
    7.  <span id="title_13400" style="display:none;">
    8.   <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)" />
    9.  <input type="hidden" id="orig_topictitle_13400" value="Einladung zur 53. FAR-Sitzung" />&nbsp;
    10.  <input type="button" onclick="AJAXEndTitleEdit(13400)" value="Speichern" class="mainoption" />&nbsp;
    11.  <input type="button" onclick="AJAXCancelTitleEdit(13400)" value="Abbrechen" class="liteoption" />
    12. </span>
    13.  
    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:

    [​IMG]

    Gruß
    Daimonion
     
    #1      
  2. RaVoR

    RaVoR Noch nicht viel geschrieben

    Dabei seit:
    22.01.2008
    Beiträge:
    8
    Geschlecht:
    männlich
    Javascript um text zu editieren
    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 (Text):
    1. function replaceInnerP(pName){
    2.    document.getElementById(pName).innerHTML = '<input id ="bla" type="text....';
    3. //Hier müsste dann weitergemacht werden. Beim Button auf [B]onclick="javascript:sendInformationsToWebserver('bla','baba');"[/B] achten
    4. }
    5. function sendInformationsToWebserver(inputName,pName){
    6.      var neuerText = document.getElementById(inputName).value;
    7.      //AJAX-Stuff
    8.     document.getElementById(pName).innerHTML = neuerText;
    9. }
    HTML
    HTML:
    1.  
    2. <div class="anzeige">
    3.     <p id="baba" onclick="javascript:replaceInnerP('baba');">Beschreibungstext</p>
    4. </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
     
    #2      
  3. daimonion

    daimonion Nicht mehr ganz neu hier

    Dabei seit:
    23.04.2008
    Beiträge:
    83
    Geschlecht:
    männlich
    Kameratyp:
    EOS 400D
    Javascript um text zu editieren
    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
     
    #3      
  4. daimonion

    daimonion Nicht mehr ganz neu hier

    Dabei seit:
    23.04.2008
    Beiträge:
    83
    Geschlecht:
    männlich
    Kameratyp:
    EOS 400D
    Javascript um text zu editieren
    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.. ;)
     
    #4      
  5. RaVoR

    RaVoR Noch nicht viel geschrieben

    Dabei seit:
    22.01.2008
    Beiträge:
    8
    Geschlecht:
    männlich
    Javascript um text zu editieren
    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 ;))
     
    #5      
  6. daimonion

    daimonion Nicht mehr ganz neu hier

    Dabei seit:
    23.04.2008
    Beiträge:
    83
    Geschlecht:
    männlich
    Kameratyp:
    EOS 400D
    Javascript um text zu editieren
    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
     
    #6      
x
×
×