Ajax und <select><option>

nilitsch · 13. Oktober 2006, 12:30

Hi....
Kann mir mal jemand sagen, was hier schief geht. Der verfluchte IE treibt mich gleich in den Wahnsinn. Mach da schon seit 4 Stunden rum.

Ich lasse eine <select>-Liste per Ajax mit <option> füllen. Je nachdem, was in der Liste zuvor ausgewählt wurde, werden andere Einträge in den <select>-Knoten eingebaut. Ist ja schade, dass der IE so verflucht blöd ist. Der Firefox blickts zumindest wenn man das Select-Element mit meinselect.innerHTML = "<option>123</option><option>456</option"; füllt.
Aber für IE muss ich das übers DOM machen. Toll.
Und nun möchte ich, wenn in der Liste zuvor eine andere Option ausgewählt wird erst alle Einträge in der ajax-Select-Liste gelöscht und wieder neu gefüllt werden.
Ich verwende dazu eine for-Schleife... Er lässt mir aber manchmal 2 oder einen Eintrag drin stehen, also löscht nicht alle <option> aus der Liste raus. Und ich frage mich warum?? Ich hab alles schon degebuggt... wenn ich mir
document.meinform.meinselect.meinoption.length ausgeben lasse, ist das nach dem Löschvorgang immer noch 2!!!!

Hier der Code: this.req.responseText liefert einen Datenstring zurück mit Benutzern und seinen daten, z.B.
"1|name1|admin#1|name2|user#3|name3|user#"
Die benutzer werden mit "#" getrennt und deren Daten mit "|"

Quellcode

function handleGetSupervisors() {
result = this.req.responseText;
alert(result);
list = new Array();
var tmp = result.split('#');
for(i=0; i<(tmp.length-1); i++) {
var tmp2 = tmp[i].split('|');
list[i] = new Array();
list[i][0] = tmp2[0]; // ID
list[i][1] = tmp2[1]; // Benutzername
list[i][2] = tmp2[2]; // Rolle
}
alert("BEGIN---------> Length:"+document.benutzer_anlegen.leiter.options.length);
// Löschen, aber das funktioniert nicht
var length = document.benutzer_anlegen.leiter.options.length;
for(i=0; i<length; i++) {
document.benutzer_anlegen.leiter.options[i] = null;
alert("deleted "+i);
}
alert("MIDDLE---------> Length:"+document.benutzer_anlegen.leiter.options.length);
// Select-Form mit options füllen
for(i=0; i<list.length; i++) {
alert("create "+i);
newOption = new Option(list[i][1]+" ("+list[i][2]+")", list[i][0], false, false);
document.benutzer_anlegen.leiter.options[i] = newOption;
}
alert("ENDE---------> Length:"+document.benutzer_anlegen.leiter.options.length);
//}
}

Alles anzeigen

Torben Brodt · 13. Oktober 2006, 13:40

hi,
also indem du dem objekt "null" zuweist, wirst du das objekt sicherlich nicht löschen.
Für dein anderes Problem musst du dich sowieso in abstrakte datentypen einarbeiten.

hier brauchst du einen stack.
beschrieben wird dieser hier
http://de.selfhtml.org/javascript/objekte/array.htm#pop

Quellcode

<html><head><title>Test</title>
<script type="text/javascript">
var Zahlen = new Array(1, 2, 3, 4, 5);
alert(Zahlen.length + " Zahlen im Array");
function Entfernen () {
Zahlen.pop();
alert(Zahlen.length + " Zahlen im Array");
}
</script>
</head><body>
<a href="javascript:Entfernen()">Zahl entfernen</a>
</body></html>

Alles anzeigen

nilitsch · 13. Oktober 2006, 17:49

So... dann lösch ichs einfach mit pop()? Dann muss ich aber dafür auch die Länge des Arrays durchgehen und pop() hintereinander wiederholt ausführen?

Warum gibt es eigentlich keine "array.clear()" Funktion?? Haben sich die Leute bei der Entwicklung nichts dabei gedacht, oder was?

