[js] Javascript via innerHTML 'dood' in IE

[BikkelZ]

Ik heb een pull-down menu waarbij ik via de onmouseup functie een nieuwe functie trigger die een tweede pull-down genereert uit een van te voren gerenderde string:

HTML:

<option value="3" onmouseup="showPrice('39.00')">Kwartaal</option>

Deze functie werkt in FF, maar in IE krijg ik dus nog niet eens een script error. Het lijkt er dus op dat IE als je innerHTML gebruikt dus niet de JS functies weet te koppelen?

------------------

Als ik de code kopieer en plak in het bronbestand dan werkt het ook niet....is onmouseup op een option tag buggy in IE? Volgens mij hoort het namelijk wel te kunnen.....

[ Voor 19% gewijzigd door BikkelZ op 07-02-2007 10:20 ]

[BtM909]

Dat kan kloppen, maar hoe kunen wij zonder relevante voorbeeldcode vertellen waar het probleem precies zit en hoe op te lossen?

[Verwijderd]

Ik kijk even in mijn glazen bol:

Helaas het is mistig vandaag, ik weet het antwoord dus niet.


Je zal toch net iets meer info moeten geven wil je dat iemand je hiermee kan helpen, dit is gewoon te weinig.

Wat doet de showPrice functie bijvoorbeeld?
Wat is de specifieke foutmelding?
Welke browsers heb je het getest (welke versies, welk OS)?

[crisp]

volgens mij ondersteund IE gewoon geen events op option-elementen. Zet je event-handler eens op je select-element

[Gonadan]

innerHTML wordt niet goed ondersteund in IE.
Bij tabellen mag het bijvoorbeeld niet.
Je kunt beter de DOM functies gebruiken.
Javascript HTML DOM

Gooi eens een alert om te kijken of je event sowieso wel werkt?

[ Voor 14% gewijzigd door Gonadan op 07-02-2007 10:23 ]

[Verwijderd]

crisp schreef op woensdag 07 februari 2007 @ 10:22:
volgens mij ondersteund IE gewoon geen events op option-elementen. Zet je event-handler eens op je select-element

http://msdn.microsoft.com...ence/events/onmouseup.asp

Inderdaad, dus niet op een option element.

Gonadan schreef op woensdag 07 februari 2007 @ 10:22:
innerHTML wordt niet goed ondersteund in IE.
Bij tabellen mag het bijvoorbeeld niet.
Je kunt beter de DOM functies gebruiken.
Javascript HTML DOM

Gooi eens een alert om te kijken of je event sowieso wel werkt?

http://msdn.microsoft.com.../properties/innerhtml.asp

Daar staat precies wat er wel en niet kan.

[ Voor 41% gewijzigd door Verwijderd op 07-02-2007 10:24 ]

[BikkelZ]

Blijkbaar triggert IE helemaal niets vanaf een option-element zie ik nu, dus in het kader van 'niet meer code posten dan strikt noodzakelijk is' was het deze keer toch echt genoeg

Maar houdt dat dus in dat ik een array moet renderen met nummers en prijzen, en het dan via de value en een script wat gekoppeld is aan het select-object zo maar oplossen?

[crisp]

Gonadan schreef op woensdag 07 februari 2007 @ 10:22:
innerHTML wordt niet goed ondersteund in IE.

Funny, het is immers een Microsoft DOM extension

Bij tabellen mag het bijvoorbeeld niet.

True, de innerHTML extensie in IE heeft wat beperkingen wat dat betreft...

Je kunt beter de DOM functies gebruiken.
Javascript HTML DOM

innerHTML heeft toch in bepaalde situaties wel een hoop voordelen, vnl op gebied van snelheid en non-complexiteit, plus de ondersteuning ervoor is in andere browsers net zo goed (en vaak zelfs beter) als in IE. Of het gebruik van DOM-methods in dit geval beter zou zijn kan ik niet beoordelen aan de hand van die ene regel code die de TS heeft gepost Daarnaast betreft het hier een probleem van een heel andere aard (IE die geen events op option-elementen ondersteund).

