[JS] IE probleem met getElementById

[MrDummy]

Bij het maken van een redelijk dynamische site maak ik vaak gebruik van id's zodat opzoeken naar veld of afbeelding via iets complexere scripting wat scheelt.
Werken met id's heeft tot dusver geen problemen opgeleverd in FF, de code werkt zoals ik verwacht.

Maar helaas met IE gaat het niet alles vlekkeloos. Er ontstaat dan JS foutmeldingen waar ik moeilijk achter kan komen wat er precies fout is. Ik heb de code paar keer doorgelopen, maar bij apart debuggen van de code werkt het soms wel weer in IE. Dus het is heel klein probleem in de pagina, en dat is lastig omdat groot deel wel werkt. Daar kan ik wel gek van worden. Bovendien werken mijn klanten zelfs nog veel met IE, en daar moet ik wel in orde maken.

Ik wil graag van anderen vragen waar ik precies op moet letten bij id's gebruik onder IE. Ik weet dat IE iets stricter is met namen geven aan id's, dat heb ik vroeger ervaren. Waar het maar beetje op lijkt of het mogelijk gereserveerde naam heeft, werkt het niet. Het werkt ook niet als ergens dezelfde naam staat, maar toch nog andere id naam heeft.

Kan iemand me wat goede tips geven over correct id naam geven onder IE? Dan ga ik met de tips de zaak even anders hernoemen en kijken of het wel werkt. Noem ook aantal namen die ik niet mag gebruiken voor id.
Dank je wel!

[Rekcor]

http://www.w3.org/TR/REC-html40/types.html#type-name

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

In welke serverside taal programmeer je (als je dat doet?). Wat je zou kunnen doen is die servertaal unieke ID's laten verzinnen.

Handige link misschien? http://blogs.msdn.com/ie/archive/2004/10/26/247912.aspx

[ Voor 9% gewijzigd door Rekcor op 19-02-2009 11:25 . Reden: handige link ]

[Enfer]

Een paar site's waar redelijk wat waardevolle informatie te vinden valt zijn:

http://www.javascriptjedi.com/getElementById/
http://msdn.microsoft.com/en-us/library/ms536437(VS.85).aspx
http://remysharp.com/2007/02/10/ie-7-breaks-getelementbyid/

Vooral de laatste is interessant om zelf ook even uit te testen. Hieruit blijkt namelijk dat als er een html-element is met het attribuut name, welke dezelfde waarde heeft als een id van een ander html-element, en je voert een getElementByID uit in IE, dat hij dan toch het html-element pakt met het name-attribuut, en niet het corresponderende ID element! (In IE8 schijnt het gefixed te zijn though )

[MrDummy]

Oke, extra info waar ik mee doet:

PHP/MySQL/JS combinatie

En: ook al wordt later gefixed in IE8, we zullen toch rekening moeten houden dat er nog steeds mensen zijn die op IE6 draaien. Vooral oudere OS of dat ze niet echt aan Windows Updates doen waarbij IE7 op de pc komt.

En volgens laatste post is er inderdaad sprake van bug in IE. Ik weet zelf al hoe de namen opgebouwd moeten worden, want ik heb al tientallen pagina's mee gemaakt.
Maar de bug is storend. Ik zal van de pagina naar name en id's moeten opzoeken en vergelijken. En waar gelijk is en zeker gaat storen in IE, zal ik aanpassen.

Bedankt, ik was zelf vergeten welke bug het ook al weer is...

[ Voor 104% gewijzigd door MrDummy op 19-02-2009 12:47 ]

[MrDummy]

Hmm, het gaat nog niet lekker.
Ik heb paar velden anders laten noemen, maar het gaat niet.

Ik krijg een foutmelding "ongeldig argument" in IE7.
Code 0, Teken 2.

Wat zou er aan liggen naast hernoemen id velden, terwijl FF geen problemen heeft?
Dit is wel beetje maf.

[ViNyL]

Snap niet helemaal hoe je de elements dan opvraagt.

Geef je dan dubbele id's uit? Want dan ga je inderdaad problemen krijgen. Dat het dan werkt in firefox is meer mazzel dan dat het een fout in IE zou zijn..

[ Voor 100% gewijzigd door ViNyL op 23-02-2009 15:27 ]

[MrDummy]

Oke even wat voorbeelden
Hier pagina in sterk samengevatte vorm met alleen id's zichtbaar als voorbeeld:

PHP:

