[js] selecteren selectBox werkt niet in IE - Softwareontwikkeling

vrijdag 31 maart 2006 10:38

Acties:

Verwijderd

Topicstarter

Hey allemaal,

Ik ben bezig met een klein scriptje voor een soort text parser. Nu wil ik graag via een input field een woord kunnen toevoegen aan een selectBox. Dit werkt allemaal wel. Vervolgens wil ik alle waardes uit de selectBox posten naar een andere pagina. Daarvoor moet ik ze eerst allemaal selecteren. Dit werkt echter alleen bij FF en niet bij IE. Bij IE krijg ik de foutmelding dat de nieuwe option leeg is of niet bestaat. Als ik de functie "postform()" aanroep via een aparte knop werkt het ook. Op 1 of andere manier denkt de functie "postform()" dat ie nog niet bestaat. Het gekke is dat de "words.length" de nieuwe option wel ziet.

Heeft iemand een idee waar het aan zou kunnen liggen?

De knop:

code:

1	<input type="button" value="Toevoegen" onclick="javascript: addWord(); postForm();">

De selectbox gevuld met waardes uit db:

code:

<select multiple="multiple" name="words[]" id="words" style=" width:245px; height:100px;">
    <?
        $result = $mysql->getRs('SELECT * FROM rss_words');
        for ($n = 0; $n < count($result); $n++) {
            echo '<option>'. $result[$n]->word .'</option>';
        }
    ?>
</select>