Torben Brodt · 13. Oktober 2006, 20:07

was hast du denn? pop() ist doch ideal zum entfernen eines arrays
andere programmiersprachen erlauben das dynamische ändern der array länge gar nicht

nilitsch · 14. Oktober 2006, 06:07

Moin... ich reg mich ja nur auf, weils net funktioniert

Den Link, den Du oben angegeben hast ist übrigens tot.

Und

Quellcode

document.benutzer_anlegen.leiter.options.pop();

funktioniert auch nicht. Der IE sagt mir, dass diese Methode nicht unterstützt wird.

Torben Brodt · 14. Oktober 2006, 10:08

oh, sorry, ich hab ganz übersehen, dass du dem formular element direkt "null" zuweist
ich dachte es ginge um ein normales array

so geht das natürlich doch:
http://de.selfhtml.org/javascript/objekte/options.htm#elemente_loeschen

hier eine optimierte version:

Quellcode

<html><head><title>Test</title>
<script type="text/javascript">
function Loeschen () {
var idx = document.Testform.Auswahl.options.selectedIndex;
document.Testform.Auswahl.options[idx] = null;
alert('noch '+document.Testform.Auswahl.options.length+' elemente im array');
}
</script>
</head><body>
<form name="Testform" action="">
<select name="Auswahl" size="8">
<option>Auswahl 1</option>
<option>Auswahl 2</option>
<option>Auswahl 3</option>
<option>Auswahl 4</option>
<option>Auswahl 5</option>
</select>
<br>
<input type="button" value="Löschen" onclick="Loeschen()">
</form>
</body></html>

Alles anzeigen

klärt allerdings nicht, warum das bei dir nicht geht.
teste mal diesen code mit IE und firefox

nilitsch · 14. Oktober 2006, 11:06

Ja, so hatte ich es ja angedacht. Wenn 5 Einträge in mein select geladen werden und ich ein anderes Feld mit 1 Eintrag auswähle, dann lässt er den ersten und dritten noch drin (löscht das nicht, obwohl ich doch in der for-schleife komplett alle Einträge durchgehe!!!) und überschreibt dann den ersten <option> Eintrag. Der dritte steht aber weiterhin drin!!! Ich finde dazu einfach KEINE Erklärung... und KEINEN Sinn!!! Das ist das Schlimmste.... wenn es zumindest einen logischen Hintergrund hätte. Ich geh wirklich in der for-schleife alle option durch und setze sie auf "null".

Ach ja, der IE gibt mir eine Fehlermeldung aus: Die für den Vorgang erfolderlichen Daten sind noch nicht verfügbar.

Torben Brodt · 14. Oktober 2006, 12:24

*meld, meld*

ich hab die lösung.. javascript ist schon eine komische sprache
die indizes während der laufzeit geändert

ich geb dir mal ein beispiel

Quellcode

//loesche die ersten 4 elemente
while(++i < 5)
document.Testform.Auswahl.options[0] = null;

nilitsch · 14. Oktober 2006, 13:07

Echt komisch!! Meinst Du so lässt sich das lösen? Ist echt tricky... bin schon am überlegen, ob ich das einfach auf ne andere Weise löse.

Something nebenbei....
Kennst Du die Javascript-Methode, um strings auf Expressions zu überprüfen?
Z.B. ob ^[_/.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,4}$ im String vorkommt?
Finde im Netz nicht di passende Methode.

Torben Brodt · 14. Oktober 2006, 14:15

2x ja

ist ja nicht unbedingt tricky - die for schleife von hinten nach vorne durchzuarbeiten wäre ja auch eine lösung (eine umständlichere)

regex in javascript:
http://de.selfhtml.org/javascript/objekte/regexp.htm
http://de.selfhtml.org/javascript/objekte/string.htm#match

nilitsch · 14. Oktober 2006, 17:49

Also nur wenn ich das so mache:

Quellcode

var length = document.benutzer_anlegen.projektleiter.options.length;
while(++i < length+2) {
document.benutzer_anlegen.projektleiter.options[0] = null;
}