[Verwijderd]

BikkelZ schreef op woensdag 07 februari 2007 @ 10:27:
Blijkbaar triggert IE helemaal niets vanaf een option-element zie ik nu, dus in het kader van 'niet meer code posten dan strikt noodzakelijk is' was het deze keer toch echt genoeg

Maar houdt dat dus in dat ik een array moet renderen met nummers en prijzen, en het dan via de value en een script wat gekoppeld is aan het select-object zo maar oplossen?

Je kunt eenvoudig de waarde van het geselecteerde option element in de select uitlezen, het moet dus geen probleem zijn dat mee te geven aan de functie die je aanroept en zo alsnog het juiste resultaat te krijgen. (Dit is IMHO sowieso een nettere oplossing als een onmouseup event onder iedere option, ook al zou IE het ondersteunen)

[Gonadan]

crisp schreef op woensdag 07 februari 2007 @ 10:28:
[...]

Funny, het is immers een Microsoft DOM extension

[...]
True, de innerHTML extensie in IE heeft wat beperkingen wat dat betreft...

[...]

innerHTML heeft toch in bepaalde situaties wel een hoop voordelen, vnl op gebied van snelheid en non-complexiteit, plus de ondersteuning ervoor is in andere browsers net zo goed (en vaak zelfs beter) als in IE. Of het gebruik van DOM-methods in dit geval beter zou zijn kan ik niet beoordelen aan de hand van die ene regel code die de TS heeft gepost Daarnaast betreft het hier een probleem van een heel andere aard (IE die geen events op option-elementen ondersteund).

offtopic:
Het is inderdaad van Microsoft, maar de andere browsers zijn IE voorbijgestreefd qua ondersteuning.
innerHTML is inderdaad een stuk sneller en gemakkelijker in het gebruikt.
Ook zal je code overzichtelijker blijven.

Je hebt gelijk dat ik niet kan beoordelen of het voor de TS beter zal zijn, mijn eigen ervaring is echter dat als je volledig cross-browser wilt werken zonder problemen dat het met DOM praktisch altijd goed gaat. Met innerHTML wil het nog wel eens problemen opleveren. Dat kan natuurlijk ook aan mij liggen.

En dat het niet de oorzaak van het probleem was wist ik niet, weer wat geleerd.

[ Voor 3% gewijzigd door Gonadan op 07-02-2007 10:37 ]

[Verwijderd]

crisp schreef op woensdag 07 februari 2007 @ 10:22:
volgens mij ondersteund IE gewoon geen events op option-elementen. Zet je event-handler eens op je select-element

offtopic:
IE6 niet, IE7 gelukkig wel

[crisp]

Verwijderd schreef op woensdag 07 februari 2007 @ 10:36:
[...]

offtopic:
IE6 niet, IE7 gelukkig wel

Dit werkt toch niet bij mij in IE7:

HTML:

<select>
    <option onmouseup="alert('1')">1</option>
    <option onmouseup="alert('2')">2</option>
    <option onmouseup="alert('3')">3</option>
    <option onmouseup="alert('4')">4</option>
</select>

[BikkelZ]

De reden dat ik niet op alle option elementen een actie wil, en dus niet via select maar individuele option elementen ben gaan werken heeft te maken met het feit dat niet alle option elementen de showPrice functie moeten aanroepen.

Ik ben het volledig met jullie eens dat op alle option elementen een JS-functie knallen anders sowieso een lompe manier zou zijn geweest om te werken. En ik ben toch stiekem een beetje innerHTML fan geworden na mijn eerste 'ik wil AJAX volgens het boekje doen' dagen, want dat werkt gewoon tig keer zo snel en eigenlijk altijd net zo goed.

[Verwijderd]

Verwijderd schreef op woensdag 07 februari 2007 @ 10:36:
[...]

offtopic:
IE6 niet, IE7 gelukkig wel

Als dat zo zou zijn dan had dat wel hier gestaan lijkt me?

