Der folgende Beitrag wurde am 06. 03. 2007, 14:44 Uhr von Markus Treiber veröffentlicht.
Hallo zusammen,
ich habe folgendes Problem und bisher keine Lösung hierzu gefunden.
In meinem Web-Projekt habe ich eine sehr lange Select-Box (ca. 7000 Optionen) die mittels Filter reduziert werden soll. Dies habe ich mittels jsrs erledigt. Dies funktioniert auch soweit, nun zum Problem:
Die Daten-Verarbeitung und Abfrage ist in wenige Sekunden erledigt, allerdings dauert das Löschen der vorhanden Einträge unter IE extrem lange (CPU-Last => 100%)
IE: ca. 20-25 sek.
MOZ: 2, max 3 sek.
Mit folgende Code wollte ich die Liste löschen...
for(i=document.form.mat_select.options.length-1;i>=0;i--) {
document.form.mat_select.remove(i)
}
Habe auch schon die Methode versucht, die Einträge auf NULL zu setzen und die Methode mit ....length=0. Immer mit dem selben Resultat. Auch das cachen des Select-Objektes hat nichts gebracht. Wenn ich diesen Code-Block auskommentiere, dann läuft das komplette Script in wenigen Sekunden durch, allerdings werden dann die "neuen" Option unten angehängt...
Mit bestem Dank im Voraus!
Der folgende Beitrag wurde am 06. 03. 2007, 14:52 Uhr von masa2 veröffentlicht.
Hi,
kann man die überflüssigen options nicht mit <style="display: none;">
wegschalten. Wenn Sie sowieso schon geladen sind.
Ansonsten frage ich mich, warum die options geladen werden, wenn Sie im Anschluß sowieso wieder gelöscht werden?
Der folgende Beitrag wurde am 06. 03. 2007, 15:26 Uhr von Markus Treiber veröffentlicht.
> Ansonsten frage ich mich, warum die options geladen werden, wenn Sie im Anschluß sowieso wieder gelöscht werden?
Weil beim Laden der Seite die Liste komplett dargestellt werden soll und nur bei Bedarf die Filter-Funktion angewandt wird.
Werde beide Ideen testen. Per DOM die Komplette Liste löschen und die Optionen ausblenden, wobei mir die letzter "seltsam" anmutet.
Danke für die Antworten!!!
Der folgende Beitrag wurde am 06. 03. 2007, 14:54 Uhr von Rouven veröffentlicht.
Hello,
ein möglicher Workaround wäre: mittels DOM die alte Selectbox entfernen und an ihrer Stelle eine neue, damit leere, einfügen.
MfG
Rouven
--
-------------------
Eine Bilanz ist wie der Bikini einer Frau. Sie zeigt fast alles, aber verdeckt das Wesentliche -- Günter Stotz, Regierungsdirektor des baden-württembergischen Wirtschaftsministeriums
Der folgende Beitrag wurde am 06. 03. 2007, 15:34 Uhr von Joachim veröffentlicht.
Hi,
> Mit folgende Code wollte ich die Liste löschen...
clonen, ersetzen und nur die gewünschten optionen anfügen?
Gruesse, Joachim
--
Am Ende wird alles gut.
Der folgende Beitrag wurde am 06. 03. 2007, 17:29 Uhr von Markus veröffentlicht.
Clonen? Ersetzen?
wie genau geht das?
Meine Form heist : form
Mein Select-Objejt : mat_select
Danke vorab...
Der folgende Beitrag wurde am 06. 03. 2007, 23:36 Uhr von Joachim veröffentlicht.
Hi,
> wie genau geht das?
Erzeuge einen (leeren) Clone des Elements (Parameter: false)
http://de.selfhtml.org/javascript/objekte/node.htm#clone_node
Ersetze Element durch Clone
http://de.selfhtml.org/javascript/objekte/node.htm#replace_child
ggf die ID wieder neu zuweisen. Ich habe das mit selects noch nicht getestet, sollte aber klappen.
Gruesse, Joachim
--
Am Ende wird alles gut.
Der folgende Beitrag wurde am 07. 03. 2007, 10:36 Uhr von Markus Treiber veröffentlicht.
Danke für die Links...
habe folgendes probiert aber leider kommt immer die Meldung, dass das Objekt (letzte Zeile) nicht gefunden wird...
Meine Form heisst : form
Mein Select-Object : mat_select
var formObj = document.forms["form"];
var oldSelObj = formObj.elements["mat_select"];
var newSelObj = document.createElement("select");
newSelObj.setAttribute("id", oldSelObj.id);
oldSelObj.form.replaceChild(newSelObj, oldSelObj);
Sehe ich den Wald vor lauter Bäumen nicht ???
Der folgende Beitrag wurde am 07. 03. 2007, 18:06 Uhr von plan_B veröffentlicht.
Hallo,
> habe folgendes probiert aber leider kommt immer die Meldung, dass das Objekt (letzte Zeile) nicht gefunden wird...
>
> Meine Form heisst : form
> Mein Select-Object : mat_select
>
> var formObj = document.forms["form"];
> var oldSelObj = formObj.elements["mat_select"];
> var newSelObj = document.createElement("select");
> newSelObj.setAttribute("id", oldSelObj.id);
der Idname darf nur einmal verwendet werden, also erst später zuweisen.
var tmp_idname=oldSelObj.id;
oldSelObj.form.replaceChild(newSelObj, oldSelObj);
oldSelObj.id="";
newSelObj.Id=tmp_idname;
was macht man mit dem alten Knoten? muss er noch abgebaut werden?
Gruß plan_B
--
*®*´¯`·.¸¸.·
Der folgende Beitrag wurde am 08. 03. 2007, 00:19 Uhr von plan_B veröffentlicht.
Hallo,
streiche, was ich früher geschrieben habe, das Verfahren klappt einwandfrei.
zum Testen lass lieber den IE weg. Meine IE-Version funktioniert dann nicht mehr, wenn das neue dynamisch erzeugte Element mit Namen angesprochen werden soll. Das ist/war? ein IE-Bug.
Möglich, dass das auch bei dir die Fehlerursache war oder
du bist mit "id" und "name" durcheinander gekommen
oder ...??
<html>
<head><title>test</title>
<script type="text/javascript">
zm=0;
function zeitmarke(z) {
return (new Date()).getTime() -z;
}
function init_sel(sel_name) {
var imax=parseInt(prompt("wieviele Optionen erzeugen ","7000"));
if (imax>0)
with (document.forms.f1[sel_name]) {
zm=zeitmarke(0);
log("0ms","start init");
for (var i=1;i<imax;i++) {
var o=new Option();
o.value=""+i;
o.text=""+(i*i)
options[options.length]=o;
}
log(""+zeitmarke(zm)+"ms",""+ options.length+" Optionen verfügbar "+sel_name );
}
return false;
}
function new_sel(frm,oldselname) {
var filter=prompt("Welche Zahlenfolge filtern","678");
if (filter) {
zm=zeitmarke(0);
log("0ms","start filter");
var sneu=document.createElement("select");
var salt=frm.elements[oldselname];
for( var i=0;i<salt.options.length;i++) {
if (salt.options[i].text.indexOf(filter)>-1) {
var o=new Option();
o.value=salt.options[i].value;
o.text=salt.options[i].text;
sneu.options[sneu.options.length]=o;
}
}
sneu.id=salt.id;
salt.form.replaceChild(sneu,salt);
sneu.onchange=salt.onchange;
sneu.name=salt.name;
log(""+zeitmarke(zm)+"ms","fertig new_sel");
log(""+zeitmarke(zm)+"ms","id finden :"+document.getElementById(salt.id).id);
}
return false;
}
function change(elem){
var op=elem[elem.selectedIndex];
log("","onchange: "+op.value+"\t"+op.text+"\n");
return false;
}
function log(z,x) {
document.forms.f1.TA.value=""+z+"\t"+x+"\n"+document.forms.f1.TA.value;
}
</script>
</head>
<body onload='init_sel("Auswahl")'>
<h1>test select ersetzen</h1>
<form name="f1" action="javascript:void()">
<select name="Auswahl" id="Auswahlid" onchange="change(this)">
<option value="test">hallo</option>
</select>
<button type=button onclick="return new_sel(this.form,'Auswahl')">new select</button>
<textarea name="TA" cols=50 rows=10></textarea>
</form>
</body>
</html>
Gruß plan_B
--
*®*´¯`·.¸¸.·
Der folgende Beitrag wurde am 08. 03. 2007, 11:36 Uhr von Markus Treiber veröffentlicht.
Hallo Plan_B,
danke für deine Mühen und für das wirklich gute Beispiel.
Das Beispiel funktioniert bei mir einwandfrei auf IE und MOZ. Auch das Performance-Problem lässt sich hierbei (beim Aufbau der Knoten) sehr gut beobachten.
Wenn ich nun das Beispiel auf mein Skript übertrage, passiert das Gleiche wie bisher, und zwar kommt die Meldung
"Node not found"
in folgender Zeile:
salt.form.replaceChild(sneu,salt);
Ich poste am besten mal die definition der form und des selects
<form name="form0" id="form0" onSubmit="return false;"><br>
<select name="mat_select" id="mat_select" onchange="...">
Ich habe extra sowohl die Attribute name und id genutzt, um sicher zu gehen, dass ich dabei nix vergesse, aber es geht nich...
Noch eine Idee?
Der folgende Beitrag wurde am 08. 03. 2007, 16:51 Uhr von plan_B veröffentlicht.
Hallo,
>
> "Node not found"
>
> in folgender Zeile:
> salt.form.replaceChild(sneu,salt);
>
> Noch eine Idee?
wenn du nicht weisst welcher Knoten mit "Node" gemeint ist, musst du es herausfinden.
Ich würde mir eine info_node(node)-Funktion bauen, die Name, id und nodeType abfragt.
die Abfrage an verschiedenen Stellen einsetzen ...
Gruß plan_B
--
*®*´¯`·.¸¸.·
© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4