XSLT par Javascript, insertion du résultat dans le document

par **Hubert Roksor** » 26 juil. 2007, 15:41

J'ai oublié de cocher le topic, mais en fait j'ai trouvé la solution un peu par chance quelques minutes après avoir posté. Il fallait changer le JS, la manière dont je chargeais le XML/XSL n'était pas la bonne.

Merci en tout cas d'avoir répondu

par **Ryle** » 26 juil. 2007, 15:36

Ca fait un moment que j'ai pas remis les doigts dans le xsl mais à brule pourpoint, voici toujours deux remarques... sait on jamais si cela peut faire avancer le shlimilibili, le shmibilili, le ... bref la chose

Dans le html, j'ai pris pour habitude de fermer en toute lettre les balises d'inclusion de javascript, car même si syntaxiquement, le résultat est le même, certains navigateurs (IE nottament, aïe, pas taper

!) veulent disposer de quelque chose à interpréter (même vide) si jamais le fichier n'était pas trouvé :

Code : Tout sélectionner

<script type="text/javascript" src="xslt.js"></script>

Second point, il me semblait que si dans ton document xml ta racine est root, il fallait le spécifier explicitement, sinon aucun match n'était trouvé et du coup le template pas appliqué :

Code : Tout sélectionner

<xsl:template match="/root">

enfin si ça fonctionne avec ajax, c'est que ca doit pas changer grand chose au final

par **Hubert Roksor** » 26 juil. 2007, 14:59

Hi,

J'avais dans l'idée de tester l'utilisation de transformation XSLT par Javascript pour ensuite injecter le résultat dans le document en cours. J'ai demandé conseil à mon pote Google, qui m'a redirigé vers les 537 copies du même article dont les exemples ne marchent pas. Donc j'ai demandé à mon autre pote, Mozilla Developer Center pour tout reprendre à zéro, mais là encore sans succès.

J'ai essayé de réduire le problème à sa plus simple expression, et d'après ma relativement faible connaissance de la manipulation de XML en JS, il semblerait que le fragment de DOM que je génère soit vide (XMLSerializer me renvoit une chaîne vide que je serialize() mon XML, XSL ou le fragment généré). Firebug ne me renvoit aucun warning, aucune erreur, donc j'arrive à cours de pistes à explorer.

Voici mes fichiers de test. Dans l'exemple, on utilise un arbre XML vide, et un fichier XSL qui sort un paragraphe avec "Hello World". Le Javascript est sensé tranformer le XML et insérer le résultat dans le div #target. Pour info j'ai essayé de remplacer le xsl:output pour sortir du XML sans doctype, sans succès. D'après XMLSerializer, xml est vide, xsl est vide... et pourtant si j'ajoute volontairement des erreurs dans les fichiers elles apparaissent dans Firebug, donc les fichiers sont bien chargés.

xslt.html

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title></title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<script type="text/javascript" src="xslt.js" />
	</head>

	<body>
		<div id="target" />
	</body>
</html>

xslt.js

Code : Tout sélectionner

window.onload = function ()
{
	var xsl = document.implementation.createDocument("", "", null);
	xsl.load('xslt.xsl');

	var xml = document.implementation.createDocument("", "", null);
	xml.load('xslt.xml');

	var xslt = new XSLTProcessor()
	xslt.importStylesheet(xsl);

	var frag = xslt.transformToFragment(xml, document);
	document.getElementById('target').appendChild(frag);
}

xslt.xml (vide pour l'exemple, pas besoin de données supplémentaires)

Code : Tout sélectionner

<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="xslt.xsl" ?>
<root />

xslt.xsl

Code : Tout sélectionner

<?xml version="1.0" encoding="utf-8" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

	<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />

	<xsl:template match="/">
		<p>Hello World</p>
	</xsl:template>

</xsl:stylesheet>

Si quelqu'un a une idée, c'est volontiers. Merci d'avance :]

Edit: OMG, j'ai fait un dernier coup de Google à tout hasard, et en utilisant XHR pour charger les fichiers en question ça fonctionne. Cool, j'ai juste passé 2h à faire un Hello World

En espérant que ça serve à quelqu'un:
xslt.js

Code : Tout sélectionner

window.onload = function ()
{
	var xsltProcessor = new XSLTProcessor();
	var myXMLHTTPRequest = new XMLHttpRequest();
	myXMLHTTPRequest.open("GET", "xslt.xsl", false);
	myXMLHTTPRequest.send(null);

	xslStylesheet = myXMLHTTPRequest.responseXML;
	xsltProcessor.importStylesheet(xslStylesheet);

	myXMLHTTPRequest = new XMLHttpRequest();
	myXMLHTTPRequest.open("GET", "xslt.xml", false);
	myXMLHTTPRequest.send(null);
	var xmlSource = myXMLHTTPRequest.responseXML;

	var resultDocument = xsltProcessor.transformToFragment(xmlSource, document);
	document.getElementById("target").appendChild(resultDocument);
}

XSLT par Javascript, insertion du résultat dans le document

Répondre

Étendre la vue Revue du sujet : XSLT par Javascript, insertion du résultat dans le document

XSLT par Javascript, insertion du résultat dans le document