Warum ich die +2 an die Länge dranhängen muss, ist mir immer noch unklar... ist mir jetzt eigentlich auch schnuppe.

Was das match() angeht mit meinem Expression-String... was bekomm ich denn da zurückgeliefert? True oder false wahrscheinlich nicht. In einem Textfeld soll eine Email-Adresse validiert werden.

Torben Brodt · 14. Oktober 2006, 19:47

"nilitsch" schrieb:

Warum ich die +2 an die Länge dranhängen muss, ist mir immer noch unklar...

weil ++i bei 1 anfängt zu zählen und kleiner eben nicht "kleiner gleich" ist

match liefert ein boolean - siehe selfhtml

Quellcode

Ergebnis = Aussage.match(/\bMensch\b|\bMenschen\b/g);
if (Ergebnis)

nilitsch · 14. Oktober 2006, 20:40

@length+2: Ach so... Is klar.

@match: Nee, match() gibt mir null, bzw. einen komischen String zureuck.

Quellcode

erg = email.match("^[_/.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,4}$");
if(erg==null)
alert("Email nicht gueltig");

Funktioniert soweit auch, wenn ich Email-Adressen blabla, blabla@ und blabla@bla eingebe (-> Aufruf: Email nicht korrekt)
Sobald ich aber eine Email-Adresse bla_bla@blaaa eingebe, gibt er mich NICHT MEHR die gewuenschte Fehlermeldung aus, sondern sieht sie als gueltig an. (???)
Ich will das ueberprueft wird, ob er auch den . nach den @-Zeichen eingibt.

Und noch eine Sache, die mir beim IE stinkt. Ok..das mit der <select>-Listen Auswahlt funktioniert jetzt, aber falls neue Eintraege in die Datenbank eingefuegt werden, zeigt er mir der IE die nicht gleich an. Ich muss erst den Cache loeschen, damit der neue Eintrag in meiner Liste erscheint.
Ist es sinnvoll, das META-Tag no-cache zu setzen, oder wird meine Anwendung dann lahm????

nilitsch · 15. Oktober 2006, 06:33

Aber selbst, wenn ich im Mainframe <meta http-equiv="cache-control" http-equiv="no-cache" /> einfüge, zeigt mir der IE, nicht die aktuelle Liste an, wenn ich zuvor eine Änderung durchgeführt habe. Sondern immer noch die im Zustand davor.
Beim FF funktionierts jedenfalls... auch ohne no-cache zu setzen.

Habe den Beitrag easy-coding.de/ajax-und-ie-cache--t1776.html verfolgt, wo das selbe Problem auftrat. Ich habe header("Cache-Control: no-cache, must-revalidate") in meine PHP-datei, als auch in meine PHP-Func geschreiben. Der IE cacht mir das aber noch immer.

Könnte sich die komplette Internetgemeinschaft nicht dafür ausprechen KOMPLETT AUF IE ZU VERZICHTEN??? Also ich würde nichts vermissen! Haha...kleiner gag nebenbei :lol:

Torben Brodt · 15. Oktober 2006, 10:53

probiers mal mit ner anderen regex funktion

Quellcode

var test = 'testString';
if (!test.match(/^[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,6}$/i))
alert('gültig');
else
alert('ungültig');

btw. so ein ajax check mit ajax wäre doch auch ganz nett.. dann könntest du auch die verfügbarkeit der domain überprüfen

die header funktionen müssen in die von ajax aufgerufene php datei. hast du gemacht, oder?
das sollte schon reichen - ansonsten bleibt ja noch der raute-workaround, wie hier beschrieben: http://www.easy-coding.de/ajax-und-ie-cache--t1776.html#6660

nilitsch · 15. Oktober 2006, 11:58

Ja, habs in der falschen php-Funktion drin gehabt. Danke Dir

Ajax und <select><option>

Ajax und <select><option>

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

"nilitsch" schrieb:

Quellcode

Quellcode

Quellcode

Teilen

Benutzer online 1

Tags