http://msdn.microsoft.com...ence/events/onmouseup.asp

[Verwijderd]

crisp schreef op woensdag 07 februari 2007 @ 10:39:
[...]

Dit werkt toch niet bij mij in IE7:

HTML:

<select>
    <option onmouseup="alert('1')">1</option>
    <option onmouseup="alert('2')">2</option>
    <option onmouseup="alert('3')">3</option>
    <option onmouseup="alert('4')">4</option>
</select>

Ik ben mijn code eens in geschoten, en ik heb hem in de select gegooid, waarbij alle options een unieke value kregen en ik een function heb geschreven met if (......value == 1).

Je hebt gelijk, het is de select die in IE6 moeilijk doet en in IE7 niet.

HTML:

<script type="text/javascript">
    function manipuleer(aap){
    
        if (aap == 1){
            var type = 'Gegevens';
        }
                    
        if (aap == 2){
            var type = 'Chrono';
        }
                    
        if (aap == 3){
            var type = 'Chrono';
        }
                    
        if (aap == 6){
            var type = 'Tekst';
        }
                    
        if (aap == 7){
            var type = 'Tekst';
        }

        if (type == "Gegevens"){
            document.getElementById("attribuut").style.display = "table-row"
            document.getElementById("waarde").style.display = "table-row"
            document.getElementById("jaarbegin").style.display = "none" 
            document.getElementById("jaareind").style.display = "none" 
        }
        if (type == "Chrono"){
            document.getElementById("attribuut").style.display = "none"
            document.getElementById("waarde").style.display = "table-row" 
            document.getElementById("jaarbegin").style.display = "table-row" 
            document.getElementById("jaareind").style.display = "table-row" 
        }
        if (type == "Tekst"){
            document.getElementById("attribuut").style.display = "none"
            document.getElementById("waarde").style.display = "table-row"
            document.getElementById("jaarbegin").style.display = "none" 
            document.getElementById("jaareind").style.display = "none" 
        }

}
                    
</script>

<select name="onderdelenid" onChange="manipuleer(this.value);">
    <option value=""></option>
    <option value="1" >Personalia</option>
    <option value="2" >Opleiding</option>
    <option value="3" >Werkervaring</option>
    <option value="6" >Vaardigheden</option>
    <option value="7" >Hobbys</option>
</select>

[ Voor 59% gewijzigd door Verwijderd op 07-02-2007 10:58 ]

[Verwijderd]

offtopic:
Jikes, das wel erg ranzige code..nofi

[Verwijderd]

Verwijderd schreef op woensdag 07 februari 2007 @ 10:58:

offtopic:
Jikes, das wel erg ranzige code..nofi

offtopic:
Och, het werkt, de indents zijn netjes, en als ik dood ga weet de volgende programmeur hoe hij verder moet.

[Verwijderd]

Verwijderd schreef op woensdag 07 februari 2007 @ 11:01:
[...]

offtopic:
Och, het werkt, de indents zijn netjes, en als ik dood ga weet de volgende programmeur hoe hij verder moet.

offtopic:
True, het is wel duidelijk wat dat betreft, kans blijft natuurlijk dat de volgende progger ook de pijp uit gaat als ie deze code ziet

[ Voor 12% gewijzigd door Verwijderd op 07-02-2007 11:20 ]

[Verwijderd]

Verwijderd schreef op woensdag 07 februari 2007 @ 11:20:
[...]

offtopic:
True, het is wel duidelijk wat dat betreft, kans blijft natuurlijk dat de volgende progger ook de pijp uit gaat als ie deze code ziet

JavaScript:

