Discussion :

[winterflood_j]

Bonjour,
J'essaie de manipuler le contenu de ma page en créant des elements DOM par javascript.

Tout fonctionne comme il faut sous Firefox, mais sous IE, les attributs des elements créés ne sont pas pris en compte à l'ecran:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
 
var div = document.getElementById(widget)
    var elt = document.createElement('div')
        elt.setAttribute('id',id)
        elt.appendChild(document.createElement('br'))
        var table = document.createElement('table')
            table.setAttribute('class','tdCadre')
            table.setAttribute('width','100%%')
            table.setAttribute('cellspacing','0')
            table.setAttribute('cellpadding','0')
            table.setAttribute('border','0')
            elt.appendChild(table)
        var tb = document.createElement('tbody')
            table.appendChild(tb)
        var tr = document.createElement('tr')
            tb.appendChild(tr)
        var td = document.createElement('td')
            tr.appendChild(td)
        var span = document.createElement('span')
            span.setAttribute('class','lien')
            span.setAttribute('onClick','removeOptionJur(\''+id+'\',\''+title+'\',\''+widget+'\')')
            span.setAttribute('style','cursor:pointer')
        alert(span.getAttribute('class'))
            span.appendChild(document.createTextNode(title))
            td.appendChild(span)
 
    div.appendChild(elt)

Sous Firefox, le class de la <table> 'table' est bien pris en compte, ainsi que le curseur, onclick, style du <span>
Sous IE par contre, ce n'est pas le cas. J'ai bien le contenu (textNode) du span, mais aucun style ou action sur clic n'est pris en compte

Le script ne plante pas (comme j'ajoute l'element à l'ecran en dernier et que ça, ça marche)

Comment est-ce que je devrais m'y prendre pour que ça marche?

Est-ce qu'il y a un moyen/outil pour afficher la source DOM du document sous IE, contrairement au source brut du serveur? (comme Firebug pour FFox)

Merci,
Jonathan

[SpaceFrog]

setAttribute ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 table.className='tdCadre';
 table.style.width='100%';
 ...

[winterflood_j]

Ah d'accord, je vois...

Eh bien ça marche beaucoup mieux, mais le onclick ne passe toujours pas....
qu'est-ce que je devrais utiliser pour les evenements?

J'ai essayé
span.onclick='removeOptionJur(\''+id+'\',\''+title+'\',\''+widget+'\')'
et
span.onClick=etc.
sans succes

Merci,
Jonathan

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

span.onclick=function(){removeOptionJur(id,title,widget)}

[winterflood_j]

Genial, ça marche au poil

Merci beaucoup

[sekaijin]

il te faut lire la doc sur le DOM

class est un mot réservé l'attribut de classe css s'appelle className

mais il y a quelques autres attribut dont le nom DOM ne coresponds pas avec celui du tag
entre autre
cheked selected posent quelques dificultées
le W3C n'étant pas très strict sur leur définition il sont diversement interprété en ecmascript

ainsi dans IE ces deux attribut donne l'état coché ou pas sélectionné ou pas d'un bouton radio une check box ou une option
mais ce sont defaultCheked defaultSelected qui permettent de créer des élément présélectionnés

Il faut lire la doc car il y en a pas mal qui portent des ambiguité et donc des interprétation différentes suivant les implémentation de JS
A+JYT