[javascript] Timeouts of niet?

[Vinzzz243]

als testcase heb ik mijn probleem geminimaliseerd.
Ik heb een pulldown die ik via javascript vul (in dit geval simpel 10 x loopen, later gevuld door xmlhttp) en ik wil daarna direct een waarde geselecteerd hebben.

Op de volgende url zie je het voorbeeld.

Firefox geeft geen errors, waar IE wel een js error geeft: could not set the selected property.

Wanneer ik echter de regel waarin ik de waarde laat selecteren vervang door een timeout krijg ik geen error meer in IE. voorbeeld hier.

Doe ik iets fout want ik had niet gedahct dat ik hiervoor timeouts MOEST gebruiken...

[Michali]

Erg vreemde error idd. Ik probeer hier de oplossing te achterhalen, maar het wil niet echt lukken. Ik voeg eerst de waarde van de betreffende node toe aan het document om te controleren of hij wel bestaat. Dat ziet er gewoon allemaal goed uit alleen geeft ie dan nog steeds een error. Ik probeer nog even een paar dingetjes.

Wat wel werkt overigens is om:

code:

list.options[option].setAttribute('selected', true);

te gebruiken. Alleen werkt dat weer niet in firefox. Die geeft geen error, maar selecteerd de node ook niet. ( setAttribute('selected', 'selected') werkt ook niet )

Mocht je er echt niet uitkomen verder, dan kun je altijd voor een try {} catch(e) { } constructie kiezen. Dan krijg je de error ook niet te zien. Niet echt netjes, maar toch iets als er verder geen oplossing te vinden is.

[ Voor 55% gewijzigd door Michali op 16-07-2005 18:25 ]

[crisp]

heb je al geprobeerd om de selectedIndex property van het select element zelf te zetten?

Overigens, voor IE gaat er sowieso niets boven good-old DOM level 1 gezien het aantal bugs en tekortkomingen in de DOM 2 implementatie in IE::

JavaScript:

function testpulldown() 
{
    var list = document.getElementById('testpulldown');

    for (var i=0; i<10; i++)
    {
        list.options[list.options.length] = new Option('value_'+i, i);
    }

    list.selectedIndex = 8;
}

[ Voor 71% gewijzigd door crisp op 16-07-2005 23:49 ]

[Vinzzz243]

ok hier ga ik even mee verder.
Wanneer ik de volgende regels toevoeg werkt dit prima in FF, maar niet in IE.

JavaScript:

HTMLSelectElement.prototype.selectedValue = function() 
{
    var i = this.length;
    var textvalue = arguments[0];
    while (i--)
    { 
        if (this.options[i].text==textvalue) this.options[i].selected = true;
    }
}

En vervolgens in testpulldown()

code:

list.selectedValue('value_6');

is er ook een manier om list.selectedValue = 'value_6'; te kunnen gebruiken?

[ Voor 13% gewijzigd door Vinzzz243 op 17-07-2005 14:43 ]

[crisp]

In IE kan je geen methods aan HTML elementen toekennen dmv prototyping.
In theorie zou dit echter wel moeten werken:

JavaScript:

selectElement.value = 'foo';

maar ook dat verschilt per browser; persoonlijk zou ik dan eerder zoiets doen (wederom DOM level 1):

JavaScript:

function setSelectedValue(select, value)
{
    var i = select.options.length;
    while (i--)
    {
        if (select.options[i].value == value)
        {
            select.selectedIndex = i;
            break;
        }
    }
}

(en voor een selectie by text kan je de .text property afvragen ipv de .value)
overigens vind ik het gebruik van de term 'list' erg verwarrend als het feitelijk om een select gaat

[ Voor 19% gewijzigd door crisp op 17-07-2005 15:29 ]

[Vinzzz243]

ik had al een soortgelijke functie geschreven (zie dat ik ook beter break kan gebruiken):

JavaScript:

    function selectValueInList(list,textvalue)
    {
        var i = list.length;
        while (i--)
        { 
            if (list.options[i].text==textvalue) list.options[i].selected = true;
        }
    }

maar vroeg me af of het niet mogelijk was om een nieuwe property (via prototyping of what so ever) toe te kennen aan het selectelement, zodat ik het net zo kan gebruiken als selectedIndex = 8

edit: klopt dat list niet zo'n handige naam is, maar is nog kopieersel

[ Voor 9% gewijzigd door Vinzzz243 op 17-07-2005 15:42 ]

[crisp]

Vinzzz schreef op zondag 17 juli 2005 @ 15:42:
ik had al een soortgelijke functie geschreven (zie dat ik ook beter break kan gebruiken):
[...]
maar vroeg me af of het niet mogelijk was om een nieuwe property (via prototyping of what so ever) toe te kennen aan het selectelement, zodat ik het net zo kan gebruiken als selectedIndex = 8

Ja, dat kan dus wel, maar niet in IE
Als je dus per-sé IE wilt ondersteunen dan moet je terug naar de vorige eeuw en de technieken gebruiken die toen gangbaar waren...