<script>
    function manipuleer(id){
        var type = null;
        switch(id){
            case '1': type='Gegevens'; break;       
            case '2': type='Chrono'; break;     
            case '3': type='Chrono'; break;     
            case '6': type='Tekst'; break;      
            case '7': type='Tekst'; break;      
        }
        
        attribuut = document.getElementById("attribuut");
        waarde = document.getElementById("waarde");
        jaarbegin = document.getElementById("jaarbegin");
        jaareind = document.getElementById("jaareind");
    
        if (type == "Gegevens"){
            attribuut.style.display = "table-row"
            waarde.style.display = "table-row"
            jaarbegin.style.display = "none" 
            jaareind.style.display = "none" 
        }
        if (type == "Chrono"){
            attribuut.style.display = "none"
            waarde.style.display = "table-row" 
            jaarbegin.style.display = "table-row" 
            jaareind.style.display = "table-row" 
        }
        if (type == "Tekst"){
            attribuut.style.display = "none"
            waarde.style.display = "table-row"
            jaarbegin.style.display = "none" 
            jaareind.style.display = "none" 
        }
    }
</script>   

offtopic:
Speciaal voor jou netjes geklopt

[XWB]

Verwijderd schreef op woensdag 07 februari 2007 @ 11:23:
[...]

JavaScript:

<script>
// lap code
</script>   

offtopic:
Speciaal voor jou netjes geklopt

Netjes? Waarom 2x die controle ? En het var keyword is ook zo handig.

JavaScript:

function manipuleer(id){
    var attribuut = document.getElementById("attribuut");
    var waarde = document.getElementById("waarde");
    var jaarbegin = document.getElementById("jaarbegin");
    var jaareind = document.getElementById("jaareind");     
    
    switch(id){
        case '1':
            attribuut.style.display = "table-row";
            waarde.style.display = "table-row";
            jaarbegin.style.display = "none";
            jaareind.style.display = "none";        
        break;        
        case '2':       
        case '3':
            attribuut.style.display = "none";
            waarde.style.display = "table-row";
            jaarbegin.style.display = "table-row";
            jaareind.style.display = "table-row";           
        break;        
        case '6':     
        case '7':
            attribuut.style.display = "none";
            waarde.style.display = "table-row";
            jaarbegin.style.display = "none";
            jaareind.style.display = "none";        
        break;        
    }
}

[ Voor 29% gewijzigd door XWB op 07-02-2007 11:33 ]

[Verwijderd]

Inderdaad, kon nog een stukje netter

[Verwijderd]

offtopic:
Dat is omdat de code doormiddel van PHP weggeschreven word:

PHP:

    $sql = "SELECT ID,Type FROM cv_onderdelen ORDER BY ID ASC";
    $result = mysql_query($sql) or die ('Er was een fout bij het ophalen van het cv');
    $num_rows = mysql_num_rows($result);

    for ($i=0; $i <= $num_rows -1; $i++){
        $id = @mysql_result($result,$i,"ID");
        $type = @mysql_result($result,$i,"Type");
        echo "
            case '$id': type='$type'; break;        
        ";
    }

offtopic:
Natuurlijk, het kan veel korter in puur JS, maar als ik dat doormiddel van PHP laat genereren is er meer serverload.

[flowerp]

offtopic:
[quote]Verwijderd schreef op woensdag 07 februari 2007 @ 11:40:
Dat is omdat de code doormiddel van PHP weggeschreven word
[/quote]

Maar PHP is niet automatisch een excuus voor dan maar slecht gaan programmeren

[quote]
Natuurlijk, het kan veel korter in puur JS, maar als ik dat doormiddel van PHP laat genereren is er meer serverload.
[/quote]

Dat is echt onzin. Je kan letterlijk 100'en tot 1000'en statements executen en de totale page execution time zal amper een ms langer duren, zelfs in PHP en zelfs onder load. Die paar extra statements om mooie clientside code te genereren is *niet* waar de overhead gaat inzitten bij het uitvoeren van je PHP script.

[Verwijderd]

offtopic:
Dan zou ik alles op type moeten sorteren, en zou mijn PHP-code een stuk langer worden. Dat is het mij niet waard. Daarnaast is dit een hobbyproject, maar mijn baas zou het niet zo leuk vinden als ik een half uur langer bezig ben puur om de code er iets mooier uit te laten zien.