11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous !

Je m'arrache les cheveux depuis quelques heures parce qu'IE est un sale gosse...
Je m'explique.

Lors d'une inscription un utilisateur doit pouvoir ajouter des sports et son niveau pour celui ci à son profil.
Pour ce faire il y a une ligne qui propose de sélectionner un sport (et niveaux) et un bouton pour dupliquer la ligne et ainsi ajouter plusieurs sports . (Lors de la duplication je change les ID pour qu'il n'y ai pas de conflit : cf les fonctions js plus bas).
Au bout de la ligne on a aussi un lien supprimer pour effacer la ligne.

Mon problème c'est que sous IE le bouton supprimer ne fonctionne pas pour les lignes dupliquées alors que l'original marche très bien.

Pour être plus claire voici le code nécessaire :

Les fonctions javascript :

function delLine(line) 
{ 
	var parent = document.getElementById(\"select_sports\");
	var ligne = document.getElementById(line);
	parent.removeChild(ligne);
} 
function copyLine(link, line)
{
	nb++;
	var ref = document.getElementById(line);
	var parent = ref.parentNode;
	ligneClone = ref.cloneNode(true);
	parent.insertBefore(ligneClone, link);
	ligneClone.setAttribute('id', 'sport_line_'+nb);
	ligneClone.childNodes[0].setAttribute('for', 'select_sport_'+nb);
	ligneClone.childNodes[2].setAttribute('id', 'select_sport_'+nb);
	ligneClone.childNodes[2].setAttribute('name', 'sports[]');
	ligneClone.childNodes[4].setAttribute('for', 'select_level_'+nb);
	ligneClone.childNodes[6].setAttribute('id', 'levels[]');
	link = ligneClone.getElementsByTagName('a')[0];
	link.setAttribute('id', 'delLink'+nb);
	link.className = 'delLink';
	link.setAttribute('onclick', 'delLine(\'sport_line_'+nb+'\');');
	link.setAttribute('onkeypress', 'delLine(\'sport_line_'+nb+'\');');
}


Les lignes HTML (la deuxième ligne est générée après un premier clic) :

<div id="select_sports" class="select_sports">
	<div id="sport_line_1">
		<label for="select_sport_1">Sport</label>
		<select name="sports[]" id="select_sport_1">
			<option value="1">Tennis</option>
			<option value="2">Football</option>
			<option value="3">Basket</option>
		</select>
		<label for="select_level_1">Niveau</label>
		<select name="levels[]" id="select_level_1">
			<option value="1_spetactor">Spectateur</option>
			<option value="2_novice">Amateur</option>
			<option value="3_member">Licencié</option>
			<option value="4_professional">Professionnel</option>
		</select>
		<a href="#" title="Supprimer" class="no_delLink" id="delLink1" onclick="delLine('sport_line_1');" onkeypress="delLine('sport_line_1');">Supprimer</a>
	</div>
	<div id="sport_line_2">
		<label for="select_sport_2">Sport</label>
		<select name="sports[]" id="select_sport_2">
			<option value="1">Tennis</option>
			<option value="2">Football</option>
			<option value="3">Basket</option>
		</select>
		<label for="select_level_2">Niveau</label>
		<select name="levels[]" id="levels[]">
			<option value="1_spetactor">Spectateur</option>
			<option value="2_novice">Amateur</option>
			<option value="3_member">Licencié</option>
			<option value="4_professional">Professionnel</option>
		</select>
		<a href="#" title="Supprimer" class="delLink" id="delLink2" onclick="delLine('sport_line_2');" onkeypress="delLine('sport_line_2');">Supprimer</a>
	</div>
	<a href="#" title="Ajouter une ligne" onclick="copyLine(this, 'sport_line_1');" onkeypress="copyLine(this, 'sport_line_1');">Ajouter une ligne</a>
</div>


Quelqu'un voit il pourquoi ca ne fonctionne pas sous IE ?

Merci d'avance à tous ceux qui se pencherons la dessus.
Modifié par Kendrak (06 Mar 2008 - 20:54)
Bon finalement apres 3h de plus a se croquer le cerveau j'ai modifier ma fonction de suppression et géré les fonctions par event et maintenant ca marche.
Merci à ceux qui auront tenté de percer le mystère d'IE sur ce coup !

A une prochaine Smiley cligne