De 2 functies (de addWord() functie werkt zonder problemen. Het maakt overigens niet uit welke selecteer methode ik gebruik. (setSelectedIndex of .selected = "selected")

code:

function addWord() {
    var option = document.createElement('option');
    if(document.getElementById('newWord').value != '') {
        document.getElementById('words').appendChild(option);       
        option.text = document.getElementById('newWord').value;
        option.value = document.getElementById('newWord').value;
        document.getElementById('newWord').value = '';
    }
}

function postForm() {
    var words = document.getElementById('words');
    for (n = 0; n < words.length; n++) {
          words.options[n].selected = true;
    }
    document.form.submit();
}

Hopen dat iemand een idee heeft waarom het wel in FF maar niet in IE werkt.

Mvg,
HJ Bosscher

vrijdag 31 maart 2006 12:36

Acties:

Verwijderd

Topicstarter

Sluit dit topic maar.......zal wel weer een of andere bug zijn van IE.

vrijdag 31 maart 2006 12:47

Acties:

BtM909

Watch out Guys...

Wat werkt er dan niet precies

Want onderstaande werkt gewoon hoor:

HTML:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
function doe(){
    sl = document.getElementById('BtM909') 
    l = sl.length;
    while(l--){
        sl.options[l].selected = true;
    }
}
</script>
</head>

<body>
<select multiple="multiple" id="BtM909">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<input type="button" value="test" onclick="doe()">
</body>

Het is natuurlijk van belang dat je uitlegt in welk deel je probleem precies zit

[ Voor 7% gewijzigd door BtM909 op 31-03-2006 12:49 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 31 maart 2006 13:24

Acties:

Verwijderd

Topicstarter

BtM909 schreef op vrijdag 31 maart 2006 @ 12:47:
Het is natuurlijk van belang dat je uitlegt in welk deel je probleem precies zit

Misschien een beetje te ingewikkeld om mijn uitleg te begrijpen. Het gaat erom dat " words.options[n].selected = true;" een foutmelding geeft in IE dat het object leeg is of niet bestaat. Het gaat hier dus om het nieuwe object(option) wat ik heb aangemaakt met de functie "addWord()". Die voeg ik toe aan de selectBox en daarop geeft IE een foutmelding terwijl deze wel in de array van options staat(words.length). Ik voer die twee functies achter elkaar uit in de onclick van de button zoals je ziet.

Hopen dat het nu wat duidelijker is. Voor de duidelijkheid, in FF doet ie het wel en de functies doen het onafhankelijk van elkaar wel in IE.

vrijdag 31 maart 2006 18:36

Acties:

BtM909

Watch out Guys...

En ook dit werkt weer in IE en FF

Maak desnoods een niet-werkend kant en klaar voorbeeld. De code in PHP helpt op deze manier ook niet echt

HTML:

<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function doe(){
    var option = document.createElement('option');
    document.getElementById('BtM909').appendChild(option);
    option.text  = "hallo";
    option.value = "hallo";
    
    alert(document.getElementById('BtM909').length);
    sl = document.getElementById('BtM909') 
    l = sl.length;
    while(l--){
        sl.options[l].selected = true;
    }
}
</script>
</head>

<body>
<select multiple="multiple" id="BtM909">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<input type="button" value="test" onClick="doe()">
</body>
</html>

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 31 maart 2006 20:35

Acties:

crisp

Devver

Pixelated

Moet in je functie postForm() words.length niet words.options.length zijn?

overigens:

JavaScript:

1	document.form.submit()

da's document.all troep; geef gewoon in je eventhandler alvast een referentie mee naar je form middels het 'this' keyword.
En het javascript: pseudo-protocol gebruiken in een eventhandler is bij mij een doodzonde.

[ Voor 65% gewijzigd door crisp op 31-03-2006 20:37 ]

Intentionally left blank

zondag 2 april 2006 00:41

Acties:

Verwijderd

Topicstarter

BtM909 schreef op vrijdag 31 maart 2006 @ 18:36:
En ook dit werkt weer in IE en FF

Maak desnoods een niet-werkend kant en klaar voorbeeld. De code in PHP helpt op deze manier ook niet echt

HTML:

<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
function doe(){
    var option = document.createElement('option');
    document.getElementById('BtM909').appendChild(option);
    option.text  = "hallo";
    option.value = "hallo";
    
    alert(document.getElementById('BtM909').length);
    sl = document.getElementById('BtM909') 
    l = sl.length;
    while(l--){
        sl.options[l].selected = true;
    }
}
</script>
</head>

<body>
<select multiple="multiple" id="BtM909">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<input type="button" value="test" onClick="doe()">
</body>
</html>

Ik zeg niet dat jou code niet werkt

mijn code werkt niet

Toch bedankt voor de moeite! $_/-\o_$ Ik heb zelf nog niet de oplossing gevonden, maar ik heb wel het probleem omzeilt. Ik selecteer de nieuwe optie direct na het aanmaken en vervolgens controleer ik in de postForm() functie gewoon of de option al geselecteerd is of niet. Misschien een lelijke oplossing maar anders weet ik het ook niet.

crisp schreef op vrijdag 31 maart 2006 @ 20:35:
overigens:
JavaScript:
1
document.form.submit()
da's document.all troep; geef gewoon in je eventhandler alvast een referentie mee naar je form middels het 'this' keyword..

De naam van de form is "form". Misschien is het inderdaad beter om deze naam even te wijzigen. Bedankt

zondag 2 april 2006 00:55

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op zondag 02 april 2006 @ 00:41:
[...]
De naam van de form is "form". Misschien is het inderdaad beter om deze naam even te wijzigen. Bedankt

Nee, dat bedoel ik niet. Ik bedoel dat het fout is om ervan uit te gaan dat elementen met een 'name' attribuut automatisch beschikbaar zijn als property van het document object - dat is in echte browsers niet in alle gevallen zo. Daarbij is het 'name' attribuut voor veel elementen niet meer toegestaan in Strict conforming documents en dien je 'id' te gebruiken. Je kan dan je formulier benaderen mbv document.getElementById of (nog steeds) via de document.forms collection.

In dit geval kan je echter al vanuit je eventhandler een referentie naar je formulier meegeven, zoals in dit voorbeeld:

HTML:

<form action="#">
  <input type="button" onclick="somefunction(this.form)">
</form>
<script type="text/javascript">

function somefunction(form)
{
  // 'form' is a reference to the HTML form element
}

</script>

Intentionally left blank

zondag 2 april 2006 01:12

Acties:

crisp

Devver

Pixelated

Overigens trigger je door de appendChild een DOM level 2 bug in IE mbt select-elementen. Workaround is de DOM level 1 manier te gebruiken middels de options-collection (die ook crossbrowser werkt):

HTML:

<form action="#">
    <select multiple name="words[]">
        <option value="eerste">eerste
    </select><br>
    <input type="text" name="newWord">
    <input type="button" value="Toevoegen" onclick="addWord(this.form);postForm(this.form);">
</form>
<script type="text/javascript">

function addWord(form)
{
    var newword = form.elements['newWord'].value;
   
    if (newword != '')
    {
        var option = document.createElement('option');
        option.appendChild(document.createTextNode(newword));
        option.setAttribute('value',newword);
        // alternatief: var option = new Option(newword, newword);

        var words = form.elements['words[]'].options;
        words[words.length] = option;

        form.elements['newWord'].value = '';
    }
}

function postForm(form)
{
    var words = form.elements['words[]'].options, n = words.length;
    while (n--) words[n].selected = true;
    form.submit();
}

</script>

[ Voor 7% gewijzigd door crisp op 03-04-2006 22:39 ]

Intentionally left blank

zondag 2 april 2006 11:20

Acties:

Michali

Die fout met words.options[n].selected ligt volgens mij aan het feit dat de laatste index niet words.options.length is, maar words.options.length - 1. De eerste index is namelijk 0.

Noushka's Magnificent Dream | Unity

zondag 2 april 2006 11:37

Acties:

crisp

Devver

Pixelated

Michali schreef op zondag 02 april 2006 @ 11:20:
Die fout met words.options[n].selected ligt volgens mij aan het feit dat de laatste index niet words.options.length is, maar words.options.length - 1. De eerste index is namelijk 0.

Waar gaat dat fout dan?

Intentionally left blank

zondag 2 april 2006 11:58

Acties:

Michali

Misschien gaat het nergens meer fout, maar ik zag dat de TS dit zei:

Het gaat erom dat " words.options[n].selected = true;" een foutmelding geeft in IE dat het object leeg is of niet bestaat.

En toen dacht ik gelijk daar aan. Het klopt toch wel van die laatste index? Of is dat wel options.length?

Noushka's Magnificent Dream | Unity

zondag 2 april 2006 12:49

Acties:

crisp

Devver

Pixelated

Michali schreef op zondag 02 april 2006 @ 11:58:
Misschien gaat het nergens meer fout, maar ik zag dat de TS dit zei:

[...]

En toen dacht ik gelijk daar aan. Het klopt toch wel van die laatste index? Of is dat wel options.length?

Dat klopt van die laatste index, maar dat gaat hier niet fout. Als je appendChild gebruikt om de option toe te voegen aan de DOM krijg je die foutmelding in IE, ws doordat in IE <= 6 SELECT geen native element is, en de DOM-tree niet goed wordt bijgewerkt...
Er zijn meer van dergelijke issues in IE met SELECTs; toevoegen van options vanuit een ander window werkt bijvoorbeeld ook niet...
Ik moet nog eens testen of dat in IE7 nu eindelijk opgelost is...

[ Voor 16% gewijzigd door crisp op 02-04-2006 13:11 ]

Intentionally left blank

maandag 3 april 2006 14:09

Acties:

Verwijderd

Topicstarter

crisp schreef op zondag 02 april 2006 @ 12:49:
[...]

Dat klopt van die laatste index, maar dat gaat hier niet fout. Als je appendChild gebruikt om de option toe te voegen aan de DOM krijg je die foutmelding in IE, ws doordat in IE <= 6 SELECT geen native element is, en de DOM-tree niet goed wordt bijgewerkt...
Er zijn meer van dergelijke issues in IE met SELECTs; toevoegen van options vanuit een ander window werkt bijvoorbeeld ook niet...
Ik moet nog eens testen of dat in IE7 nu eindelijk opgelost is...

Hmm dat zou best eens kunnen ja...maar waarom wordt de lengte van de DOM-tree dan wel bijgewerkt? Die wordt namelijk 1 groter zodra ik een optie heb toegevoegd.

maandag 3 april 2006 14:21

Acties:

crisp

Devver

Pixelated

Verwijderd schreef op maandag 03 april 2006 @ 14:09:
[...]

Hmm dat zou best eens kunnen ja...maar waarom wordt de lengte van de DOM-tree dan wel bijgewerkt? Die wordt namelijk 1 groter zodra ik een optie heb toegevoegd.

IE works in mysterious ways

iig lijkt het in IE7 opgelost te zijn

Intentionally left blank

maandag 3 april 2006 17:38

Acties:

Verwijderd

Topicstarter

hmm..das mooi

niet dat ik IE gebruik maar je moet toch klantvriendelijk blijven he

Nogmaals iedereen bedankt voor de reacties!

Pagina: 1

Reageer