Netscape-Problem mit select per document.write

[Sebastian Becker]

Hallo,

ich habe folgendes Problem und hoffe auf einen Tip:

Ein select-Menü wird per document.write aus einer externen .js-Datei ausgelesen und in verschachtelte Tabellen geschrieben. (Der beschriebene Effekt trat aber auch ohne Tabellen auf!)

Im Internet Explorer 5.5 funktionier das ganze auch ganz prima. Im Netscape 4.7 wird aber - und zwar ganz willkürlich bei etwa jedem zweiten Reload der Seite - statt dem Select-menü der Text der option-Felder dargestellt.

Das ist natürlich unsinnig und für mich nicht nachvollziehbar.

Hier das Script in Kurzform:

function writemenu()
{
document.write('<form name="selector">'+'<select size="1" name="link" class="select1" onChange="go(this.form.link.options[this.form.link.options.selectedIndex].value)">'

// Menüzeile schreiben
+'<option value="headline" selected>Schnellnavigation</option>'
+'<option value="empty"></option>'
+'<option value="gesamt.htm">Gesamtliste</option>'
+'</select>'+'</form>');
}

Als weiteres Problem wird übrigens beim Original-Skript die erste option-Zeile nicht angezeigt - auch das ist mir unverständlich?

Vielleicht sind die genannten Probleme ja schon bekannt und/oder lösbar?!

Danke für die Unterstützung, Grüße,

Sebastian Becker

[Carsten]

Hallo Sebastian,

Das von dir gepostete Code-Stück funktioniert bei mir ganz prima (NN4.73) auch
bei mehrmaligem reload.

Als weiteres Problem wird übrigens beim Original-Skript die erste
option-Zeile nicht angezeigt - auch das ist mir unverständlich?

hm... vieleicht doch mal die URL posten - oder den soweit minimierten Code,
das der Fehler grade noch auftritt.

Gruss,
Carsten

[Sebastian Becker]

Hallo  Carsten,

vielen Dank für deine freundliche Hilfe.

Hier der leider etwas umfangreiche komplette Code (es ist fast unmöglich, festzustellen, ab wann der Fehler auftritt, da dies plötzlich und unberechenbar geschieht).

Zunächst die externe .js-Datei:

------ schnipp ------

// Array mit Menüinhalten aus Datenbank
var items = new Array
(
new item('Layout','layout.htm'),
new item('Layout Content','layout_content.htm'),
new item('Thema 1 Afro Beauty Shop','afrobeautyshop.htm'),
new item('Thema 2 Agrarbank von Griechenland','agrarbank.htm'),
new item('Thema 3 Almina  Mode & Antiquitäten','almina.htm'),
new item('Thema 4 Alta Moda','altamoda.htm'),
new item('Thema 5 Anna Dessous','annadessous.htm'),
new item('Thema 6 Antiques  Schöne alte Möbel','antiques.htm'),
new item('Thema 7 blablablabblablablablablalabla','adress7.htm'),
new item('Thema 8 blablablabblablablablablalabla','adress8.htm'),
new item('Adresse dieser Seite','adress1.htm')
);

function item(theme,adress)
{this.theme=theme;this.adress=adress;}

// Linkaufruf bzw. Alertmeldungen bei falscher Auswahl
function go(adress)
{
if(adress == "headline")
{
alert("Themengruppen können nicht ausgewählt werden." + "\n\nBitte wählen Sie ein Thema.\n");
document.forms[1].reset();
document.selector.link.blur();
return false;
}
else if(adress == "empty")
{
alert("Bitte wählen Sie ein Thema.");
document.forms[1].reset();
document.selector.link.blur();
return false;
}
else if (adress == thisadress)
{
alert("Sie befinden sich bereits auf der von Ihnen ausgewählten Seite!\n");
document.forms[1].reset();
document.selector.link.blur();
return false;
}
else
{
document.location.href = adress;
document.forms[1].reset();
document.selector.link.blur();
}
}

