11548 sujets

JavaScript, DOM et API Web HTML5

DOM : insérer un noeud au bon endroit [résolu]

Bonjour,

Sur mon site j'ai le formulaire suivant :
<form action="#" method="post">
	<fieldset>
		<legend>Envoyer un message</legend>
					
		<p>
			<label for="MsgNom">Nom</label>
			<input id="MsgNom" name="MsgNom" type="text" value="" maxlength="10" />
		</p>
		<p>
			<label for="MsgTxt">Message</label>
			<textarea id="MsgTxt" name="MsgTxt" cols="20" rows="2"></textarea>
		</p>
		<p>
			<input type="submit" value="Envoyer" />
		</p>
	</fieldset>
</form>
La validation du formulaire appelle une fonction qui génère (grâce au DOM) une liste d'erreurs éventuellement rencontrées.

J'en viens à ma question : j'aimerais que cette liste vienne précisément se placer entre le </legend> et le premier <p>. Comment faire ?

Merci. Smiley smile
Modifié par 84mickael (31 Aug 2006 - 00:57)
salut

a écrit :
entre le </fieldset> et le premier <p>


ça a l'air précis mais d'après ton code, tu pourrais sans doute nous dire ça plus clairement?
Slt,
var XHTML_NS = 'http://www.w3.org/1999/xhtml';

document.insertBefore(objetàinsérer, document.getElementsByTagNameNS(XHTML_NS, 'fieldset')->item(0)->getElementsByTagNameNS(XHTML_NS, 'p')->item(0));


Mais tu devrais vraiment donner des id aux éléments importants, comme ton fieldset.

a+
Thanh a écrit :
Après le <fieldset> et le premier <p> ? Smiley lol
Je me suis trompé évidemment, j'ai édité ! Smiley biggol
Modifié par 84mickael (30 Aug 2006 - 23:10)
Grâce au code de SirWam, j'ai trouvé ça :
document.insertBefore(liste, document.getElementById('MsgNom').parentNode);

Modifié par 84mickael (31 Aug 2006 - 00:43)
Je croyais avoir trouvé la solution, cependant j'obtiens une erreur :
a écrit :
Erreur : uncaught exception: [Exception... "Node was not found" code: "8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)" location: "http://localhost/js/verifMsg.js Line: 36"]
à la ligne
document.insertBefore(liste, eltNom.parentNode);

Voici un extrait de la fonction en question :
function verifMsg()
{
	var eltNom = document.getElementById('MsgNom');
	var errNom = 0;
	var errTxt = 0;

	(...)
	
	if(errNom == 0 && errTxt == 0)
	{
		return true;
	}
	else
	{	
		var liste = document.createElement('ul');
		document.insertBefore(liste, eltNom.parentNode);
		liste.setAttribute('class','warning');

		(...)

		return false;
	}
}

Modifié par 84mickael (31 Aug 2006 - 00:45)
Salut,

Tu devrais aller voir la référence pour insertBefore en effet ce n'est pas une méthode de Document mais une méthode d'élément
la syntaxe est 
parentElement.insertBefore(newElement, targetElement)

essaie alors 
eltNom.parentNode.parentNode.insertBefore(liste, eltNom.parentNode);


a+
a écrit :
Et excusez ma maladresse, je débute en DOM.

ouh là y'a vraiment pas de quoi Smiley cligne je sais ce que c'est quand on est plongé dans truc à 1h du mat ..
C'est gentil.

Pour info, j'ai rencontré un problème (assez logique) avec IE : la liste d'erreurs s'affichait autant de fois que l'on validait le formulaire erroné. J'ai donc utilisé le code suivant :
var liste = document.getElementById('ulMessageErreurs');

if(liste == undefined)
{
	liste = document.createElement('ul');
	eltNom.parentNode.parentNode.insertBefore(liste, eltNom.parentNode);
	liste.setAttribute('id', 'ulMessageErreurs');
	liste.setAttribute('class', 'warning');
}
else
{
	while(liste.firstChild )
	{
		liste.removeChild(liste.firstChild);
	}
}


Question subsidiaire : est-ce normal qu'IE ne prenne pas en compte la classe CSS "warning" ajoutée comme attribut de la liste ?

Merci. Smiley smile
Modifié par 84mickael (31 Aug 2006 - 01:27)
Bonjour 84mickael,
84mickael a écrit :
C'est gentil.

Question subsidiaire : est-ce normal qu'IE ne prenne pas en compte la classe CSS "warning" ajoutée comme attribut de la liste ?

Merci. Smiley smile

Ie 5 et 6 va reconnaitre 
liste.className="warning"

Cela marche aussi sur les autres navigateurs.
C'est comme 
liste.id='ulMessageErreurs';

Quand le DOM n'est pas indispensable, Je préfère utiliser le langage objet de javascript. Je ne sais pas si aussi valable associé au XML ?
Je ne suis pas apte à contester ou approuver ta méthode. Je n'ai que quelques bases en JavaScript, et encore moins en DOM !

J'ai trouvé une solution à mon problème en utilisant #ulMessageErreur plutôt que .warning dans le fichier CSS.

J'aimerais bien quand même savoir, pour je n'arrive pas à ce que la classe soit reconnue ! Smiley lol
Sujet clos
Aller à