rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Résolu

[Javascript] Pb: DOM et IE (ajout d'elements)

Posté par knoodrake, le lundi 11 juin 2007 à 13:41:42
Bonjour.

Petit ( mais important) probleme avec JavaScript et.. (surprise) .. IE !

Description:
J'ai un tableau, dans lequel je veu rajouter dynamiquement une nouvelle ligne lorsqu'un certain lien est cliqué.
La nouvelle ligne comprend 2 "<input type='text'>" ayant un id différent a chaque ligne.
La chose marche très bien avec Firefox, mais pas internet Explorer.
Ce dernier m'indique lorsque je clique sur le chti bouton "erreur sur la page" qu'il y a une "erreur de syntaxe". Helas, impossible de retrouver la-dite erreur puisqu'il ne m'indique ou c'est sans tenir compte des inclusions etc..
Je rajoute que la console JavaScript de FFx ne m'indique rien, même pas un warning.

Le HTML: 
<table id='table_2' style='display:none;'>
<tr><td>Nom</td><td>Valeur</td>­;</tr>
<tr>
	<td colspan='2' align='center'><a href='#' onclick='one_more_ligne();'>[+] Une de plus</a></td>
</tr>
<tr>
	<td><input type='text' id='oo_nom_1' name='oo_nom'/></td>
	<td><input type='text' id='oo_valeur_1' name='oo_valeur'/></td>
</tr>
</table>
<button onclick='add_opt();' id='submit' disabled>Rajouter</button>


et le JavaScript: ( qui rajoute donc un nouveau TR avec dedans 2 TD comprenant chaquun un input, comme les 2 de départ (cf. le 6 et 7emes lignes du HTML ci-dessu )) 
var count = 1;
function one_more_ligne () {
	count++;
	var tr = document.createElement("TR");
	var td_1 = document.createElement("TD");
	var td_2 = document.createElement("TD");
	var inp1 = document.createElement("INPUT");
	var inp2 = document.createElement("INPUT");

	inp1.name="oo_nom";	inp2.name="oo_valeur&quo­t;;
	inp1.type="text";	inp2.type="text";
	inp1.id="oo_nom_"+count;
	inp2.id="oo_valeur_"+count;

	td_1.appendChild(inp1);	td_2.appendChild(inp2);
	tr.appendChild(td_1); 	tr.appendChild(td_2);

	byId("table_2").appendChild(tr);
}

Ah oui, et je précise avant qu'on ne me fasse la remarque pour rien que ById est bien définie quelque part plus tôt dans le fichier js.
PS: ça ne pourrait pas venir d'une erreur autre par dans la page qui bloquerai la suite par hazard ?

Si vous avez des idées, des solutions, des voies d'exploration, n'importe quoi .. :-)

Merci par avance.
Cordialement, Damien.
Configuration: Linux
Firefox 2.0.0.4
Répondre à knoodrake  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
HackTrack, le mercredi 20 juin 2007 à 12:34:05
Salut!

Ajoute la balise <TBODY> dans ta table et le problème sera résolu.

Voir le code ci-dessous: 

<html>
	<head>
		<script language="javascript" type="text/javascript">
			var count = 1;
			
			function one_more_ligne () {
				count++;
				var tr = document.createElement("TR");
				var td_1 = document.createElement("TD");
				var td_2 = document.createElement("TD");
				var inp1 = document.createElement("INPUT");
				var inp2 = document.createElement("INPUT");

				inp1.name="oo_nom";	inp2.name="oo_valeur&­quot;;
				inp1.type="text";	inp2.type="text";
				inp1.id="oo_nom_"+count;
				inp2.id="oo_valeur_"+count;

				td_1.appendChild(inp1);
				td_2.appendChild(inp2);
				tr.appendChild(td_1);
				tr.appendChild(td_2);
				byId("table_2").getElementsByTagName('tbody')[­0].appendChild(tr);
			}

			function byId(elmId){
				var elm = document.getElementById(elmId);
				if(elm==null)
					elm = document.getElementsByName(elmId)[0];
				alert(elm.innerHTML);
				return elm;
			}
		</script>
	</head>
	
	<body>
		<table id="table_2" name="table_2">
			<tbody>
				<tr>
					<td>Nom</td>
					<td>Valeur</td></tr>
				<tr>
					<td colspan="2" align="center"><a href="#" onclick="one_more_ligne();">[+] Une de plus</a></td>
				</tr>
				<tr>
					<td><input type="text" id="oo_nom_1" name="oo_nom"/></td>
					<td><input type="text" id="oo_valeur_1" name="oo_valeur"/></td>
				</tr>
			</tbody>
		</table>
		<button onclick="add_opt();" id="submit" disabled>Rajouter</button>
	</body>
</html>


;-)
HackTrack
   
Répondre à HackTrack

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
knoodrake, le vendredi 6 juillet 2007 à 20:26:18
je vais essayer ça merci beaucoup :)

Edit: Si seulement ça avait pu marcher.. :-(
   
Répondre à knoodrake

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
altemis, le lundi 9 juillet 2007 à 12:14:53
il faut pour que ca marche sous IE que tu mette l' ID dans le TR

<table style='display:none;'>
<tr id='table_2' ><td>Nom</td><td>Valeur</td></­tr>
<tr>

ca marche sous IE mais plus sous FF , a toi d adapter maintenant le code afin d avoir un ID différent pour Table et pour TR et d'appeller le bon pour IE et FF

++
   
Répondre à altemis

4


  • 2    Ce message vous semble utile, votez !
  • Ce message ne vous semble pas utile, votez !
  • Signaler ce message aux modérateurs
altemis, le lundi 9 juillet 2007 à 13:42:28
autrement, ca marche dans les deux navigateur si tu place l'id dans un <tbody> ;
cordialement,
   
Répondre à altemis

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
knoodrake, le lundi 9 juillet 2007 à 21:51:36
merci beaucoup altemis.
   
Répondre à knoodrake

6


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
entrope, le jeudi 17 avril 2008 à 22:05:56
Merci pour le <tbody>, ca vient de me sauver la vie :)

Cheers
   
Répondre à entrope

7


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 fodjio, le samedi 3 mai 2008 à 16:57:35
Merci mille fois pour l'astuce du Tbody !

Je me suis bien arraché les cheveux sur ce problème ^^

Non mais vraiment QUELLE DAUBE cet IE !!!

À croire que Microsoft fait tout pour pourrir la vie des webmasters !
   
Répondre à fodjio
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Web Developer Toolbar 1.1.6Web Developer Toolbar - WebDeveloper est une extension firefox représentant une formidable boîte à outils pour examiner et manipuler les pages...Catégorie: Extensions Firefox
Licence: Freeware/gratuit
Télécharger Power IE6 3.00Power IE6 - Power IE 6 est compatible avec Internet Explorer 7, c'est un logiciel d'origine canadienne, qui vous permet en quelques...Catégorie: Anonymat/Confidentialité
Licence: Freeware/gratuit
Télécharger Anti yeux Rouges 26/05/2004Anti yeux Rouges - Anti Yeux Rouges est un logiciel très simple permettant uniquement de corriger les yeux rouges sur une photo en quelques...Catégorie: Retouche photo
Licence: Freeware/gratuit
Télécharger Visual Domotique 0.86Visual Domotique - Visual Domotique est un programme permettant de piloter des composants électroniques via son ordinateur. Vous n'avez besoin...Catégorie: Environnement de travail
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « [Javascript] Pb: DOM et IE (ajout d'elements) »