DHTML-JavaScript Daten aus MySQL in eine HTML Tabelle verpacken

[karolherbst]

Habe follgendes Problem:
Ich will aus meiner MySQL DB Daten von meinem Browser automatisch via DHTML zusätzlich in eine Tabelle einbinden. Abfragen und des weiteren geht.
Nur das einfügen in das Dokument klappt nicht, habe schon versucht mit

var tagDatum=document.createElement("td");
var tagUhrzeit=document.createElement("td");
var tagAutor=document.createElement("td");
var tagsagte=document.createElement("td");
var tagEintrag=document.createElement("td");
var tagReihe=document.createElement("tr");

tagDatum.appendChild(document.createTextNode(parent.refreshframe.Datum));
tagUhrzeit.appendChild(document.createTextNode(parent.refreshframe.Uhrzeit));
tagAutor.appendChild(document.createTextNode(parent.refreshframe.Autor));
tagsagte.appendChild(document.createTextNode("sagte:"));
tagEintrag.appendChild(document.createTextNode("'"+parent.refreshframe.Eintrag+"'"));
tagReihe.appendChild(docuemnt.creatTextNode(tagDatum+tagUhrzeit+tagAutor+tagsagte+tagEintrag));
document.getElementById("neuerPost").appendChild(tagReihe);

das zu machen, aber irgendwas ist da falsch.

Kann mir jmd helfen?
Danke

PS: Die Daten werden von einem frame automatisch geladen. refreshframe ist der Name und die Variablen sind auch ansprechbar und auch richtig gefüllt. (Falls jmd mir sagen kann, wie man nur bestimmt Teile eines HTML-Dokumentes laden kann, wäre dass auch ganz gut)

 

[nevermind]

Ich hasse js, aber ich denke das Problem liegt hier:

tagReihe.appendChild(docuemnt.creatTextNode(tagDatum+tagUhrzeit+tagAutor+tagsagte+tagEintrag));

Müsste das nicht

tagReihe.appendChild(tagDatum);

usw. heißen?

Und element-id "neuerPost" ist ein <table> ?

Ich würde das Ganze auch so anlegen, dass Du die Zeilen per ajax nachlädst. Die Daten serverseitig in xml oder json (habe bisher nur letzteres verwendet) verpacken, und sie dann clientseitig durch ne js-schleife jagen und das html per createElement/appendChild an die bestehende Tabelle anhängen. Kann auch sein, dass das mit einem der großen js-Frameworks (vllt. jQuery?) einfacher geht.

 

[karolherbst]

also von Ajax und so habe ich noch 0 Ahnung, leider, aber klingt ziemlich gut diese Idee. Das mit meinem Script klappt leider irgendwie nicht.

also in dem div neuerPost befindet sich nur

<table>
</table>

und ich will, dass er eben durch ein JS dort neue Daten rein schreibt.
also als erstes ein <tr></tr> und dort innen eben die einzelnen Spalten mit den ganzen Informationen, die aus einem 2ten unsichttbaren frame via neuladen und php aus einer MySQL-DB geholt werden. Wie oben gesagt, dass laden der Daten klappt wunderbar. Nur das einfügen in die Seite will nicht gehen. Habe auchs chon das probiert was du oben sagtest, aber das ist noch etwas so naja halbfertig naja egal, wenn du mir sagen könntest wo ich was wegen Ajax nachlesen könnte, wöre dies sehr nett

Danke

 

[nevermind]

1. Wenn "neuerPost" ein div ist, kann das so nicht gehen. td gehört in eine tr und die gehört in eine table. (Was für'n deutsch).

2. Zu ajax gibt es bei google bestimmt unglaublich viele Tutorials. Um dir trotzdem ein Stück weiterzuhelfen:

a) Du brauchst ein Format um die Daten strukturiert zu übertragen. Ich kenne XML und JSON, im folgenden weiter mit JSON. Einmal für die Serverseite: http://mike.teczno.com/JSON/JSON.phps Und einmal für den Client: http://www.json.org/json.js

b) Html. Deine Tabelle hat die id "myTable", Dein php-Skript heißt responder.php.

<script type="text/javascript" src="json.js"></script>
<script type="text/javascript">
	function request() {			
		req = new XMLHttpRequest();
		req.onreadystatechange = function() {
			if ((req.readyState == 4) && (req.status == 200)) {
				data = req.responseText.parseJSON();
				table = document.getElementById('mytable');
				for (i = 0; i < data.length; i++) {
					tr = document.createElement("tr");
					for (j = 0; j < data[i].length ; j++) {
						td = document.createElement("td");
						td.appendChild(document.createTextNode(data[i][j]));
						tr.appendChild(td);
					}
				table.appendChild(tr);
				}						
			}
		}
		req.open("GET", "responder.php", true);
		req.send();
	}
</script>

c) Php

require_once('JSON.php');
		
// Verbindung zur DB, Resultset holen
	
while($row = mysql_fetch_array($result, MYSQL_NUM)) $data[] = $row;
	
$json = new Services_JSON();
echo $json->encode($data);

