Paramètre XSLT via Javascript

**polymorphisme** · 14/04/2016, 12h39

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.

**thelvin** · 14/04/2016, 13h49

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.

**polymorphisme** · 15/04/2016, 22h51

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**alain.couthures** · 16/04/2016, 07h34

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**polymorphisme** · 16/04/2016, 11h23

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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)

**tsuji** · 17/04/2016, 12h48

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.

... 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 javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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()).

Paramètre XSLT via Javascript

XSL/XSLT/XPATH XML

Discussions similaires

Partager

Partager