Paramètre XSLT via Javascript

Version imprimable

14/04/2016, 12h39
polymorphisme

Paramètre XSLT via Javascript

Bonjour,

j'ai un tableau HTML généré par un fichier XML qui appele une feuille de style XSL.

Les intitulés du tableau HTML sont des liens qui envoyent un paramètre de tri.

Comment récupérer la valeur d'un paramètre afin de trier les éléments de mon tableau ?

Je sais qu'on peut le faire avec Javascript, mais je n'en connais pas les détailles.

BIen cordialement.
14/04/2016, 13h49
thelvin

Hello,

il faut commencer par oublier XSLT et XML.

Tu prends juste un tableau HTML tout normal, avec les mêmes données.
Et tu fais le JavaScript qui s'occupe de trier ce tableau HTML normal.

Une fois que tu sauras faire ça avec HTML/JavaScript, il suffit de remettre le même HTML/JavaScript dans ce que générera ton XSLT.

Je suis parti avec l'exemple « Basic Example » (https://developer.mozilla.org/en-US/.../Basic_Example)

L'url file:///home/gregory/workspace/documentation/dictionary/model.xhtml?myOrder=descending retourne dans Mozilla :

Code:

1
2
3
4
5
6
7
8
9
<html>
<head>
<title>Insert title here</title>
<script>
var xslStylesheet; var xsltProcessor = new XSLTProcessor(); var myDOM; var xmlDoc; function Init(){ // load the xslt file, example1.xsl var myXMLHTTPRequest = new XMLHttpRequest(); myXMLHTTPRequest.open("GET", "model.xsl", false); myXMLHTTPRequest.send(null); xslStylesheet = myXMLHTTPRequest.responseXML; xsltProcessor.importStylesheet(xslStylesheet); // load the xml file, example1.xml myXMLHTTPRequest = new XMLHttpRequest(); myXMLHTTPRequest.open("GET", "model.xml", false); myXMLHTTPRequest.send(null); xmlDoc = myXMLHTTPRequest.responseXML; var fragment = xsltProcessor.transformToFragment(xmlDoc, document); document.getElementById("example").innerHTML = ""; myDOM = fragment; document.getElementById("example").appendChild(fragment); }
</script>
</head>
<body onload="javascript:Init();"> </body>
</html>

Donc, il y a un truc qui ne fonctionne pas. La transformation XSLT ne s'effectue pas.
À mon avis, il y a un soucis avec le javascript, mais je ne saurais dire où.
Les explications de la page d'exemple n'est pas claire du tout.

Mon fichier model.xml avec l'élément racine <myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de" id="example">:

Code:

1
2
3
4
5
6
7
8
9
10
11
<?xml version="1.0"?>
<myNS:Article xmlns:myNS="http://devedge.netscape.com/2002/de" id="example">
  <myNS:Title>My Article</myNS:Title>
  <myNS:Authors>
    <myNS:Author company="Foopy Corp.">Mr. Foo</myNS:Author>
    <myNS:Author>Mr. Bar</myNS:Author>
  </myNS:Authors>
  <myNS:Body>
    The <b>rain</b> in <u>Spain</u> stays mainly in the plains.
  </myNS:Body>
</myNS:Article>

La feuille de style XSLT model.xsl :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<?xml version="1.0"?>
 
<xsl:stylesheet version="1.0"
                   xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
                   xmlns:myNS="http://devedge.netscape.com/2002/de">
 
  <xsl:output method="html" />
 
  <xsl:template match="/">
    <html>
      <head>
        <title>
          <xsl:value-of select="/myNS:Article/myNS:Title"/>
        </title>
 
        <style type="text/css">
          .myBox {margin:10px 155px 0 50px; border: 1px dotted #639ACE; padding:0 5px 0 5px;}
        </style>
      </head>
 
      <body>
        <p class="myBox">
          <span class="title">
            <xsl:value-of select="/myNS:Article/myNS:Title"/>
          </span> <br />
          Authors:   <br />
            <xsl:apply-templates select="/myNS:Article/myNS:Authors/myNS:Author"/>
          </p>
        <p class="myBox">
          <xsl:apply-templates select="//myNS:Body"/>
        </p>
      </body>
    </html>
  </xsl:template>
 
  <xsl:template match="myNS:Author">
     --   <xsl:value-of select="." />
 
    <xsl:if test="@company">
     ::   <b>  <xsl:value-of select="@company" />  </b>
    </xsl:if>
 
    <br />
  </xsl:template>
 
  <xsl:template match="myNS:Body">
    <xsl:copy>
      <xsl:apply-templates select="@*|node()"/>
    </xsl:copy>
  </xsl:template>
 
  <xsl:template match="@*|node()">
      <xsl:copy>
        <xsl:apply-templates select="@*|node()"/>
      </xsl:copy>
  </xsl:template>
</xsl:stylesheet>

Le fichier HTML qui contient le javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<?xml version="1.0" encoding="UTF-8"?>
 
<html>
<head>
<title>Insert title here</title>
  <script>
var xslStylesheet;
var xsltProcessor = new XSLTProcessor();
var myDOM;
 
var xmlDoc;
 
function Init(){
 
  // load the xslt file, example1.xsl
  var myXMLHTTPRequest = new XMLHttpRequest();
  myXMLHTTPRequest.open("GET", "model.xsl", false);
  myXMLHTTPRequest.send(null);
 
  xslStylesheet = myXMLHTTPRequest.responseXML;
  xsltProcessor.importStylesheet(xslStylesheet);
 
 
  // load the xml file, example1.xml
  myXMLHTTPRequest = new XMLHttpRequest();
  myXMLHTTPRequest.open("GET", "model.xml", false);
  myXMLHTTPRequest.send(null);
 
  xmlDoc = myXMLHTTPRequest.responseXML;
 
  var fragment = xsltProcessor.transformToFragment(xmlDoc, document);
 
  document.getElementById("example").innerHTML = "";
 
  myDOM = fragment;
  document.getElementById("example").appendChild(fragment);
}
  </script>
</head>
<body onload="javascript:Init();">
 
</body>
</html>

Merci de votre aide.

16/04/2016, 07h34
alain.couthures
La page HTML chercher à placer le résultat de la transformation dans un élément avec un id valant "example". Il faut donc le rajouter pour que cela fonctionne :
Code:

1 2 3 <body onload="javascript:Init();"> <div id="example"></div> </body>
Tout ça n'est pas très propre... parce que le résultat a lui-même l'élément html comme racine !

Ce code Javascript ne fonctionnera pas avec les anciennes versions d'Internet Explorer...

Bonjour Alain,

certes, le code n'est pas très propre, mais je n'ai pas de bonnes habitudes avec Javascript, ça viendra :)

Sinon, l'extrait de code que tu m'a suggéré … ne semble pas fonctionner :

Code:

1
2
3
<body onload="javascript:Init();">
 <div id="example"></div>
</body>

puisque j'obtiens un résultat similaire au précédant :

Code:

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<title>Insert title here</title>
<script>
var xslStylesheet; var xsltProcessor = new XSLTProcessor(); var myDOM; var xmlDoc; function Init(){ // load the xslt file, example1.xsl var myXMLHTTPRequest = new XMLHttpRequest(); myXMLHTTPRequest.open("GET", "model.xsl", false); myXMLHTTPRequest.send(null); xslStylesheet = myXMLHTTPRequest.responseXML; xsltProcessor.importStylesheet(xslStylesheet); // load the xml file, example1.xml myXMLHTTPRequest = new XMLHttpRequest(); myXMLHTTPRequest.open("GET", "model.xml", false); myXMLHTTPRequest.send(null); xmlDoc = myXMLHTTPRequest.responseXML; var fragment = xsltProcessor.transformToFragment(xmlDoc, document); document.getElementById("example").innerHTML = ""; myDOM = fragment; document.getElementById("example").appendChild(fragment); }
</script>
</head>
<body onload="javascript:Init();">
<div id="example"/>
</body>
</html>

Pour rappel, le code source de l'exemple se trouve sur la page Basic Example (le code source y est affiché plus clairement)

Comme dit plus haut très justement, il devrait marcher dans le sens que le rendrement apparemment s'est fait comme l'auteur voulu faire, au moins pour firefox ou chrome des versions plus ou moins à jour et avec une balise div d'id example ajoutée. Mais, il faut prendre conscience au faits que XSLTProcessor n'est pas tout à fait w3c conformant et il peut y avoir de nombreux comportements inattendus, d'après w3c recommendation, sans faire voir le résultat sorti.

Citation:

... il y a un truc qui ne fonctionne pas. La transformation XSLT ne s'effectue pas.

Si vous voulez tout à fait disperser le doute, vous pouvez ajouter quelques lignes pour debugger.
Code:

1 2 3 4 5 6 //etc etc var fragment = xsltProcessor.transformToFragment(xmlDoc, document); //ligne 31 var tdoc=xsltProcessor.transformToDocument(xmlDoc); var xmlSerializer=new XMLSerializer(); console.log(xmlSerializer.serializeToString(tdoc)); //etc etc
Puis, vous faites inspecter le debugger console... (ou plus intrusif, alert() au lieu de console.log()).