function writemenu()
{
document.write('<form name="selector" title="Wählen Sie aus dem Menü ..." onMouseOver="window.status='Wählen Sie aus dem Menü ...';return true" onMouseOut="window.status=''">'
+'<select size="1" name="link" width="200" style="width:200" class="select1" onChange="go(this.form.link.options[this.form.link.options.selectedIndex].value)"'

// Menüzeile mit fixen Werten schreiben
+'<option value="empty"></option>' // Wird nicht angezeigt (?!)
+'<option value="headline" selected>Schnellnavigation</option>'
+'<option value="empty"></option>'
+'<option value="gesamt.htm">Gesamtliste</option>'
+'<option value="shopping.htm">Shopping</option>'
+'<option value="kultur.htm">Kultur und Unterhaltung</option>'
+'<option value="gastro.htm">Gastronomie, Hotels</option>'
+'<option value="dienstleister.htm">Dienstleister</option>'
+'<option value="Institutionen.htm">Institutionen</option>'
+'<option value="umgebung.htm">Umgebung</option>'
+'<option value="neu.htm">Neue Einträge</option>'
+'<option value="sponsoren.htm">Sponsoren</option>'
+'<option value="empty" selected></option>');

for (var i=0; i<items.length; i++)
{
// Menütext begrenzen für Netscape
var theme_abbrev;  // abgekürzter Menütext
if(items[i].theme.length > 28)
{theme_abbrev = (items[i].theme.substring(0, 28) + "...")}
else {theme_abbrev = items[i].theme};
// Menüzeile mit Werten aus Array schreiben
{document.write('<option value="'+items[i].adress+'">'+theme_abbrev + '</option>');}
}
document.write('</select>'+'</form>');
}

------ schnipp ------

und nun der entsprechende Abschnitt im body:

------ schnipp ------

</table>
<!-- Tabelle Dropdownmenü -->
<table cellspacing="0" cellpadding="0" width="200" border="0">
<tr align="right">
<td><img height="10" src="pictures/onepixel.gif" alt="" width="9"></td>
<td class="link3">
<!-- Dropdownmenü -->
<script language="JavaScript" type="text/javascript">
<!--
writemenu();
//-->
</script>
<noscript><a href="liste.htm" title="Gesamtliste"><img src="pictures/wishlist.gif" width="20" height="11" border="0" alt="Gesamtliste">Gesamtliste </a></noscript></td>
</tr>
</table>
</td>
</tr>
</table>

------ schnipp ------

Über diesem Skript brüte ich nun schon seit Tagen und da habe ich gewagt, es einmal hier zu posten. Vielleicht fällt Dir - oder jemand anderem - ja etwas auf?!

Vielen herzlichen dank für die Mühe (vielleicht fällt ja auch ein Lern- oder Aha-Effekt dabei ab),
Grüße,

Sebastian

[Carsten]

Hallo Sebastian,

