Supportnet Computer
Planet of Tech

Supportnet / Forum / Skripte(PHP,ASP,Perl...)

Formatierungsbroblem beim Anzeigen von Datein mittels AJAX





Frage

Hallo Leute Ich lese mir Datein, die lokal auf meinem Rechner leigen mittels AJAX anzeigen. Funktioniert bis auf die Formatierung auch. Meine Datein representieren Tabellen, bekomme aber nur Fließtext angezeigt. Hätte gerne jeden Wert in einer Zelle stehen und jede Zeile in der Datei soll in einer Tabellenzeile angezeigt werden. Weiß jemand wie ich das machen muss. Hab was von split und replace gelesen, weiß aber nicht genau wie das geht. Hier ist mein Code zum einlesen der Datein. [code] function getCSV(dateiname) { //var http = null; //Üperprüfung um welchen Browser es sich handelt if (window.XMLHttpRequest) { //Morzilla, Opera ... http = new XMLHttpRequest(); } else if (window.ActiveXObject) { //Internet Explorer http = new ActiveXObject("Microsoft.XMLHTTP"); } if (http != null) { //GET = http_Request_Methode //dateiname = Pfad der Angeforderten Datei //true = JS wird ausgeführt, während auf antwort des Servers gewartet wird (Reguest ist asynchron (= A in AJAX) http.open("GET", dateiname, true); http.onreadystatechange = ausgeben; http.send(null); } } function ausgeben() { if (http.readyState == 4) document.getElementById("Ausgabe").innerHTML = http.responseText; } [/code] Die Variable http wird im Header meine HTML-Dokuments, wo ich auch die Funktion aufrufe initialiesiet, da ich sonst eine Fehlermeldung bekomme. Jede Funktion befindet sich in einer extra Datei. Hoffe ihr könnt mir Helfen. Tschau Klaus

Antwort 1 von rfb

Zitat:
Meine Datein representieren Tabellen, bekomme aber nur Fließtext angezeigt.
Wie sehen diese Dateien aus? Wie genau sieht die Ausgabe aus? Hast du schon mal statt innerHTML die Methodend es DOM genutzt? Wie sieht das Element "Ausgabe" aus? Gibt es Fehlermeldungen oder Warnungen in der Firefox-Fehlerkonsole? Was bedeutet:
Zitat:
im Header meine HTML-Dokuments, wo ich auch die Funktion aufrufe initialiesiet
- was hat das Script dort verloren und warum ergibt eine andere (welche?) Platzierung Fehlermeldungen?

Antwort 2 von Klaus1

Hallo

Es handelt sich bei den Datein um csv-Datein, Trennzeichen ist ein ;
Angezeigt wird alles ohne Zeilenumbrüche. Hätte gerne jede Zeile der CSV-Datei in einer Tabellenzeile angezeigt. Und den Text bis zum Semikolon in einer Zelle angezeigt. Benötige 2 For-Schleifen um dies zu realiesieren, nur wie ich das mit den HTML-Tags für die Tabelle mache ist mir unklar.

Zur Zweiten Frage:

Das ist mein HTML-Dokument, mit der definition er Variablen http. Wenn ich die Variable in der Funktion getCSV definiere bekomme ich eine Fehlermeldung das die Variable in der funktion ausgeben nicht bekannt ist.


<html>
   <head>
      <title>AJAX</title>
      //<script type="text/javascript" src="autoload.js"></script>
      //<script type="text/javascript" src="process.js"></script>
      <script type="text/javascript" src="getCSV.js"></script>
      <script type="text/javascript" src="ausgeben.js"></script>
      <script type="text/javascript" src="build_menu.js"></script>
      <script type="text/javascript" src="sortieren.js"></script>
      <script type="text/javascript">
      <!--
           var http = null;
      --></script
   </head>
   <body>
<!--    <body onLoad="autoload();"> -->

      <!--Anzeige des Menüs-->
      <div id="menu"></div><br />

      <script type="text/javascript">
      <!--
        //Array für die Datein
        dateien = new Array( "Art.csv",
	  	            "Werkstueck.csv",
		       	    "Ort.csv",
	   	     	    "Fahrzeug.csv",
	   	       	    "Verarbeitung.csv",
      	   	       	    "Lagerung.csv",
	   	       	    "Transport.csv"
		      	  );
	//erzeugen des Menüs
	build_menu();
      --></script>


      <!--Anzeige des Datein (Inhalt)-->
      <div id="Ausgabe"></div><br />

   </body>
</html>


Un hier ist die Funktion die mir das menü erstellt, dort wird auch die Funktion getCSV aufgerufen.

function build_menu(){
var htm="<table><tr><td>löschen</a></td>";
for(var n=0;n<dateien.length;n++){
htm+="<td><a href=\"javascript:getCSV('"+dateien[n]+"');\">"+dateien[n]+"</a></td>";
}
htm+="<td><a href=\"javascript:sortieren();\">sortieren</a></td>";
htm+="</tr></table>";
document.getElementById("menu").innerHTML=htm;
}/code]

Hoffe es ist jetzt verständlicher und ihr könnt mehr damit anfangen und vielen Dank für die Hilfe

Klaus

Antwort 3 von Supermax

im ResponseText bekommst du einfach nur die CSV-Datei ohne HTML-Formatierung zurück, und genauso wird sie auch in den DIV-Container geschrieben.

Du kannst nun das CSV lokal mittels JavaScript aufbereiten oder statt direkt das CSV nachzuladen serverseitig ein Script (PHP, Perl, ASP...) laufen lassen, das diese Aufbereitung vornimmt und den kompletten HTML-Code zurückgibt.

Antwort 4 von Klaus1

Hallo

