[AJAX] Inhalt eines TD in input umwandeln

[didi01]

Hi,

ich bekomme eine Ergebnisliste aus einer Datenbank und lasse diese über eine while Schleife auf dem Bildschirm azeigen. Nun habe ich folgendes vor:
Wenn man in einer Zeile auf einen bestimmten Wert klickt, soll aus dem angezeigten Text ein input Feld werden und der Inhalt ist dann der vorher angezeigte Text. Den value in dem input Feld sollte man jetzt ändern können und der neue Wert soll in die DB gespeichert werden.

Git es dazu eine Anleitung? Ich habe schon diverse AJAX Tutorials gelesen, aber für diese Problematik habe ich noch nichts gefunden.

Ich weis das es da schon fertige Lösungen gibt, ich wollte es aber selbst von Anfang bis zum Ende erstellen (und verstehen).

Vielen Dank schon mal im Voraus.

Gruß
didi01

 

[lachender_engel]

AW: [AJAX] Inhalt eines TD in input umwandeln

In AJAX kann ich Dir da nicht helfen.
Machst Du das eventuell in PHP, dann kann ich Dir einen kurzen Code-Schnipsel anbieten. Da ist jedoch dann ein Reload der Seite bei. Ist das ok?

 

[MikayKun]

AW: [AJAX] Inhalt eines TD in input umwandeln

Du musst nur einfach den Inhalt des TDs durch INPUT ersetzen. Das Input kannst dann per AJAX erstellen und den Inhalt des Inputs kannst du aus der DB abfragen oder aber den vorhandenen Inhalt mit JS (getElementById.value) auslesen und über den AJAX-Request mitsenden und dann wird das genutzt.

Verstanden was ich mein? :lol:

 

[didi01]

AW: [AJAX] Inhalt eines TD in input umwandeln

In AJAX kann ich Dir da nicht helfen.
Machst Du das eventuell in PHP, dann kann ich Dir einen kurzen Code-Schnipsel anbieten. Da ist jedoch dann ein Reload der Seite bei. Ist das ok?

Vielen Dank für Dein Angebot, ich wollte das aber mit AJAX realisieren.

Du musst nur einfach den Inhalt des TDs durch INPUT ersetzen. Das Input kannst dann per AJAX erstellen und den Inhalt des Inputs kannst du aus der DB abfragen oder aber den vorhandenen Inhalt mit JS (getElementById.value) auslesen und über den AJAX-Request mitsenden und dann wird das genutzt.

Verstanden was ich mein? :lol:

Ja, hab ich verstanden. Ich mach mich mal ran. Es kann höchstens sein das ich vielleicht doch noch ein paar Fragen habe wenn ich nicht weiterkomme.

Gruß
didi01

 

[saila]

AW: [AJAX] Inhalt eines TD in input umwandeln

nimmst du jQuery? Wenn ja ist das recht simple mit über Manipulation und html zu lösen.

 

[didi01]

AW: [AJAX] Inhalt eines TD in input umwandeln

nimmst du jQuery? Wenn ja ist das recht simple mit über Manipulation und html zu lösen.

Nein, mit jQuery habe ich noch nicht gearbeitet. Hast Du denn da einen Link für eine Anleitung um das nach Deinem Vorschlag zu machen?

Gruß
didi01

 

[Chriss1987]

AW: [AJAX] Inhalt eines TD in input umwandeln

Hi,

hier mal zwei Lösungswege:

<?php
if (isset($_POST['value']))
    {
        echo "<input type=\"text\" value=\"" . $_POST['value'] . "\">";
        exit();
    }
?>
<script type="text/javascript">
var http = null;
var td_id = null;
if (window.XMLHttpRequest)
    {
        http = new XMLHttpRequest();
    }
else if (window.ActiveXObject)
    {
        http = new ActiveXObject("Microsoft.XMLHTTP");
    }

function sndReq(id)
    {
        if (http != null)
            {
                td_id = "td_" + id;
                http.open("POST", "AJAX_table_input.php", true);
                http.onreadystatechange = ausgeben;
                http.setRequestHeader(
                   "Content-Type",
                   "application/x-www-form-urlencoded");
                http.send("value="+document.getElementById(td_id).innerHTML);
            }
    }

function ausgeben()
    {
        if (http.readyState == 4)
            {
              document.getElementById(td_id).innerHTML = http.responseText;
              td_id = null;
            }
    }

function convertTd (id)
    {
        document.getElementById("td_"+id).innerHTML = "<input type=\"text\" value=\"" + document.getElementById("td_"+id).innerHTML + "\">";
    }

</script>

<table border="1">
    <tr>
        <td id="td_1">Value</td>
        <td id="td_2">Value2</td>
    </tr>
    <tr>
        <td onClick="sndReq('1');">Ändern</td>
        <td onClick="convertTd('2');">Ändern2</td>
    </td>
</table>

entweder die Daten per POST an eine Bearbeitung schicken, oder direkt als Input umwandeln.

Schöne Grüße aus dem Sauerland!
Chriss

 

[didi01]

AW: [AJAX] Inhalt eines TD in input umwandeln

@Chriss1987

Auch Dir vielen Dank für das Beispiel. Ich werde mir die das alles mal aunschauen.

Gruß
didi01

 

[saila]

AW: [AJAX] Inhalt eines TD in input umwandeln

Nein, mit jQuery habe ich noch nicht gearbeitet. Hast Du denn da einen Link für eine Anleitung um das nach Deinem Vorschlag zu machen?

Gruß
didi01

Zum einen jQuery: The Write Less, Do More, JavaScript Library download des JavaScript Framework.
Dann kannst du in der Dokumentation Attributes/html - jQuery JavaScript Library nachlesen, wie das umzusetzen ist.

Obgleich das Beispiel von @Chriss1987 auch geht, ist jedoch bei jQuery der Quellcode exorbitant kürzer in der while-Schleife.

 

[didi01]

AW: [AJAX] Inhalt eines TD in input umwandeln

@saila

vielen Dank für den Link. Jetzt habe ich reichlich Material zum lernen.
Ich habe in der Zwischenzeit auch noch ein bischen im Netz gesucht und folgende Video Tutorials gefunden. Dort wird dieses Vorgehen auch in einem Video gezeigt.



Gruß
didi01