Felder direkt im Browser bearbeiten

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Gimli_q, 24. Oktober 2008 .

  1. 24. Oktober 2008
    Zuletzt von einem Moderator bearbeitet: 14. April 2017
    Hallo zusammen,

    ich suche schon sei einiger Zeit eine Möglichkeit um folgendes zu realisieren.

    Ich habe wie in folgendem Bild zu sehen ist,

    Bild

    eine ganz normale Datenbank ausgabe via PHP und möchte wenn ich den Button "Bleistift" (rechts im Bild) anklicke eine direkt bearbeitung dieser Zeile im Browser haben. Sprich wenn ich diesen jetzt anklicke sollte sich "keine" neue Seite öffnen sondern das Feld sollte sich zu einem "Editierbarem Feld" ändern, siehe Bild Nummer 2,

    Bild

    Wichtig: Es sollte keine neue Seite geöffnet werden.
    Ist es so verständlich genug erklärt? =)

    PS: Diese Funktion findet man auch auf der "Kwick-Community" Seite. Falls das jemand was sagt.

    Viele Grüsse,
    gimli_q
     
  2. 24. Oktober 2008
    AW: Felder direkt im Browser bearbeiten

    Hi,

    "keine neue Seite laden" == AJAX

    musst Dich da aber schon ein wenig einlesen *g*
     
  3. 24. Oktober 2008
    AW: Felder direkt im Browser bearbeiten

    javascript onclick textelement in ein input feld umändern und onblur (wenn ich mich nich irre) wieder in ein textfeld umändern.
     
  4. 26. Oktober 2008
    AW: Felder direkt im Browser bearbeiten

    HTML:
    <html> <head> <script type="text/javascript">
    
    function activate(e, id)
    {
     var element = document.getElementById(id);
     if (element) element.readOnly = e.checked;
    }
    
    </script> </head> <body>
    Inputfeld aktivieren (ja/nein):
    <input type="checkbox" onChange="activate(this, 'myField')" /> <br /><br /> <input id="myField" type="text" value="hallo" /> </body> </html>
    
     
  5. 26. Oktober 2008
    AW: Felder direkt im Browser bearbeiten

    Wie pleg schon geschrieben hat.
    Bei der activate-Funktion hauste halt noch ne border-Anweisung rein, die halt sonst auf none steht (damit man nicht erkennt, dass es eigentlich bereits ein Textfeld ist).

    Deaktiverst du das Feld wieder, musste nen Ajax-Request starten.
    Da du anscheinend ned viel Ahnung davon hast, guck dir mal die jQuery API an.
    Damit kannste das sehr einfach umsetzen

    jQuery: jQuery
     
  6. 26. Oktober 2008
    AW: Felder direkt im Browser bearbeiten

    ich glaub er stellt sich das eher so vor: (wie Telefonzelle schon beschrieben hat)
    HTML:
    <html>
     <head>
     <title>Span &lt;=&gt; Input</title>
     <script type="text/javascript">
     //<![CDATA[
     function editSpan(span) {
     var input = document.createElement('input');
     input.value = span.firstChild.nodeValue;
     input.size = span.offsetWidth / 5;
     input.onblur = function() {
     var value = input.value;
     input.parentNode.replaceChild(span, input);
     span.firstChild.nodeValue = value;
     }
     
     span.parentNode.replaceChild(input, span);
     input.focus();
     }
     //]]>
     </script>
     </head>
     <body>
     <span ondblclick="editSpan(this);">Mit Doppelklick kannst du diesen Text &auml;ndern</span>
     </body>
    </html>
    ansonsten, wie schon gesagt, den geänderten text via ajax an den server senden damit der das auch mitbekommt.
     
  7. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.