Das ist mir schon klar das ich die CSV-Datei ohne HTML-Formatierung erhalte. Aber wie bekomme ich die HTML-Formatierung hin. Es sollte Lokal mit JavaScript erfolgen nicht mit php oder ähnlichem.

Danke für die Hilfe

Klaus

Antwort 5 von renan


csv2table(http.responseText);

function csv2table(content){
	var a=new Array();
	var lf="\r\n";
	a=content.split(lf);
	var htm="<table border>";
	for(var n=0;n<a.length;n++){
		htm+="<tr><td>"+a[n].replace(/;/g,"</td><td>")+"</td></tr>";
	}
	htm+="</table>";
	return(htm);
}


Antwort 6 von rfb

Zitat:
bekomme ich eine Fehlermeldung das die Variable in der funktion ausgeben nicht bekannt ist.
logisch, wenn du eine lokale Variable in einer Funktion definierst.
Üblicherweise würde man dann die betreffenden Funktionen und die gemeinsam genutzten Variablen einfach zusammen in ein Objekt stecken.

zum CSV-Problem:

die Zeilen erhältst du per:
var zeilen=http.responseText.split("\n");

die einzelnen Zelleninhalte der Zeile j (zeilen ist ein Array!) erhältst du mittels
var zellen=zeilen[j].split(";");

(auch zellen ist dann ein Array!)

bevor du das mittels innerHTML ausgibst musst du aus diesem verschachtelten Array und den HTML-Elementen <table>, <tr>, <th>, <td> erst einmal eine Tabelle zusammenbasteln.

Antwort 7 von Klaus1

Hallo

@renam
Werd ich morgen ausprobieren. melde mich dann nochmals

@rfb
Werde morgen renams code ausprobieren. Falls es nicht funktionieren sollte, werd ichs mit deinen Hinweisen probieren.

Zitat:
Üblicherweise würde man dann die betreffenden Funktionen und die gemeinsam genutzten Variablen einfach zusammen in ein Objekt stecken.

Könntest du mir dies etwas nächer erklären und wie müsste ich das machen? Wäre nett wenn du mir nochmals Helfen kannst.

danke für eure Hilfe

Klaus

Antwort 8 von rfb

Im Prinzip macht renans Code das was ich schrieb - das sollte so schon funktionieren. Die Zeile
var a=new Array();
ist allerdings überflüssig, es reicht die Variable zu deklarieren mit
var a=content.split(lf);
Das wird dann automatisch ein Array.

Wenns läuft freue dich - in Objekten gekapselte Funktionen sind ein Ding für sich und nix für den Anfang. Erklärungen dafür findest du zB. hier:
http://ichwill.net/


Antwort 9 von renan

Zitat:
Die Zeile var a=new Array(); ist allerdings überflüssig

stimmt, hab ich übersehen. typischer fehler, wenn man neuen code produziert, indem man alten umschreibt. die funktion csv2table() ist mehr oder weniger eine verschmelzung von file2array() und array2table(), die ich schoma für jessica klaus-dieter schrieb.
probleme kann es mit dem linefeed geben. falls die trennung der zeilen nicht funzt, sollte es von "\r\n" nach "\n" geändert werden.

aber noch eine frage an den experten:
wie kann man das pattern von replace variabel machen? die patternangabe durch eine variable zu ersetzen, funzt bei mir nur wenn man die reg.-exp. begrenzungen ("//") weglässt, aber dann kann man kein "g" ("//g") mehr eingeben.
beispiel:

<html><head></head><body>
<script type="text/javascript">
var msg="";
var text="hallo";
var pattern="l";
msg+=text.replace(/l/,"L")+"; pattern=/l/\n";
msg+=text.replace(pattern,"L")+"; pattern=var \"l\"\n";
pattern="/l/";
msg+=text.replace(pattern,"L")+"; pattern=var \"/l/\"\n";
msg+=text.replace(/l/g,"L")+"; pattern=/l/g\n";
pattern="/l/g";
msg+=text.replace(pattern,"L")+"; pattern=var \"/l/g\"\n";
alert(msg);
</script>
</body></html>


Antwort 10 von Klaus1

Hallo

Das tabellarische Anzeigen funktioniert jetzt mit euer hilfe.

Es ist richtig, das du schonmal für jessica was erstellt hast.
War eine hta-Datei. Funktionierte auch prima. Wir (ich und jessica, erstellen zusammen dieses Projekt)´haben es in html umbenannt und weiter rumgebastelt.

Jetzt hat uns der Ehrgeiz gepackt und wir würden auch für den Firefox eine lauffähige Version erstellen, da deine Version ActivX-Objecte enthält, die nur im IE laufen. Darum probieren wirs jetzt mit AJAX.

MIt Dieter haben wir aber nichts zu tun.

Tschau Klaus und Danke für die kompetente Hilfe

Antwort 11 von rfb

@renan:

var text = "das ist toll! dies noch mehr";
var muster = "dies|das";
var RegExpObjekt = new RegExp(muster, "g");
var ersetzedurch = "jenes"; 
var message = text.replace(RegExpObjekt, ersetzedurch);
alert(message);


sollte als Ausgabe "jenes ist toll! jenes noch mehr" erzeugen.

das Geheimnis liegt im Erzeugen eines neuen RegExp-Objekts mittels der Syntax
new RegExp()
, die leider bei SelfHTML zu kurz kommt.

Antwort 12 von renan

cool! thx!

ps:
Zitat:
das Geheimnis liegt im Erzeugen eines neuen RegExp-Objekts [..] die leider bei SelfHTML zu kurz kommt.

das ist zwar nicht der grund, warum ich es nicht wusste, aber das muss ja keiner erfahren. ;-)

Ich möchte kostenlos eine Frage an die Mitglieder stellen:


Ähnliche Themen:


Suche in allen vorhandenen Beiträgen: