dynamisch erzeugter Inhalt eines Textareas??
Christian Heurich
- javascript
Hallo,
ich habe folgendes Problem mit dem NS6.
Ich möchte den Inhalt eines Layers dynamisch ändern. Zu den Inhalt zählt auch ein Textbereich mit Inhalt.
(.....inhalt+="</font></td></tr><tr><td width='100%' height='80'><textarea rows='4' name='beschreibung' cols='39' readonly>";
inhalt+=beschreibung;
inhalt+="</textarea></td></tr><tr><td width='100%' height='25'><font size='1' face='Arial'>";.....)
Ich 'generiere' also als erstes einen String mit dem Inhalt als HTML
und schreibe dann den string mit:
element=document.all['detail_artikel'];
element.style.display='block';
element.innerHTML=inhalt;
in den Layer.
Allerdings bleibt der Textbereich beim anzeigen im NS6 leer!
Es liegt nicht an den Inhalt der Var 'beschreibung' ich habe auch schon einen festen Text vorgegeben!
Woran könnte es liegen, bin am verzweifeln!!!!
vielen Dank für eure Hilfe
mfg
Christian
Hallo,
element=document.all['detail_artikel'];
element=document.getElementById('detail_artikel');
(auch fuer IE 5+)
MfG, Thomas
OK, hab ich auch.
Hatte nur den falschen Inhalt der If-Schleife gepostet.
Aber das erklärt nicht warum der Inhalt des Textareas nicht angezeigt wird. Der Rest funzt, Also Inhalt von einzeiligen Textfelden u. so. klappt wunderbar. Auch der restliche Inhalt...
nur eben das Textarea will nicht klappen.
mfg christian
Hallo,
nur eben das Textarea will nicht klappen.
readonly ist auch nicht gerade guenstig fuer das Einfuegen von Inhalten.
MfG, Thomas
Hallo,
ich habe folgendes Problem mit dem NS6.
Ich möchte den Inhalt eines Layers dynamisch ändern. Zu den Inhalt zählt auch ein Textbereich mit Inhalt.
(.....inhalt+="</font></td></tr><tr><td width='100%' height='80'><textarea rows='4' name='beschreibung' cols='39' readonly>";
inhalt+=beschreibung;
inhalt+="</textarea></td></tr><tr><td width='100%' height='25'><font size='1' face='Arial'>";.....)
Ich 'generiere' also als erstes einen String mit dem Inhalt als HTML
Das ist kein gültige HTML.
Das font Tag ist veraltet und soll nicht mehr verwendet werden, height gibt es nicht als Attribut für Tabellen und das wichtigste du hast ein Formular Element ohne Formular. Dann wäre es für die Beantwortung deiner Frage noch relevant zu Wissen, was in beschreibung steht.
Außerdem ist es seltsam, das du ein Formularelement zum anzeigen nimmst, falls du scrollbalken brauchst, nimm einen Layer und benutze overflow:scroll;
http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#overflow
element=document.all['detail_artikel'];
Das ist für den IE 4 geschrieben.
Struppi.
Hallo,
das mag sein dass die Notation nicht ganz zu 100% up-to-Date ist aber ich versuche mit der seite abwärtskompatibel zu sein.(jedenfalls in gewissen grenzen)
1. Was sollte man stattdessen nehmen um die höhe von Zellen anzugeben?
2. Formular ist weiter oben definiert, ich wollte aber nicht den kompletten text der 'Inhalt'-Variable posten - weil zu lang
3. In Beschreibung steht z.B. "256MB PC333 noECC" oder "Case 2,5" ext." oder "Hallo" :)
4. Wie schon gesagt das mit dem Overflow ist schön und gut aber erst ab IE5 und NS6! und wieder habe ich probleme mit der kompatibilität.
Es ist zwar nervig für IE4 zu Coden aber viele Firmen haben halt noch Win-NT und da ist oft nur IE4 oder früher dabei!
Also ich hoffe das ihr mir nochmal auf die Sprünge helfen könnt.
mfg
Christian
Hallo,
das mag sein dass die Notation nicht ganz zu 100% up-to-Date ist aber ich versuche mit der seite abwärtskompatibel zu sein.(jedenfalls in gewissen grenzen)
Das Font Tag wird wenn überhaupt für Netscape 3 benötigt, du programmierst aber für den IE 4 und glaubst dass du abwärtskompatibel bist? Da kann ja was nicht stimmen.
- Was sollte man stattdessen nehmen um die höhe von Zellen anzugeben?
<style>
td
{
height:XXXpx;
}
</script>
- In Beschreibung steht z.B. "256MB PC333 noECC" oder "Case 2,5" ext." oder "Hallo" :)
und dass muss in einer Textarea stehen?
- Wie schon gesagt das mit dem Overflow ist schön und gut aber erst ab IE5 und NS6! und wieder habe ich probleme mit der kompatibilität.
Dein Skript läuft nur in IE 4 kompatibeln Browsern.
Es ist zwar nervig für IE4 zu Coden aber viele Firmen haben halt noch Win-NT und da ist oft nur IE4 oder früher dabei!
Die Art deines Skriptes ist extrem inkompatibel zu allen Browsern auuser dem IE 4.0.
Wenn du wirklich eine Textarea nehmen willst (was tatsächlich am Besten ist, wenn du viele Browser ansprechen willst), dann kannst du den Inhalt mit value verändern, aber nur Text, keine HTML Code.
<form.....>
<textarea name="text">
</textarea>
</form>
<script ....>
document.forms[0].text.value="neuer Text";
</script>
ok...hier der komplette SC:
////////////////////////////////////////////////
//Browsercheck
//
// DHTML: 1 falls DHTML Modell verfügbar ist sonst 0
// DOM : 1 falls DOM verfügbar (neuerer Browser) sonst 0
// MS : MSIE, falls MS=1 und DOM=0, muss mit syntax für IE4 gearbeitet werden
// NS : 1 falls NS der 4.ten Generation(mit DOM=0); falls 6er dann DOM=1!
// OP : 1 falls Opera Browser, falls DOM / DHTML = 1 dann neue Generation
//
var DHTML = 0, DOM = 0, MS = 0, NS = 0, OP = 0;
if (window.opera) {
OP = 1;
}
if(document.getElementById) {
DHTML = 1;
DOM = 1;
}
if(document.all && !OP) {
DHTML = 1;
MS = 1;
}
if (window.netscape && window.screen && !DOM && !OP){
DHTML = 1;
NS = 1;
}
//
/////////////////////////////////////////////////
// Variablen deklarieren
var ident_alt='';
var show_layer=false;
var inhalt;
////////////////////////////////////////////////
//Funktionen
///////////////////////////////////////////////////
//neues Fenster für die Bildanzeige
function show_pic(url){
var winjpg = null;
winjpg = window.open('','jpg','directories=0,status=1,scrollbars=auto,resizable=1,left=80,top=150,width=300,height=300');
if (winjpg != null) {
winjpg.location =url;
}
}
///////////////////////////////////////////////////
//neues Fenster für die Datenblattanzeige
function show_data(url){
var windata = null;
windata = window.open('','data','directories=0,status=1,scrollbars=auto,resizable=1,left=80,top=150');
if (windata != null) {
windata.location =url;
}
}
///////////////////////////////////////////////////
//Artikel in Tabelle markieren und Funktionen zum zeigen des neuen Layers aufrufen
function detail(ident){
if(DOM){
//alte Auswahl löschen
if (ident_alt!=''){
document.getElementById(ident_alt).style.backgroundColor = '';
}
//neue Auswahl markieren
document.getElementById(ident).style.backgroundColor = '#B4D2FF';
ident_alt=ident;
}
else
{
if(MS){
//alte Auswahl löschen
if (ident_alt!=''){
document.all[ident_alt].bgColor = '';
}
//neue Auswahl markieren
document.all[ident].bgColor = '#B4D2FF';
}
if(NS){
//alte Auswahl löschen
if (ident_alt!=''){
document.layers[ident_alt].bgColor = '';
}
//neue Auswahl markieren
document.layers[ident].bgColor = '#B4D2FF';
}
}
//layer anzeigen
show_layer=true;
zeige_layer(ident,'detail_layer');
slide_layer();
}
////////////////////////////////////////////////////////////////////////////////////
//Inhalt für Layer erzeugen und mit entsprechenden Werten füllen anschließen anzeigen
function zeige_layer(artikelnr,welchen){
//variablen holen aus Array artikel[artikelnr]
var artikelnummer=unescape(artikelnr);
var herstellernummer=unescape(artikel[artikelnr][0]);
var beschreibung=unescape(artikel[artikelnr][1])+' '+unescape(artikel[artikelnr][2]);
var warengruppe1=unescape(artikel[artikelnr][3]);
var warengruppe2=unescape(artikel[artikelnr][4]);
var hersteller=unescape(artikel[artikelnr][5]);
var preis_art=unescape(artikel[artikelnr][6]);
var preis=unescape(artikel[artikelnr][7]);
var aktion_bis=unescape(artikel[artikelnr][8]);
var datenblatt=unescape(artikel[artikelnr][9]);
var bild=unescape(artikel[artikelnr][10]);
var version=unescape(artikel[artikelnr][11]);
var system=unescape(artikel[artikelnr][12]);
var sprache=unescape(artikel[artikelnr][13]);
var bus=unescape(artikel[artikelnr][14]);
var garantie=unescape(artikel[artikelnr][15]);
var eta=unescape(artikel[artikelnr][16]);
inhalt="<table border='1' cellpadding='0' cellspacing='0' style='border-collapse: collapse' bordercolor='#111111' width='550' height='200'><tr><td width='100%' height='170'>";
inhalt+="<table border='0' cellpadding='0' cellspacing='0' style='border-collapse: collapse' bordercolor='#111111' width='550' height='100%'><tr><td width='370'>";
inhalt+="<table border='0' cellpadding='0' cellspacing='5' style='border-collapse: collapse' bordercolor='#111111' width='100%' height='170'><tr><td width='100%' height='65'>";
inhalt+="<font face='Arial' size='2'><b>Hersteller: <i>";
inhalt+=hersteller;
inhalt+="</i></b><br></font><font face='Arial' size='1'>";
inhalt+=warengruppe1+' - '+warengruppe2;
inhalt+="<br>Artikelnummer: ";
inhalt+=artikelnr;
inhalt+=" Herstellernummer: ";
inhalt+=herstellernummer;
inhalt+="</font></td></tr><tr><td width='100%' height='80'><textarea rows='4' name='beschr' cols='39'>";
//inhalt+=beschreibung;
inhalt+="</textarea></td></tr><tr><td width='100%' height='25'><font size='1' face='Arial'>";
if(bild!=''){
inhalt+="<a href=JavaScript:show_pic(/JPG/"+bild+"');><font size='1' face='Arial' color='#000000'><img border='0' src='images/bild.gif' align='middle' width='24' height='23'>Bild anzeigen</font></a> ";
}
else
{
inhalt+=" ";
}
if(datenblatt!=''){
inhalt+="<a href=JavaScript:show_data(/PDF/"+datenblatt+"');><font size='1' face='Arial' color='#000000'><img border='0' src='images/datenblatt.gif' align='middle' width='24' height='23'>Datenblatt anzeigen</font></a>";
}
else
{
inhalt+=" ";
}
inhalt+="</font></td></tr></table></td><td width='180'><table border='0' cellpadding='0' cellspacing='0' style='border-collapse: collapse' bordercolor='#111111' width='100%' height='170'>";
inhalt+="<tr><td width='100%' height='25' align=right><a href=JavaScript:close_layer()><b><i><font face='Arial' size='1' color='#000000'>Fenster schließen X</font></b></i></a></td>";
inhalt+="</tr><tr><td width='100%' height='15'><font face='Arial' size='1'>System: ";
inhalt+=system;
inhalt+="</font></td></tr><tr><td width='100%' height='15'><font face='Arial' size='1'>Sprache: ";
inhalt+="deutsch";
inhalt+="</font></td></tr><tr><td width='100%' height='15'><font face='Arial' size='1'>Bus: ";
inhalt+=bus;
inhalt+="</font></td></tr><tr><td width='100%' height='15'><font face='Arial' size='1'>Version: ";
inhalt+=version;
inhalt+="</font></td></tr><tr><td width='100%' height='15'><font face='Arial' size='1'>Garantie(Mon.): ";
inhalt+=garantie;
inhalt+="</font></td></tr><tr><td width='100%' height='15'><font face='Arial' size='1'>ETA: ";
inhalt+=eta;
inhalt+="</font></td></tr><tr><td width='100%' height='15'><font face='Arial' size='1'>Aktion bis: ";
inhalt+=aktion_bis;
inhalt+="</font></td></tr><tr><td width='100%' height='40'><p align='center'><font size='1' face='Arial'>Preis (";
inhalt+=preis_art;
inhalt+="): ";
inhalt+="</font><i><b><font face='Arial'>";
inhalt+=preis;
inhalt+="</font></b></i></td></tr></table></td></tr></table></td></tr><tr><td width='100%' height='30' bgcolor='#C0C0C0'><p align='center'><font face='Arial' size='1'>";
inhalt+="<input type=hidden name='artikelnummer' value='"+artikelnummer+"'>";
inhalt+="Menge:<input type='text' name='menge' size='5' value='1'> ";
inhalt+="Bemerkung:<input type='text' name='bemerkung_pos' size='20'> ";
inhalt+="<input type='button' value='Artikel in Korb' name='abschicken' onClick='JavaScript:in_basket()'></font></td></tr></table>";
//Inhalt des Layers ändern (inhalt)
if(DOM){
element=document.getElementById('detail_artikel');
element.style.display='block';
element.innerHTML=inhalt;
}
else
{
if(MS || OP){
element=document.all['detail_artikel'];
element.style.display='block';
element.innerHTML=inhalt;
}
if(NS)
{
element=document.layers['detail_artikel'].document;
element.style.display='block';
element.document.open();
element.document.write('inhalt');
element.document.close();
}
}
document.artikel_details.beschr.value=beschreibung;
}
so ich möchte hiermit die diskussion über inkompatibilität jetzt an dieser stelle abbrechen weil mir das nicht bei der problemlösung hilft!
ich schreibe jetzt den value des textareas nachträglich und beim ersten aufruf des layers funktioniert das auch aber bei weiteren aufrufen des layers bleibt das textarea wieder leer!
Außer ich habe vor "document.artikel_details.beschr.value=beschreibung;" ein "alert(beschreibung);" :| ???????????
mfg
Christian Heurich
///////////////////////////////////////////////////
//neues Fenster für die Bildanzeige
function show_pic(url){
var winjpg = null;
winjpg = window.open('','jpg','directories=0,status=1,scrollbars=auto,resizable=1,left=80,top=150,width=300,height=300');
if (winjpg != null) {
winjpg.location =url;
Die URL kannst du auch als 1. Parameter von window.open übergeben.
ich schreibe jetzt den value des textareas nachträglich und beim ersten aufruf des layers funktioniert das auch aber bei weiteren aufrufen des layers bleibt das textarea wieder leer!
Naja, weil wahrscheinlich der Browser noch nicht fertig ist. d.h. document.artikel_details ist nicht vorhanden (ich seh auch kein form name="artikel_details").
Mit einer CSS könntest du den JS Code zumindest um einiges überschaubarer machen, es wäre vielleicht einfacher wenn du mal eine Beipsiel zeigen könntest, weil mir ist nicht 100% ersichtlich wann wo welche Funktion aufgerufen werden soll.
Struppi.
Das formular wird in der ergebniss.php initialisiert.
Es werden aus der DB alle Artikeldaten geholt und „verschlüsselt“ (mit escape_for_js – ähnlich der func escape in js) in ein JS-Array geschrieben (‚artikel[]’)
Gleichzeitig erfolgt die ausgabe in eine tabelle.
Beim klicken auf einen Tabelleneintrag wird dann die funktion ‚detail()’ aufgerufen.
Diese funktion markiert dann den entsprechende zeile und ruft die funktionen zeige_layer() und slide_layer() auf.
Zeige_layer holt dann die entsprechenden daten aus dem array und generiert den html-code für den layer.
Mit slide_layer soll der layer dann auch beim scrollen auf position gehalten werden. (klappt aber auch nicht so richtig…)
Close_layer schließt den layer und in_basket soll dann später den artikel in den Warenkorb verfrachten…
Ja, das ist eigentlich schon alles.
Kannst du einen fehler erkennen?
Was mache ich bei Slide_layer falsch?
Ich habe schon versucht das alert mit welchen es funktioniert mit einem setTimeout(‚’,500) zu simulieren aber das klappt nicht im NS6.
Ja, das ist eigentlich schon alles.
ich find das sehr viel.
Kannst du einen fehler erkennen?
Das ist wirklich alles zu unübersichtlich um das irgednwie nachzubauen. Ich kann dir nur sagen bei mir funktioniert es:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test</title>
<style>
.p
{
font-family: Arial, Helvetica, sans-serif;
font-size:0.9em;
}
</style>
<script type="Text/JavaScript">
var count = 0;
function show(vis)
{
var obj = document.getElementById('p1');
if(obj && obj.style)
{
if( obj.style.visibility != 'hidden')
{
obj.style.visibility = 'hidden'
}
else
{
var inhalt = "<table><tr><td>eine Tabelle(" + count++ + ")</td></tr></table>";
obj.innerHTML = inhalt;
obj.style.visibility = 'visible'
}
}
}
</script>
</head>
<body>
<div id="p1" class="p">alt</DIV>
<p>
<form>
<input type="button" name="auswahl" value="auswahl1" onclick="show()";>
</form>
</body></html>
Ich kann den Layer immer wieder neu beschreiben.
Bekomst du eigentlich eine Fehlermeldung?
Was mache ich bei Slide_layer falsch?
Die ist ja gar nicht da. Am einfachsten machst du sowas mit position:fixed;
Struppi.