Bei mir lief es zunächst gar nicht (immer alle Optionen lesbar.)
Nach einigem rumfummeln ging es dann. Zwei Fehler gefunden, der Erste erklärt warum
die erste Option immer weg war, der Zweite wäre dir später beim Testen auch
noch aufgefallen. Nur geändert hat das nix, der eigentliche Fehler war immer
noch da. Die \n und das Schreiben in eine Variable (mt) hatte ich mehr der
Übersichtlichkeit wegen reingebaut. (Das macht die wysiwyg-Quelltext Ansicht
vom NN übersichtlicher. (Leider wird die aber nur einmal nach Programmstart
neu aufgebaut. ->testen beenden neustarten...)  
Dann hab ich testhalber mal writemenu() mt zurückgeben lassen und das erst im
HTML-Teil per document.write ausgegeben - seitdem geht es, auch nachdem ich es
zurückgebaut habe.
Sehr merkwürdig ... aber vielleicht solltest du jetzt mal testen ob es so bei
dir geht.

function writemenu()
{
  mt='<form name="selector" title="Wählen Sie aus dem Menü ..." \n'
  +'onMouseOver="window.status='Wählen Sie aus dem Menü ...';return true" onMouseOut="window.status=''">'
  +'\n<select size="1" name="link" width="200" class="select1" \n'
  +'onChange="go(this.form.link.options[this.form.link.options.selectedIndex].value)">' // ####### ein fehlendes > ergänzt
  
  // Menüzeile mit fixen Werten schreiben
  +'\n<option value="empty"></option>' // Wird nicht angezeigt (?!)
  +'\n<option value="headline" selected>Schnellnavigation</option>'
  +'\n<option value="empty"></option>'
  +'\n<option value="gesamt.htm">Gesamtliste</option>'
  +'\n<option value="shopping.htm">Shopping</option>'
  +'\n<option value="kultur.htm">Kultur und Unterhaltung</option>'
  +'\n<option value="gastro.htm">Gastronomie, Hotels</option>'
  +'\n<option value="dienstleister.htm">Dienstleister</option>'
  +'\n<option value="Institutionen.htm">Institutionen</option>'
  +'\n<option value="umgebung.htm">Umgebung</option>'
  +'\n<option value="neu.htm">Neue Einträge</option>'
  +'\n<option value="sponsoren.htm">Sponsoren</option>'
  +'\n<option value="empty" selected></option>';
  
  
  for (var i=0; i<items.length; i++)
  {
    // Menütext begrenzen für Netscape
    var theme_abbrev;  // abgekürzter Menütext
    if(items[i].theme.length > 28)
    {
      theme_abbrev = (items[i].theme.substring(0, 28) + "...")
    }
    else
    {
      theme_abbrev = items[i].theme
    };
    // Menüzeile mit Werten aus Array schreiben
    {
      mt+='\n<option value="'+items[i].adress+'">'+theme_abbrev + '</option>'; // ######## 2 x \ vor ' entfernt
    }
  }
  mt+='\n</select>'+'\n</form>\n';

document.write(mt);
  
}

Die Tabellenschachtelung war irgendwie nicht ganz ok, (nicht, dass das was
geändert hätte) hier der 'fehlerfreie' code mit dem ich getestet habe:

<html><title>MENU TEST</title>
<script language="JavaScript" src="menu.js" type="text/javascript">
</script>
<body>
<table><tr><td>  <!-- ####### -->
<!-- Tabelle Dropdownmenü -->
<table cellspacing="0" cellpadding="0" width="200" border="0">
<tr align="right">
<td><img height="10" src="pictures/onepixel.gif" alt="" width="9"></td>
<td class="link3">
<!-- Dropdownmenü -->
<script language="JavaScript" type="text/javascript">
<!--
writemenu();
//-->
</script>
<noscript><a href="liste.htm" title="Gesamtliste"><img src="pictures/wishlist.gif" width="20" height="11" border="0"
alt="Gesamtliste">Gesamtliste </a></noscript></td>
</tr>
</table>
</td>
</tr>
</table>

so, jetzt geh ich aber ins Bett,
Carsten

[Sebastian Becker]

Hallo Carsten,

erstmal vielen herzlichen Dank für Deine große Mühe - und den entgangenen Schlaf (es ist hier ja keineswegs selbstverständlich, daß sich jemand so geduldig mit "trivialen" Problemen anderer beschäftigt).

Ich werd das ganze jetzt mal einbauen und checken, ob es so läuft.

Komischerweise habe ich neuerdings ein weiteres Problem mit dem Script: Der "onChange"-eventHandler gibt mir immer "headline" zurück, so daß die Navigation nicht mehr funktioniert. So bin ich dann auch erst um 5 Uhr frustiert ins Bett gegangen ...

Vielleicht find' ich den Fehler ja beim Einbau Deiner Änderungen!

Grüße,

Sebastian

[Sebastian Becker]

Hallo, Carsten,

so, hier bin ich wieder nach dem Umbau nach Deinen Vorschlägen und dem Testen. Das Schreiben in eine Variable (mt) habe ich übernommen und die Fehler habe ich beseitigt (nochmals Danke für den Hinweis!). Komischerweise geht jetzt auch mein "onChange"-Eventhanler wieder.

Leider sind aber im Netscape 4.73 immer noch alle Optionen als Text lesbar. Die erste Option ist auch im IE immer noch weg, sobald ich die eingefügte Leeroption herausnehme.

Wie soll ich denn eigentlich writemenu() mt zurückgeben lassen und das erst im HTML-Teil per document.write ausgeben lassen? document.write(writeMenu(mt)) ist doch kein gültiger Funktionsaufruf?! Oder habe ich da irgendetwas falsch verstanden?

Ich mache drei Kreuze wenn dieses blöde Skript endlich funktioniert! Aber es ist wichtig, da es auf über 100 Seiten aufgerufen werden soll!

Danke, danke, danke, Grüße,

Sebastian

[Carsten]

Hallo Sebastian,

Komischerweise geht jetzt auch mein "onChange"-Eventhanler wieder.

Komisch ist das alles... ich hatte im ViewSource das <select ...> Tag
ein zweites mal drinstehen, und das gibt der Quelltext nun auf gar keinen
Fall her.

Leider sind aber im Netscape 4.73 immer noch alle Optionen als Text lesbar.

Kannst mir ja mal die aktuelle Version mailen, mal sehen was mein NN4.73 dazu
sagt.
Und beim Drücken auf 'Neu Laden' immer schön die Umschalt-Taste festhalten,
damit der NN den Cache umgeht.

Die erste Option ist auch im IE immer noch weg, sobald ich die
eingefügte Leeroption herausnehme.

???
Denn _das_ lag 100% eindeutig an dem fehlenden '>'.  Wenn du das also
eingefügt hast muss es gehen.

Leider Nerven beim Testen die Browser-Caches immer wieder. Eventuell also
erstmal die externe .js Datei in die HTML Datei reinkopieren und debuggen.
Bei _einer_ html Datei kann man nämlich den Browser(Cachhe) austricksen indem
man an den Dateinamen ein ?1243 anhängt und diese Zeichen jedesmal ändert.
(test.htm?123 test.htm?34a5 test.htm?plopp47 etc.)

Wie soll ich denn eigentlich writemenu() mt zurückgeben lassen und das
erst im HTML-Teil per document.write ausgeben lassen?
document.write(writeMenu(mt)) ist doch kein gültiger Funktionsaufruf?!

1.) writeMenu() so umbauen das es mt zurückgibt:
.....
      mt+='\n<option value="'+items[i].adress+'">'+theme_abbrev + '</option>';
    }
  }
  mt+='\n</select>'+'\n</form>\n';

