Anwenden von Javascript auf XSL

Ich habe festgestellt, wenn ich versuche, auf eine XSL-Datei über Java-Skript angewendet anzuwenden, betrifft es nur den obersten Knoten von der XSL erstellt.Anwenden von Javascript auf XSL

Beispiel: Ich möchte alle Kommentare mehrerer Blogeinträge ausblenden. Ergebnis nur der Top-Blog-Eintrag wird die Kommentare ausblenden.

Ich möchte den Text eines Hyperlinks ändern. Der Hyperlink-Text wird nur im obersten Knoten geändert.

Wie kann ich das Java-Skript erhalten, um alle Knoten zu beeinflussen, die von der XSL-Datei erstellt werden?

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="style.css" > 
     <title>My Blog</title> 

     <script> 

     function loadXMLDoc(fname) 
     { 

       var xmlDoc; 

       // code for IE 
       if (window.ActiveXObject) 
       { 
        xmlDoc = new ActiveXObject("MSXML2.FreeThreadedDOMDocument"); 
       } 
       // code for Mozilla, Firefox, Opera, etc. 
       else if (document.implementation.createDocument) 
       { 
        xmlDoc = document.implementation.createDocument("", "", null); 
       } 
       else 
       { 
        alert('Your browser cannot handle this script'); 
       } 
       xmlDoc.async=false; 
       xmlDoc.load(fname); 
       return(xmlDoc); 
      } 

      function loadEntries() 
      { 
       xmlDoc = loadXMLDoc("blogData.xml"); 
       xslDoc = loadXMLDoc("blogData.xsl"); 

       // for Firefox, Safari, etc. 
       if (document.implementation.createDocument) 
       { 
        var xsltProcessor = new XSLTProcessor(); 
        xsltProcessor.importStylesheet(xslDoc); 
        xsltProcessor.setParameter(null, "id", 11); 
        var resultDocument = xsltProcessor.transformToFragment(xmlDoc,document); 
        document.getElementById("entries").appendChild(resultDocument); 

       } 
       // Internet Explorer 
       else if (window.ActiveXObject) 
       { 
        var xslTemplate=new ActiveXObject("MSXML2.XSLTemplate"); 
        xslTemplate.stylesheet=xslDoc; 
        var xslProc = xslTemplate.createProcessor(); 
        xslProc.input = xmlDoc; 
        xslProc.addParameter("id", 11); 
        xslProc.transform(); 
        document.getElementById("entries").innerHTML = xslProc.output;     
       } 

      } 

      function displayResult() 
      { 
       var xml=loadXMLDoc("blogData.xml"); 
       var xsl=loadXMLDoc("blogData.xsl"); 
       // code for IE 
       if (window.ActiveXObject) 
       { 
        var ex = xml.transformNode(xsl); 
        document.getElementById("entries").innerHTML = ex; 
        document.getElementById("comments").style.display = 'none'; 
        document.getElementById("hideShowLink").innerHTML = 'Show Comments'; 
       } 
       // code for Mozilla, Firefox, Opera, etc. 
       else if (document.implementation.createDocument) 
       { 
        var xsltProcessor = new XSLTProcessor(); 
        xsltProcessor.importStylesheet(xsl); 
        var resultDocument = xsltProcessor.transformToFragment(xml,document); 
        document.getElementById("entries").appendChild(resultDocument); 
        document.getElementById("comments").style.display = 'none'; 
        document.getElementById("hideShowLink").innerHTML = 'Show Comments'; 
       } 
      } 

      function hideShow(){ 
       if(document.getElementById("comments").style.display == 'none'){ 
        document.getElementById("comments").style.display = 'block'; 
        document.getElementById("hideShowLink").innerHTML = 'Hide Comments'; 
       } else { 
        document.getElementById("comments").style.display = 'none'; 
        document.getElementById("hideShowLink").innerHTML = 'Show Comments'; 
       } 
      } 

     </script> 

    </head> 

    <body onLoad="displayResult()"> 
     <table width="100%" border="0"> 
      <tr> 
       <td colspan="2"> 
        <div class="imgcentered"> 
         <img src="banner.gif" alt="banner" /> 
        </div> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <div id="entries"> 
        </div> 
       </td> 
       <td class="rightside"> 
        <div class="rightbody"> 
        <ul> 
         <li><a href="index.html">Home</a></li> 
         <li>Archives</li> 
         <li>Profile 
         <br/> 
         <img src="pokemon.gif" alt="pokemin" width="40%"/><br/> 
         <br/> 

         <dl> 
          <dt><b>Name:</b></dt> 
           <dd>Ash Catchem</dd> 
          <dt><b>Age:</b></dt> 
           <dd>Old Enough</dd> 
          <dt><b>Birth Place:</b></dt> 
           <dd>Pallet Town</dd> 
          <dt><b>Current Residence:</b></dt> 
           <dd>Kanto</dd> 
          <dt><b>Occupation:</b></dt> 
           <dd>Pokemon Catcher</dd> 
         </dl> 
         </li> 
        </ul> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