Ist relativ schlampig jetzt, kann insb. sein dass das in IE6 und Konsorten nicht funktioniert, aber als Ansatz sollte das reichen.

 

[Maluku]

Man kann auch die Ausgabe in PHP generieren, und dann mit element.innerHTML = ajaxobject.responseText einfach da einbauen, das ist kurz und einfach, aber net so schön

 

[karolherbst]

mhhh etwas viele schleifen finde ich

  function CheckNewPost(){
  			if (Datum != parent.refreshframe.Datum){
  				tagDatum.appendChild(document.createTextNode(parent.refreshframe.Datum));
				tagUhrzeit.appendChild(document.createTextNode(parent.refreshframe.Uhrzeit));
				tagAutor.appendChild(document.createTextNode(parent.refreshframe.Autor));
				tagsagte.appendChild(document.createTextNode("sagte:"));
				tagEintrag.appendChild(document.createTextNode("'"+parent.refreshframe.Eintrag+"'"));
				tagReihe.appendChild(tagDatum);
  				tagReihe.appendChild(tagUhrzeit);
				tagReihe.appendChild(tagAutor);
  				tagReihe.appendChild(tagsagte);
  				tagReihe.appendChild(tagEintrag);
				Datum=parent.refreshframe.Datum;
				document.getElementById("neuePosts").appendChild(tagReihe);
				Datum=parent.refreshframe.Datum;
				Uhrzeit=parent.refreshframe.Uhrzeit;
  				};
  			if (Uhrzeit != parent.refreshframe.Uhrzeit){
				tagDatum.appendChild(document.createTextNode(parent.refreshframe.Datum));
				tagUhrzeit.appendChild(document.createTextNode(parent.refreshframe.Uhrzeit));
				tagAutor.appendChild(document.createTextNode(parent.refreshframe.Autor));
				tagsagte.appendChild(document.createTextNode("sagte:"));
				tagEintrag.appendChild(document.createTextNode("'"+parent.refreshframe.Eintrag+"'"));
				tagReihe.appendChild(tagDatum);
  				tagReihe.appendChild(tagUhrzeit);
				tagReihe.appendChild(tagAutor);
  				tagReihe.appendChild(tagsagte);
  				tagReihe.appendChild(tagEintrag);
				Datum=parent.refreshframe.Datum;
				document.getElementById("neuePosts").appendChild(tagReihe);
				Datum=parent.refreshframe.Datum;
				Uhrzeit=parent.refreshframe.Uhrzeit;
  				};
 			setTimeout("CheckNewPost()",5000);
  }
  parent.refreshframe.location.href="frame.php";
  var tagDatum=document.createElement("td");
  var tagUhrzeit=document.createElement("td");
  var tagAutor=document.createElement("td");
  var tagsagte=document.createElement("td");
  var tagEintrag=document.createElement("td");
  var tagReihe=document.createElement("tr");
  var Datum="<? echo $Datum ?>";
  var Uhrzeit="<? echo $Uhrzeit ?>";
  setTimeout("CheckNewPost()",300);

mein JS code.

<div id="neuePosts" name="neuerPost" style="position:relative;top:18px">
<table>
</table>
</div>

mein html code dazu.

er wertet auch alle DAten und so richtig aus, aber das einzige Problem ist, dass er von der Variable (ich nenne sie mal so) tagReihe nur den reinen text nimmt, also er ignoriert die gesammten html Tags. Mit nem Editor habe ich gesehen, dass unter tagReige.outerHTML alle tags vorhanden sind, auch in der richtigen Reihenfolge. jetzt muss ich nur noch wissen, wie ich des in den div Bereich richtig hineinbekomme. Ohh hab ne idee vielleicht klappt es.

 

[nevermind]

mhhh etwas viele schleifen finde ich

Dazu sag' ich lieber nichts.

document.getElementById("neuePosts").appendChild(tagReihe);

Und dazu erst recht nicht.

Ich will Dir wirklich nicht zu nahe treten, aber Du scheinst
a) nicht zu lesen was andere schreiben und
b) weitgehend lernresistent zu sein.

 

[karolherbst]

nee, habe das jetzt mit Json schon ausprobiert, nur irgendwie wird data nicht gefüllt

TypeError: Result of expression 'data' [undefined] is not an object.

Dieser Fehler wird direkt hinter

for (i = 0; i < data.length; i++) {

ausgegeben

 

[nevermind]

- mit welchem Browser/Debugger testest Du das?
- poste mal die Ausgabe des php-Skripts, das Du per Ajax aufrufst.

ps.: Ich seh' grad noch 'nen Fehler von mir: es heißt "req.send(null);" und nicht "req.send();".

 

[karolherbst]

naja ich würde am liebsten so fertige Skripts und so vermeiden, weil die meistens sehr groß (oder naja größer als selsbt programmiert) und Serverlastig sind (habe nur meinen alten PM G4) und habe es irgendwie geschafft mien Problem zu lösen, aber ich werde mich mit Ajax auch auseinandersetzen.

Und ich teste das mit Safari 4