AW: [jQuery] replacewith in einer Tabelle
Es ist gut möglich, dass dies etwas viel oder verwirrend ist. Wenn ich kurz Zeit finde, führe ich einen Speispielcode auf, welcher du zum Testen verwenden kannst.
Hi,
nö, ist nicht verwirrend. Sorry, dass ich erst jetzt antworte, aber ich habe diese Diskussion nicht aus den Augen den Augen verloren.
Wie gesagt, ich habe mich ja schon durchgebissen und eine Lösung. Um das ganze ein wenig klarer zu machen, liste ich hier mal jetzt die wichtigsten Codezeilen auf.
In meiner Startseite habe ich zurerst die jQuery.js Datei, Das XMLHTTP ReqestObject und eine weitere Javascript Datei in der der Request und der handle respose gestartet wird eingebunden.
PHP:
<script src="./include/jquery-1.4.2.min.js" type="text/javascript"></script>
<script language="JavaScript" src="xmlhttprequestobjekt.js"></script>
<script language="Javascript" src="change_name.js"></script>
Die Schleife die mir die Ergebnisse anzeigt sieht folgendermaßen aus
PHP:
$i = 1;
while($zeile = $res->fetch_object()) {
?>
<tr>
<td><?php echo $zeile->vorname;?></td>
<td><div id="back<?php echo $i;?>"><div id="change<?php echo $i;?>" style="cursor: hand;"><?php echo $zeile->nachname;?></div></div></td>
</tr>
<script>
$("#change<?php echo $i;?>").live('click',function() {
$(this).replaceWith("<input type='text' id='nachname' name='nachname' onblur='sndReq();' value='" + $(this).text() + "'> <input type='hidden' name='rf' value='<?php echo $i;?>'> <input type='hidden' name='ds_id' value='<?php echo $zeile->id?>'>" );
document.FORMULAR.nachname.focus();
});
</script>
<?php
$i++;
}
in dem onBlur Event wird die Function sndRec() aufgerufen die in der Datei change_name.js ist. Der Inhalt dieser Datei sieht folgendermaßen aus.
PHP:
function sndReq() {
var nachname = document.FORMULAR.nachname.value;
var ds_id = document.FORMULAR.ds_id.value;
var rf = document.FORMULAR.rf.value;
resObjekt.open('get', 'change_name.php?ds_id=' + ds_id + '&rf=' + rf + '&nachname=' + nachname , true);
resObjekt.onreadystatechange = handleResponse;
resObjekt.send(null);
}
function handleResponse() {
if(resObjekt.readyState == 4) {
rf = document.FORMULAR.rf.value;
document.getElementById('back' + rf).innerHTML = resObjekt.responseText;
}
}
Hier werden jetzt die Inhalte der mit replaceWith erzeugten Textfelder in eine Variable gepackt und an die PHP Datei weitergeleitet die mir dann die Änderung in der Datenbank macht. Diese PHP Datei hat den Namen change_name.php und hat folgenden Inhalt.
PHP:
// Abspeichern des neuen Wertes
$sql = "UPDATE mitarbeiter SET nachname = '".$nachname."'
WHERE id = '".$ds_id."'";
$res = $mysqli->query($sql);
// Auslesen des soeben gänderten Wertes
$sql = "SELECT id, vorname, nachname
FROM mitarbeiter
WHERE id = '".$ds_id."'";
$res = $mysqli->query($sql);
$zeile = $res->fetch_object();
?>
<div id="change<?php echo $rf;?>"><?php echo $zeile->nachname;?></div>
Zuerst wird der geänderte Wert in die Datenbank geschrieben. Danach hole die Änderung wieder heraus (kann man sich wahrscheinlich auch sparen und direkt die Variable aus der Update Anweisung nehmen.). Der div Container ist der Teil, der über den handle response wieder an die Startseite zurückgegeben wird und das Textfeld wieder umwandelt, so dass man wieder die normale Ausgabetabelle angezeigt wird. Jetzt aber mit dem geänderten Wert.
In diesem Code habe ich noch (hier jetzt nicht zu sehen) nachträglich an das onsubmit Event des Formulares auch die Function sndRec(). Damit wenn der User nach der Änderung die Return Taste drückt das ganze immer noch funktioniert. Und es klappe alles wunderbar.
Wenn Du allerdings eine elegantere (bessere) Lösung hast, bin ich natürlich auch daran intersssiert.
Gruß
didi01
