11487 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Problème compatibilité avec IE

Pages :
(reprise du message précédent)

Merci à vous tous pour ces infos sur javascript.


cependant je reviens sur mon problème de base car ça ne marche pas exactement comme je veux Smiley decu

voilà mon code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>test</title>
<script language="JavaScript1.2" type="text/javascript">
<!--
function createLigneDePalmares(){
	var tableau=document.getElementById("palmares");
	var ligne=document.createElement("tr");
	var col=document.createElement("td");
	col.setAttribute("colspan", "4");
	var test=document.createTextNode("nouvelle ligne");
	tableau.appendChild(ligne);
	ligne.appendChild(col);
	col.appendChild(test);
}
-->
</script>
</head>
<boby>
<table width="100%" class='tbcadre' id="palmares" border="1">
	<tr>
		<td class='darkrow2' colspan='4'><div align="center"><b>Palmarès</b> [ <a id="ajoutLigne" style="cursor:pointer;" href="javascript:createLigneDePalmares();">ajouter une ligne de palmarès</a> ]</div></td>
	</tr>
	<tr>
		<td class="darkrow3" width="105"><div align="center"><b>Date</b><br />(jj-mm-aaaa)</div></td>
		<td class="darkrow3"><div align="center"><b>Lieu</b></div></td>
		<td class="darkrow3"><div align="center"><b>Titre</b></div></td>
		<td class="darkrow3" width="20"><div align="center"><b>Supprimer</b></div></td>
	</tr>
	<tr id="empty">
		<td class="tbline" colspan="4"><div align="center">Vide ...</div></td>
	</tr>
</table>
</boby>

</html>


ça marche (ça créer une ligne) sous Firefox mais pas sous IE !!


j'ai pourtant rajouter var devant les declaration de variables, comme afbilou l'a dit ! Smiley eek

vous avez une idée pour expliquer ça ?
Modifié par Poich (19 Jul 2005 - 09:42)
Pour débugger j'ai demandé à JS d'afficher ceci:


alert(document.getElementById('conteneur').childNodes[0].nodeName);


Sous IE et sous Firefox il ne m'affiche pas la même chose. IE affiche tbody. On peut donc en déduire que pour résoudre le problème il va falloir construire un tableau avec les bonnes composantes thead et tbody.

Comme ceci ça marche :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript">
function createLigneDePalmares(){
	var ligne=document.createElement("tr");
	var col=document.createElement("td");
	col.setAttribute("colspan", "4");
	col.setAttribute("class", "tbline");
	var test=document.createTextNode("nouvelle ligne");
	col.appendChild(test);
	ligne.appendChild(col);
	document.getElementById('conteneur').appendChild(ligne);
}
</script>
</head>
<body>
<table width="100%" class='tbcadre' id="palmares" border="1" summary="">
	<thead>
		<tr>
			<th class='darkrow2' colspan='4'>
				Palmarès</b> [<a id="ajoutLigne" style="cursor:pointer;" href="#" onclick="createLigneDePalmares();">ajouter une ligne de palmarès</a> ]
			</th>
		</tr>
		<tr>
			<th class="darkrow3" width="105">Date<br />(jj-mm-aaaa)</th>
			<th class="darkrow3">Lieu</th>
			<th class="darkrow3">Titre</th>
			<th class="darkrow3" width="20">Supprimer</th>
		</tr>	
	</thead>
	<tbody id="conteneur">
		<tr id="empty">
			<td class="tbline" colspan="4">Vide ...</td>
		</tr>	
	</tbody>
</table>
</body>
</html>


J'ai aussi purgé un peu le code.
=> Léger bug d'affichage, IE ne comprend pas le colspan.

++
Je te remercie pour ta reponse solo !

je ne connaissais même pas les composantes thead et tbody Smiley confused .

Quelqu'un sait pourquoi le colspan ne marche pas à IE ?? Smiley eek
p'tain, pas facile à résoudre ton pb... mais j'y suis arrivé ! Smiley murf

Bon déjà l'amuse bouche : ta balise <body> a un p'tit problème, je te laisse corriger Smiley cligne
Mais c'est biensur pas ça qui bloque...

Visiblement en interne, IE exige un <tbody> dans le table... si tu le rajoutes il est alors capable d'ajouter des lignes... je crois pourtant pas que le <tbody> soit obligatoire (si ? peut-etre en XHTML 1.0 Strict ?).

Donc ton script devient :
<table id="palmares" border="1">
<tbody id="tb_palmares">
<tr>
  <td>
....
  </td>
</tr>
</tbody>
</table>

et tu "append" ta ligne sur le tbody :
...
document.getElementById("tb_palmares").appendChild(ligne);
...
Bon désolé j'avais un wagon de retard visiblement (j'avais pas vu qu'il y avait une seconde page de post...)

Pour le colspan c'est visiblement un bug/une non implémentation de IE. Tu peux tout de même t'en tirer en remplaçant
col.setAttribute("colspan", "4");

par 
col.colSpan = "4";
C'est peut etre une question hors sujet mais moi je met 
<script type="javascript/text">


alors qu'apparement vous mettez plutot
<script type="text/javascript">


Y a t-il une différence particulière?

Le premier qui dit boulet...
C'est peut etre ça l'erreur aprèsè tout!!!
Modifié par Pops83 (19 Jul 2005 - 16:17)
bonjour,

a écrit :
Pour le colspan c'est visiblement un bug/une non implémentation de IE


Du point de vue du DOM n'importe quel attribut est un node valide sur lequel on peut travailler, même ceux que vous pouvez créer vous même.

Malheureusement, IE à une notion très restrictive des attributs et seuls ceux qui sont référencés, élément par élément, sont accessibles à l'objet node.

Il n'y à aucune règle permettant de savoir si tel ou tel attribut peut etre accessible au DOM IE, il faut tester cas par cas.

Une solution pour contrer ce problème est de prévoir d'utiliser innerHTML comme béquille sours IE en passant une chaine comme contenu du parent.

C'est pas très élégant, c'est microsoft... Smiley lol

JP
Merci de ton aide chadom même si t'étais un peu en retard ... Smiley langue

Tu m'as bien aidé pour le colspan, mais j'ai le même problème avec tous les attributs que je crée :

monInput.setAttribute("onfocus","alert('focus')");
monInput.setAttribute("onblur","alert('unfocus')");
monInput.setAttribute("size","25");
monInput.setAttribute("maxlength","10");
monInput.setAttribute("class","textbox3");
monInput.setAttribute("name","date_palmares_"+num);
monInput.setAttribute("type","text");
monInput.setAttribute("value","");
monInput.setAttribute("style","text-align:center;");


Tout ça ne marche pas sous IE Smiley fache
j'ai testé avec 
monInput.onFocus="alert('focus')";

mais ça ne marche pas ! Tu aurais une liste avec le nom des fonctions possibles pour IE please ??





jpv a écrit :
Il n'y à aucune règle permettant de savoir si tel ou tel attribut peut etre accessible au DOM IE, il faut tester cas par cas.

Désolé mais j'ai pas trop compris Smiley confused tu peux donner un exemple please ?



En tout cas encore merci à vous tous
Hello,

sinon on pourrait remonter à la source. Que désires tu faire? Ajouter des lignes et pouvoir y ajouter du contenu?
oui c'est ça

j'ajoute un contenu avec des elements de type input. Ces éléments ont un certain nombre d'attributs (par exemple ceux qui j'ai cité).

Avec Firefox ça marche nikel mais pas avec IE.

Je crois que IE ne comprend pas le setAttribute ?!
je te remercie mais c'est pas ce que je veux faire !

En fait mon tableau sert à saisir des lignes de palmarès. La page affiche donc le tableau avec les lignes déjà saisies et permet d'ajouter de nouvelles lignes.
Les lignes déjà saisies sont affichées dans des éléments input qui ont un certain nombre d'attribut et mon but et de créer une (ou plusieurs) nouvelle(s) ligne(s) avec les mêmes éléments input et donc les mêmes attributs.
En particulier les attributs :
- onfocus
- onblur
- size


si quelqu'un a une autre soluce pour moi j'suis preneur Smiley langue
Modifié par Poich (20 Jul 2005 - 12:30)
Ok mais il faut bien sauvegarder à moment données les informations saisies non?

Je serais donc pour créer non des lignes de tableaux mais des champs de formulaires.

HTML et les feuilles de styles de permettent de mettre en page une structure intéressante (fieldset, legend, label ...).
Bonjour,
tbody éxiste par défaut:
var tableau=document.getElementById("palmares").getElementsByTagName('tbody')[0];


pour ajouter un évennement > IE:
onfocus=function(){alert('focus')}
Pages :
Sujet clos
Aller à