Antworten auf deine Fragen:
Neues Thema erstellen

[AJAX] Inhalt eines TD in input umwandeln

didi01

Aktives Mitglied

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

Aktives Mitglied

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?
 
M

MikayKun

Guest

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

Aktives Mitglied

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

Moderatorle

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

Aktives Mitglied

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

me.drinkCoffee();

AW: [AJAX] Inhalt eines TD in input umwandeln

Hi,

hier mal zwei Lösungswege:
PHP:
<?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

Aktives Mitglied

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

Moderatorle

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

Aktives Mitglied

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
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.635
Beiträge
1.538.477
Mitglieder
67.559
Neuestes Mitglied
hanuta
Oben