Récupérer le contenu _exact_ d'un div

Salut !

Je suis en train de faire un peu d'AJAX, c'est assez sympa. Surtout avec Scriptaculous, je le recommande vraiment c'est un super script qui permet de faire des trucs beaux très rapidement. Un vrai plaisir.

Bref passons à mon problème

Je veux faire un editInPlace : on clique sur le message dans le forum et hop ca se transforme en formulaire pour éditer le message. La première étape consiste à envoyer le contenu du message au serveur, pour qu'il l' "unparse", pour avoir une version éditable.
C'est à ce niveau qu'est mon problème. Je récupère le contenu du message avec document.getElementById('divId').innerHTML. Mais dans mon message j'ai une image, donc <img src="truc" />, et lorsque je le récupère avec le innerHTML, il me retourne <img src="truc"> ! Sans le slash de fermeture de balise donc ! Ce qui fait qu'après, ma fonction d'unparse rale un peu parce que je lui donne un xml mal formé.

Donc ma question est : avez vous déjà eu ce problème ? Comment le résoudre ? Y a-t-il d'autres moyens de récupérer le contenu de mon div ?

Merci !

Salut, à tout hasard, quel est ton Doctype?

Bonjour

Une petite regex adaptée qui remplacerait les > par /> seulement pour les balises concernées (autofermantes) genre img, br, hr ou encore input pourrait faire l'affaire.... ça doit se trouver tout fait

Winzou>Pour l'instant, il n'y a rien de mieux a faire que la suggestion d'Arsene, les navigateurs renvoyant (tous ?) du code HTML et non XHTML.

@MacIntoc : intéressant, je savais pas que les browsers faisait cela. Est-ce qu'ils le font même avec un Doctype XHTML?

Sinon, quitte à faire une requête AJAX, pourquoi ne pas partir du contenu de ta base de données au lieu de prendre celui qui est déjà chargé dans la page?

J'ai un doctype xhtml 1.0 strict.
C'est bien dommage ce comportement ! Il devrait y avoir un attribut innerXHTML :---°

Je vais réfléchir à utiliser un pre-parsage pour fermer les balises alors.

Je n'ai pas retenu la solution qui consiste à partir du contenu de ma base de données pour éviter une connexion à celle-ci. Et aussi parce qu'il y a plusieurs "types" de message à récupérer : du forum, de la messagerie, etc, etc. Mais bon ca reste la solution la plus propre.

Re-salut !

Je viens vous donner des nouvelles du front. Alors que la petite regex semblait tout régler, j'ai invité une amie voir comment ce que j'ai fait était beau. Et la horreur, elle utilise IE ! Pour information, voici ce que me renvoie IE avec le innerHTML :

C'est super sympa scriptaculous ! <img src="tpl/img/smileys/smile.gif" alt=":)" class="smiley" />
devient
C'est super sympa scriptaculous ! <IMG class=smiley alt=:) src="tpl/img/smileys/smile.gif">

Donc la c'est plus une petite regex qu'il me faut, c'est un reparseur entier "HTML facon IE => XHTML correct"

Finalement retour point de départ, je cherche toujours un autre moyen de récupérer le contenu d'origine d'un div !

skywalk3r>J'imagine que oui, vu que tu demande du HTML. Il aurait fallut une propriété innerXHTML pour obtenir la version XHTML, comme la fait remarqué winzou.

winzou>Avec textContent, tu obtiens la même chose ?

Sinon, dernière solution, c'est de passer par childNode et tagName pour ré-écrire les balises autours du texte.

En gros, un truc du genre :

//root : noeud HTML/XHTML ou texte)
var parse=function(root){
	var str=new Array();

	if(root.childNodes.length){ //si c'est une balise qui a du contenue enfants (div, p, span,... ou du texte)
		str+='<'+root.tagName.toLowerCase()+attributes(root)+'>'; //écriture de la balise ouvrante
		
		for(var t=0; t<root.childNodes.length; t++){
			str+=parse(root.childNodes[t]); //écriture du contenue enfant (balise et texte)
		}
		
		str+='</'+root.tagName.toLowerCase()+'>'; //écriture de la balise fermante
	}else if(root.tagName) str+='<'+root.tagName.toLowerCase()+attributes(root)+' />'; //si c'est une balise qui n'a pas de balise enfant (br, img,...), écriture de la balise auto-fermante
	else str+=root.NodeValue; //si ce n'est pas une balise, écriture du texte
	
	return str;
}

//root : noeud exclusivement HTML/XHTML
parse.prototype.attributes=function(root){
	var str=new String;
	
	for(var t=0; t<root.attributes; t++){ //pour chaque attribut de la balise
		var+=' '+root.nodeName+'="'+root.nodeValue+'"'; //ecriture du nom et de la valeur de l'attribut, sans oublié le petit espace au début et les "
	}
	
	return str;
}

C'est de l'impro, j'ai pas vérifié si ça fonctionnais ou si y avais des erreurs de syntaxe. C'est juste pour te donner une idée globale de l'algo.
Modifié par MacIntoc (19 Jun 2008 - 15:10)

Merci MacIntoc mais non ca ne marche pas avec textContent qui ne me retourne que... le texte Sans les balises image.
Réécrire les balises uhm, c'est un petit peu trop de la bidouille à mon gout par contre

Je vais encore chercher un moyen d'avoir le vrai contenu de mon div. Si je trouve je vous tiens au courant. Sinon je vais surement me tourner vers la solution qui consiste à recharger le message depuis la base de données.

Si ça t'intéresse, j'ai fais une fonction innerXML qui devrait régler les problèmes que tu as soulevé, en attendant que les navigateurs l'implémente nativement.