XSL-Code:

<?xml version="1.0" encoding="ISO-8859-1"?> 
<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
    <xsl:template match="/"> 
     <html> 

      <body> 
       <div class="leftbody"> 
        <!-- Loops Through all of the entries node in the XML and displays then in order by date descending order --> 
        <xsl:for-each select="//entries"> 
         <xsl:sort select="creationTime/@sort" order="descending" /> 
         <p><xsl:value-of select="creationTime"/>[<a href="javascript:hideShow()"> <xsl:value-of select="count(comments)"/> Comments</a>]</p> 
         <h1><xsl:value-of select="title"/></h1> 
         <p><xsl:value-of select="description"/></p> 
         <br/> 
         <p><a href="javascript:hideShow()" id="hideShowLink" class="comments"></a></p> 
         <br/><hr/><br/> 

         <div id="comments" class="comments"> 
         <h2>Comments:</h2> 
          <xsl:for-each select="//comments"> 
           <p class="comments"><h3><xsl:value-of select="title"/></h3></p> 
           <p class="comments"><xsl:value-of select="description"/></p> 
           <p class="comments">-- <xsl:value-of select="creator"/></p> 
          </xsl:for-each> 
          <hr/> 
         </div> 

        </xsl:for-each> 



       </div> 

      </body> 
     </html> 
    </xsl:template> 
</xsl:stylesheet>

Web-Seite Ich spiele mit: http://dl.dropbox.com/u/12914798/Project%202/index.html

Die Änderungen sind perfekt im ersten Blog-Eintrag. Ein Link wird erstellt, um die Kommentare ein- und auszublenden. Aber nirgendwo funktioniert es.

Quelle

2012-04-11 meriley

Ich kann einen kurzen Blick darauf werfen, wenn Sie ein Beispiel blogData.xml hinzufügen – Maestro13

Versuchen Sie, eindeutige IDs für A- und DIV-Tags mithilfe der Funktion generate-id() zu verwenden.

Einige Änderungen in XSLT:

   <xsl:for-each select="//entries"> 
        <xsl:sort select="creationTime/@sort" order="descending" /> 

        <!-- define variables --> 
        <xsl:variable name="unique-id"> 
         <xsl:choose> 
          <xsl:when test="position() = 1"> 
           <xsl:value-of select="''"/> 
          </xsl:when> 
          <xsl:otherwise> 
           <xsl:value-of select="generate-id(.)"/> 
          </xsl:otherwise> 
         </xsl:choose> 
        </xsl:variable> 
        <xsl:variable name="comments-id" select="concat('comments',$unique-id)"/> 
        <xsl:variable name="hideShowLink-id" select="concat('hideShowLink',$unique-id)"/> 
        <xsl:variable name="a-href" select="concat('javascript:hideShow(&#34;',$unique-id,'&#34;)')"/> 

        <!-- title and description --> 
        <p><xsl:value-of select="creationTime"/>[<xsl:element name="a"><xsl:attribute name="href"><xsl:value-of select="$a-href"/></xsl:attribute> <xsl:value-of select="count(comments)"/> Comments</xsl:element>]</p> 
        <h1><xsl:value-of select="title"/></h1> 
        <p><xsl:value-of select="description"/></p> 
        <br/> 
        <p> 
         <xsl:element name="a"> 
          <xsl:attribute name="id"><xsl:value-of select="$hideShowLink-id"/></xsl:attribute> 
          <xsl:attribute name="href"><xsl:value-of select="$a-href"/></xsl:attribute> 
          <xsl:attribute name="class"><xsl:value-of select="'comments'"/></xsl:attribute> 
          Show Comments 
         </xsl:element> 
        </p> 
        <br/><hr/><br/> 

        <!-- comments --> 
        <xsl:element name="div"> 
         <xsl:attribute name="id"><xsl:value-of select="$comments-id"/></xsl:attribute> 
         <xsl:attribute name="class"><xsl:value-of select="'comments'"/></xsl:attribute> 
         <xsl:attribute name="style"><xsl:value-of select="'display:none'"/></xsl:attribute> 
         <h2>Comments:</h2> 
         <xsl:for-each select="//comments"> 
          <p class="comments"><h3><xsl:value-of select="title"/></h3></p> 
          <p class="comments"><xsl:value-of select="description"/></p> 
          <p class="comments">-- <xsl:value-of select="creator"/></p> 
         </xsl:for-each> 
         <hr/> 
        </xsl:element> 

       </xsl:for-each>

