Gruppen

Top Gruppen: Windows 7; Windows Vista; Windows XP; Textverarbeitung; Excel; DSL; Internet Browser; E-Mail/Outlook
Betriebsysteme: Windows classik; Linux; BS-Sonstige
Software: Datenbanken; Bildbearbeitung; Audio/mp3/Video; Security/Viren; SW-Sonstige
Hardware: Mainboard/CPU; Grafikkarten; Peripherie; Laptop/Notebook; HW-Sonstiges
Netzwerk: Telefon,ISDN,Modem; W-Lan; NW-Sonstiges
Programmierung: PHP,ASP,Perl...; Java,C++...; Webseiten/HTML
Sonstiges: PC-Sonstiges; Plauderecke; SN Intern; Test

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

Skripte(PHP,ASP,Perl...)

Fragevon Klaus1 vom 20.05.2019, 12:16 Options

Formatierungsbroblem beim Anzeigen von Datein mittels AJAX

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.


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;
}

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 schreiben

Antwort 1 von rfb vom 20.05.2019, 17:12 Options

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 vom 21.05.2019, 10:09 Options

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 vom 21.05.2019, 10:29 Options

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 vom 21.05.2019, 11:40 Options

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 vom 21.05.2019, 12:15 Options


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 vom 21.05.2019, 12:25 Options

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 vom 21.05.2019, 22:23 Options

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 vom 22.05.2019, 08:46 Options

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 vom 22.05.2019, 09:32 Options

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 vom 22.05.2019, 10:29 Options

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 vom 22.05.2019, 14:01 Options

@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 vom 22.05.2019, 14:13 Options

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. ;-)

Hinweis

Diese Frage ist schon etwas älter, Sie können daher nicht mehr auf sie antworten. Sollte Ihre Frage noch nicht gelöst sein, stellen Sie einfach eine neue Frage im Forum..