<div class="div-mbox" id="emailbox">
...
<div class="div-bbox-close" onClick="hidedisplay('emailbox'); disableEditorMode('ebody');"></div>
...
<div class="div-bbox-content" id="div-bbox-content">
...
<div class="div-bbox" id="briefbox">
...
<div class="div-bbox-close" onClick="hidedisplay('briefbox');"></div>
...
<div class="div-bbox-title" id="div-hbox-title">Inhoud brief voor <?=$locatienaam;?><input type="hidden" name="locatie" value="<?=$locatienaam;?>" /></div>
...
<div class="div-bbox-content" id="div-bbox-content">
...
<div class="div-bbox-hide" id="bbox-kenteken">
...
<div class="div-bbox-hide" id="bbox-datumtop">
...
<div class="div-bbox-hide" id="bbox-sleutel">
...
<div class="div-bbox-hide" id="bbox-dekbed">
...
<div class="div-bbox-hide" id="bbox-bo1">
...
<div class="div-bbox-hide" id="bbox-avdatum">
...
<div class="div-bbox-hide" id="bbox-alg">
...

en in JS staat o.a.:

JavaScript:

// briefdata
function briefdata(huurid) {
    var divheight;
    // radiobutton checken
    lengte = document.briefform.brief.length;
    for (i = 0; i <lengte; i++) {
        if (document.briefform.brief[i].checked) {
        chosen = document.briefform.brief[i].value;
        }
    }
    if (chosen=="ameland") {
        hidedisplay('bbox-kenteken');
        hidedisplay('bbox-bo1');
        hidedisplay('bbox-avdatum');
        showdisplay('bbox-datumtop');
        showdisplay('bbox-sleutel');
        showdisplay('bbox-dekbed');
        hidedisplay('bbox-alg');
        divheight=400;
    }
    if (chosen=="bakkeveen") {
        hidedisplay('bbox-kenteken');
        hidedisplay('bbox-bo1');
        showdisplay('bbox-avdatum');
        showdisplay('bbox-datumtop');
        showdisplay('bbox-sleutel');
        hidedisplay('bbox-dekbed');
        hidedisplay('bbox-alg');
        divheight=420;
    }
    if (chosen=="terschelling") {
        hidedisplay('bbox-kenteken');
        hidedisplay('bbox-bo1');
        showdisplay('bbox-avdatum');
        showdisplay('bbox-datumtop');
        hidedisplay('bbox-sleutel');
        hidedisplay('bbox-dekbed');
        hidedisplay('bbox-alg');
        divheight=400;
    }
    div = document.getElementById('briefbox');
    div.style.height=divheight+'px';
    shake('briefbox');
    showdisplay('briefbox');
    ajax_do('briefdata.php?hid='+huurid+'&chosen='+chosen);
}

// brief edata
function briefedata(huurid) {
    showdisplay('emailbox');    
    ajax_do('briefedata.php?hid='+huurid);
}

De code showdisplay/hidedisplay zelf werkt prima in IE en FF, het gaat om de pagina in zijn geheel zelf met al die id's.

Zie je wat vreemde zaken hier of niet? Wat moet ik anders beter aanpakken?

[Rekcor]

Het enige wat ik zie is dat je in je functies variabelen declareert zonder 'var' ervoor. Hierdoor wordt die variabele globaal, zie: http://www.webdevelopersn...les_scope_javascript.php3.

Dit kan problemen opleveren als je diezelfde variabele ook nog ergens anders gebruikt

Wat jij doet:

JavaScript:

function briefdata(huurid) { 
    var divheight; 
    // radiobutton checken 
    lengte = document.briefform.brief.length; 
    for (i = 0; i <lengte; i++) { 
        if (document.briefform.brief[i].checked) { 
        chosen = document.briefform.brief[i].value; 
        } 
    } 

   (...)
}

Hoe ik het zou doen:

JavaScript:

function briefdata(huurid) { 
    var divheight; 
    // radiobutton checken 
    var lengte = document.briefform.brief.length; 
    for (var i = 0; i <lengte; i++) { 
        if (document.briefform.brief[i].checked) { 
        var chosen = document.briefform.brief[i].value; 
        } 
    } 

   (...)
}

(dus ook: var i=0 etc)

Daarbij win je altijd aan snelheid als je niet 'loopt' over de directe DOM variabele

JavaScript:

//relatief langzaam
for (var i=0; i<document.briefform.brief.length; i++) {
  var chosen = document.briefform.brief[i].value; //hier gaat JS steeds opnieuw het element opzoeken
  (...)
}

//sneller
var briefRadios = document.briefform.brief; //hier zoekt JS het element van te voren op
var lengte      = briefRadios.length;
for (var i=0; i<lengte; i++) {
  var myBriefRadio = briefRadios[i];
  var chosen       = myBriefRadio.value;
  (...)
}

(in jouw geval zal het wel loslopen, maar bij grotere pagina's en ingewikkelder loops kan het wel degelijk tijd schelen)