// nix mehr mit document.write(mt); sondern
  return mt;
}

2.) und im HTML dann den Rückgabewert ins Dokument schreiben:

.....
<script language="JavaScript" type="text/javascript">
<!--
  text=writemenu();
  document.write(text);
//-->
</script>
.....

Gruss,
Carsten

[Sebastian Becker]

Hallo,

danke für die vielen nützlichen Tips, die wirklich geholfen haben!

Ich hab' jetzt mal den von dier überarbeiteten Quellcode direkt verwendet, anstatt lediglich die von mir erkannten Änderungen zu übernehmen.

Und siehe da - es funktioniert nun alles auch im Netscape, auch wenn ich immer noch nicht so genau weiß, woran der Haupfehler eigentlich gelegen hat.

Toll!!! Die Sache hat mich nämlich tagelang beschäftigt und ich war schon völlig frustriert!

Grüße aus Berlin,

Sebastian

[Carsten]

Hallo Sebastian,

Bei mir lief es zunächst gar nicht (immer alle Optionen lesbar.)
Nach einigem rumfummeln ging es dann. Zwei Fehler gefunden, der Erste erklärt warum
die erste Option immer weg war, der Zweite wäre dir später beim Testen auch
noch aufgefallen. Nur geändert hat das nix, der eigentliche Fehler war immer
noch da. Die \n und das Schreiben in eine Variable (mt) hatte ich mehr der
Übersichtlichkeit wegen reingebaut. (Das macht die wysiwyg-Quelltext Ansicht
vom NN übersichtlicher. (Leider wird die aber nur einmal nach Programmstart
neu aufgebaut. ->testen beenden neustarten...)  
Dann hab ich testhalber mal writemenu() mt zurückgeben lassen und das erst im
HTML-Teil per document.write ausgegeben - seitdem geht es, auch nachdem ich es
zurückgebaut habe.
Sehr merkwürdig ... aber vielleicht solltest du jetzt mal testen ob es so bei
dir geht.

function writemenu()
{
  mt='<form name="selector" title="Wählen Sie aus dem Menü ..." \n'
  +'onMouseOver="window.status='Wählen Sie aus dem Menü ...';return true" onMouseOut="window.status=''">'
  +'\n<select size="1" name="link" width="200" class="select1" \n'
  +'onChange="go(this.form.link.options[this.form.link.options.selectedIndex].value)">' // ####### ein fehlendes > ergänzt
  
  // Menüzeile mit fixen Werten schreiben
  +'\n<option value="empty"></option>' // Wird nicht angezeigt (?!)
  +'\n<option value="headline" selected>Schnellnavigation</option>'
  +'\n<option value="empty"></option>'
  +'\n<option value="gesamt.htm">Gesamtliste</option>'
  +'\n<option value="shopping.htm">Shopping</option>'
  +'\n<option value="kultur.htm">Kultur und Unterhaltung</option>'
  +'\n<option value="gastro.htm">Gastronomie, Hotels</option>'
  +'\n<option value="dienstleister.htm">Dienstleister</option>'
  +'\n<option value="Institutionen.htm">Institutionen</option>'
  +'\n<option value="umgebung.htm">Umgebung</option>'
  +'\n<option value="neu.htm">Neue Einträge</option>'
  +'\n<option value="sponsoren.htm">Sponsoren</option>'
  +'\n<option value="empty" selected></option>';
  
  
  for (var i=0; i<items.length; i++)
  {
    // Menütext begrenzen für Netscape
    var theme_abbrev;  // abgekürzter Menütext
    if(items[i].theme.length > 28)
    {
      theme_abbrev = (items[i].theme.substring(0, 28) + "...")
    }
    else
    {
      theme_abbrev = items[i].theme
    };
    // Menüzeile mit Werten aus Array schreiben
    {
      mt+='\n<option value="'+items[i].adress+'">'+theme_abbrev + '</option>'; // ######## 2 x \ vor ' entfernt
    }
  }
  mt+='\n</select>'+'\n</form>\n';

document.write(mt);
  
}

Die Tabellenschachtelung war irgendwie nicht ganz ok, (nicht, dass das was
geändert hätte) hier der 'fehlerfreie' code mit dem ich getestet habe:

<html><title>MENU TEST</title>
<script language="JavaScript" src="menu.js" type="text/javascript">
</script>
<body>
<table><tr><td>  <!-- ####### -->
<!-- Tabelle Dropdownmenü -->
<table cellspacing="0" cellpadding="0" width="200" border="0">
<tr align="right">
<td><img height="10" src="pictures/onepixel.gif" alt="" width="9"></td>
<td class="link3">
<!-- Dropdownmenü -->
<script language="JavaScript" type="text/javascript">
<!--
writemenu();
//-->
</script>
<noscript><a href="liste.htm" title="Gesamtliste"><img src="pictures/wishlist.gif" width="20" height="11" border="0"
alt="Gesamtliste">Gesamtliste </a></noscript></td>
</tr>
</table>
</td>
</tr>
</table>

so, jetzt geh ich aber ins Bett,
Carsten