Darüber hinaus müssen Sie JS-Funktionen ändern:

 function displayResult() 
     { 
      var xml=loadXMLDoc("p100993_IR1.2_output_without_header_1.csv.xml"); 
      var xsl=loadXMLDoc("LoadVendorAnalytic.xsl"); 
      // code for IE 
      if (window.ActiveXObject) 
      { 
       var ex = xml.transformNode(xsl); 
       document.getElementById("entries").innerHTML = ex; 
      } 
      // code for Mozilla, Firefox, Opera, etc. 
      else if (document.implementation.createDocument) 
      { 
       var xsltProcessor = new XSLTProcessor(); 
       xsltProcessor.importStylesheet(xsl); 
       var resultDocument = xsltProcessor.transformToFragment(xml,document); 
       document.getElementById("entries").appendChild(resultDocument); 
      } 
     } 

     function hideShow(id){ 
      if(document.getElementById("comments"+id).style.display == 'none'){ 
       document.getElementById("comments"+id).style.display = 'block'; 
       document.getElementById("hideShowLink"+id).innerHTML = 'Hide Comments'; 
      } else { 
       document.getElementById("comments"+id).style.display = 'none'; 
       document.getElementById("hideShowLink"+id).innerHTML = 'Show Comments'; 
      } 
     }

Quelle

2012-04-11 10:03:46 Aniketos

Sie waren zuerst, definitiv - lustig, dass wir an genau der gleichen Antwort zur gleichen Zeit arbeiteten :-) Außer dass ich das @ benutzte Sortierattribut, das eindeutig zu sein scheint, und Sie haben generate (id) verwendet, was natürlich im Allgemeinen korrekter ist. – Maestro13

Es ist wirklich lustig! Ich erinnere mich gerne an XSLT. – Aniketos

Wow, ich wusste nicht die Elementaufrufe in XSLT konnte HTML mit Element und Attribut erstellen. Ich habe einen ganz neuen Trick für XSLT gelernt! Auch danke für den Code, es funktioniert Präfekt und es ist sehr klar zu verstehen. Definitiv eine Tonne davon gelernt :) – meriley

ich meine eigene Probe blogData.xml gemacht und ich fand das Problem: Sie haben wollen expand/collapse für jedes einzelne verarbeitete Element, aber das erfordert separate IDs und die Übergabe der ID an die Funktion hideShow. Versuchen Sie folgendes:

function hideShow(commentsId){ 
    if(document.getElementById(commentsId).style.display == 'none'){ 
     document.getElementById(commentsId).style.display = 'block'; 
     document.getElementById("hideShowLink_" + commentsId).innerHTML = 'Hide Comments'; 
    } else { 
     document.getElementById(commentsId).style.display = 'none'; 
     document.getElementById("hideShowLink_" + commentsId).innerHTML = 'Show Comments'; 
    } 
}

und

<?xml version="1.0" encoding="ISO-8859-1"?> 
<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> 
    <xsl:template match="/"> 
     <html> 

      <body> 
       <div class="leftbody"> 
        <!-- Loops Through all of the entries node in the XML and displays then in order by date descending order --> 
        <xsl:for-each select="//entries"> 
         <xsl:sort select="creationTime/@sort" order="descending" /> 
         <xsl:variable name="commentsId">comments_<xsl:value-of select="creationTime/@sort"/></xsl:variable> 

         <p><xsl:value-of select="creationTime"/> 
          [ 
          <xsl:element name="a"> 
           <xsl:attribute name="href">javascript:hideShow('<xsl:value-of select="$commentsId"/>')</xsl:attribute> 
           <xsl:value-of select="count(comments)"/> Comments 
          </xsl:element> 
          ] 
         </p> 
         <h1><xsl:value-of select="title"/></h1> 
         <p><xsl:value-of select="description"/></p> 
         <br/> 
         <p> 
          <xsl:element name="a"> 
           <xsl:attribute name="href">javascript:hideShow('<xsl:value-of select="$commentsId"/>')</xsl:attribute> 
           <xsl:attribute name="id">hideShowLink_<xsl:value-of select="$commentsId"/></xsl:attribute> 
           <xsl:attribute name="class">comments</xsl:attribute> 
          Hide Comments 
          </xsl:element> 
         </p> 
         <br/><hr/><br/> 

         <xsl:element name="div"> 
         <xsl:attribute name="id"><xsl:value-of select="$commentsId"/></xsl:attribute> 
         <xsl:attribute name="class">comments</xsl:attribute> 
         <h2>Comments:</h2> 
          <xsl:for-each select="comments"> 
           <p class="comments"><h3><xsl:value-of select="title"/></h3></p> 
           <p class="comments"><xsl:value-of select="description"/></p> 
           <p class="comments">-- <xsl:value-of select="creator"/></p> 
          </xsl:for-each> 
          <hr/> 
         </xsl:element> 

        </xsl:for-each> 



       </div> 

      </body> 
     </html> 
    </xsl:template> 
</xsl:stylesheet>

Bitte beachte, dass ich alle Elemente gab div und a eine eindeutige ID. Beachten Sie, dass ich "Verstecke Kommentare" als Startwert für die Schaltflächen hinzugefügt habe. Wenn Sie beim Laden noch Werte hinzufügen möchten, müssen Sie alle id = "hideShow_ *" - Elemente durchlaufen.

Quelle

2012-04-11 10:28:15 Maestro13

Anwenden von Javascript auf XSL

Antwort

Verwandte Themen