1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

DHTML-JavaScript Daten aus MySQL in eine HTML Tabelle verpacken

Dieses Thema im Forum "PHP & Co." wurde erstellt von karolherbst, 24.08.08.

  1. karolherbst

    karolherbst Danziger Kant

    Dabei seit:
    11.05.07
    Beiträge:
    3.878
    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
    Code:
    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)
     
  2. nevermind

    nevermind Bismarckapfel

    Dabei seit:
    19.12.07
    Beiträge:
    142
    Ich hasse js, aber ich denke das Problem liegt hier:

    Code:
    tagReihe.appendChild(docuemnt.creatTextNode(tagDatum+tagUhrzeit+tagAutor+tagsagte+tagEintrag));
    Müsste das nicht
    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.
     
  3. karolherbst

    karolherbst Danziger Kant

    Dabei seit:
    11.05.07
    Beiträge:
    3.878
    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
    Code:
    <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 :D naja egal, wenn du mir sagen könntest wo ich was wegen Ajax nachlesen könnte, wöre dies sehr nett

    Danke
     
  4. nevermind

    nevermind Bismarckapfel

    Dabei seit:
    19.12.07
    Beiträge:
    142
    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.
    Code:
    <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

    Code:
    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.
     
  5. Maluku

    Maluku Finkenwerder Herbstprinz

    Dabei seit:
    10.05.08
    Beiträge:
    464
    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
     
  6. karolherbst

    karolherbst Danziger Kant

    Dabei seit:
    11.05.07
    Beiträge:
    3.878
    mhhh etwas viele schleifen finde ich
    Code:
      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.

    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 :D vielleicht klappt es.
     
  7. nevermind

    nevermind Bismarckapfel

    Dabei seit:
    19.12.07
    Beiträge:
    142
    Dazu sag' ich lieber nichts.

    Code:
    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.
     
  8. karolherbst

    karolherbst Danziger Kant

    Dabei seit:
    11.05.07
    Beiträge:
    3.878
    nee, habe das jetzt mit Json schon ausprobiert, nur irgendwie wird data nicht gefüllt
    Dieser Fehler wird direkt hinter
    ausgegeben
     
  9. nevermind

    nevermind Bismarckapfel

    Dabei seit:
    19.12.07
    Beiträge:
    142
    - 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();".
     
  10. karolherbst

    karolherbst Danziger Kant

    Dabei seit:
    11.05.07
    Beiträge:
    3.878
    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
     

Diese Seite empfehlen