[ Voor 14% gewijzigd door crisp op 17-07-2005 15:56 ]

[Vinzzz243]

haha, nee het hoeft niet per-SE.

Maar ik weet nu wel (denk ik) waar de oorzaak van mijn probleem ligt (had t zelfs in de TS gemeld).
Wanneer ik bv 3 pulldowns heb en ze gewoon met 100 elementen vul, is niets aan de hand, dan kan ik vullen, value's zetten, vullen, value's zetten etc...

Na de oplossing in dit topic ga ik de pulldowns echter via xmlhttprequest vullen. En ik DENK dat het komt omdat dit asynchroon loopt (correct me if im wrong) dat ik genoodzaakt ben om timeouts te gebruiken?

Ik heb dus pulldown 1 die via xmlhttp waardes uit DB haalt, daarna een waarde krijgt (bv value 438), vervolgens moet pulldown2 zich automatisch vullen (ook weer uit een DB met als parameter de waarde van pulldown1) en zo ook pulldown3.

Vraag is dus OF ik timeouts moet gebruiken, hoopte van niet.

[ Voor 15% gewijzigd door Vinzzz243 op 17-07-2005 18:04 ]

[André]

Nee, geen timeouts. Je moet op het moment dat de ene pulldown helemaal geladen is pas beginnen aan de 2de. Dus wachten op de onload van de request zeg maar.

[crisp]

bij xmlhttp heb je de keuze of je het synchroon of asynchroon wilt inladen. Bij synchroon heb je kans dat het laden een tijdje duurt en dat ondertussen de pagina 'unresponsive' is; bij asynchroon zal je inderdaad moeten controleren wanneer je request klaar is - dat kan mbv timeouts en het checken op de complete property of door een event te hangen aan het onload of onreadystatechange event.
Je kan op zich wel meerdere requests tegelijkertijd doen, maar dat zal je goed van elkaar moeten scheiden (qua global variabelen enzo).

[ Voor 15% gewijzigd door crisp op 18-07-2005 00:11 ]

[Verwijderd]

crisp schreef op zondag 17 juli 2005 @ 15:25:
In IE kan je geen methods aan HTML elementen toekennen dmv prototyping.

Prototyping via 'HTMLSelectElement.prototype.eigenFunctie' wordt lastig maar het is weldegelijk mogelijk om eigen functies toe te voegen aan een html element:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="nl" >

<head>
    
    <title>Testcase: prototyping van HTML elementen in IE</title>
    
    <script type="text/javascript">
    
    /*
        Geef extra functies aan een HTML select box.
    */
    
    HTMLSelectElement = {
        setSelectedValue : function (sValue) 
        { 
            var i = this.length;
            while (i--)
            {   
                if (this.options[i].value == sValue) {
                    this.selectedIndex = i;
                    break;
                }
            }

            return true;
        }
    }


    function selectByValue (value)
    {
        var selectBox = document.getElementById ('selectBox');
        // Deze functie bestaat niet in javascript maar deze hebben we hierboven gedefineerd.
        selectBox.setSelectedValue(value);
        
        return false;
    }


    /*
        Hulp functies. Kopier de functies van HTMLSelectElement.
    */

    Object.prototype.copyTo = function (o) {    
            for(var p in this)
                    o[p] = this[p];
    }
    window.onload = function() {
        var cc = document.getElementsByTagName('select');
        for(var i = 0; i < cc.length; i++)
            HTMLSelectElement.copyTo(cc[i]);

    }

    </script>

</head>
<body>

<form action="" name="form" id="form">
    <fieldset>
        <legend>Testcase: prototyping van HTML elementen in IE</legend>
        
        <label for="selectBox">Select</label>
        <select name="selectBox" id="selectBox">
            <option value="item1">Item 1</option>
            <option value="item2">Item 2</option>
            <option value="item3">Item 3</option>
        </select>

        <button onclick="selectByValue ('item2');" type="button">Selecteer de option met waarde 'item2'</button>
    </fieldset>
</form>

</body>

</html>

Dit werkt in IE5, IE6, Firefox en Opera dus het is nog bruikbaar ook

[crisp]

jammer dat het weer via een onload handler moet (word altijd te laat getriggered); ik denk dat je met .htc verder komt

[ Voor 12% gewijzigd door crisp op 18-07-2005 18:22 ]

[Verwijderd]

HTC werkt alleen bij IE. Opera en Safari beiden helaas ook geen mogelijkheid om gebruik te maken van interface prototyping. Via een script van Jason Davis is er wel het één en andere mogelijk. Hij maakt inderdaad gebruik van HTC bestanden voor IE. Alleen jammer dat je IE5 uitsluit op deze manier...

Prototyping via HTC bestand voor IE5.5+
Prototyping in Opera en Safari

[Verwijderd]

Met Object.prototype moet je wel uitkijken, sterker nog helemaal niet gebruiken want je breekt er de " object as hash tables" feature mee in Javascript Kortom, object prototype moet je echt gaan beschouwen als sealed.

[ Voor 33% gewijzigd door Verwijderd op 18-07-2005 18:50 ]