CODEWITHSUNDEEP
javascripthtmlxmlxslthyperlink
user2897821
user2897821

Reputation: 77

Display links from xml data

How can I display a clickable a href link on my html page from data exported from a xml page? below is the code I'm using. All the data exports fine, just the links cannot be clicked. so basically if a user clicks the item1.html link in the exported table he gets directed to item1.html page

<?xml version="1.0" encoding="utf-8"?>
<body onload="transformxml()">
<div id="result_output"></div>
<textarea id="xmlcode" style="display:none">
<catalog>
  <cd>
    <title>Item1</title>
    <start>09:15</start>
    <stop>10:00</stop>
    <link><a href="item1.hml">Item 1</a></link>
  </cd>
  <cd>
    <title>Item2</title>
    <start>10:15</start>
    <stop>11:00</stop>
    <link><a href="item2.hml">Item 2</a></link>
 </cd>
   <cd>
      <title>Item3</title>
      <start>12:15</start>
      <stop>13:00</stop>
      <link><a href="item3.hml">Item 3</a></link>
   </cd>
  <cd>
   <title>Item4</title>
   <start>14:15</start>
   <stop>15:00</stop>
   <link><a href="item4.hml">Item 4</a></link>
 </cd>
  <cd>
   <title>Item5</title>
   <start>15:15</start>
   <stop>16:00</stop>
   <link><a href="item5.hml">Item 5</a></link>
  </cd>
<catalog>
</textarea>

xsl

<textarea id="xsltcode" style="display:none">
<?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>
 <h2>timetable</h2>
  <table border="1">
  <tr>
    <th style="text-align:left">Start</th>
    <th style="text-align:left">Stop</th>
    <th style="text-align:left">Title</th>
    <th style="text-align:left">Link</th>
  </tr>
  <xsl:for-each select="catalog/cd">
  <xsl:sort select="start"/>
  <tr>
    <td><xsl:value-of select="start"/></td>
    <td><xsl:value-of select="stop"/></td>
    <td><xsl:value-of select="title"/></td>
    <td><xsl:value-of select="link"/></td>
  </tr>
  </xsl:for-each>
  </table>
 </body>
 </html>
</xsl:template>
 </xsl:stylesheet>
</textarea>

script

<script>
function transformxml()
  {
  if (window.ActiveXObject)
   {
   // IE

  // XML:
  var xmltxt
  xmltxt=document.getElementById("xmlcode").value
   if (xmltxt=="")
    {
    alert("The XML is empty")
    return false;
    }
  xml=new ActiveXObject("MSXML2.DOMDocument");
  xml.async=false
  xml.loadXML(xmltxt)
  if (xml.parseError.errorCode!=0)
    {
     document.write("Error in XML<br><br>Line " + xml.parseError.line + ": " +      xml.parseError.reason);         
      alert("Error in XML\n\nLine " + xml.parseError.line + ": " + xml.parseError.reason);
      return false
    }
  // XSL:
  var xsltxt
  xsltxt=document.getElementById("xsltcode").value
  if (xsltxt=="")
    {
    alert("The XSLT is empty")
    return false
    }
  xsl=new ActiveXObject("Microsoft.XMLDOM")
  xsl.async=false
  xsl.loadXML(xsltxt)
  if (xsl.parseError.errorCode!=0)
    {
      document.write("Error in XSLT<br><br>Line " + xsl.parseError.line + ": " +   xsl.parseError.reason);                  
      alert("Error in XSLT\n\nLine " + xsl.parseError.line + ": " + xsl.parseError.reason);
      return false
      }

  // Transform:
  document.write(xml.transformNode(xsl));                   
 }
else if (document.implementation && document.implementation.createDocument)
{
// Mozilla
// XML:
var xmltxt
xmltxt=document.getElementById("xmlcode").value
if (xmltxt=="")
    {
    alert("The XML is empty")
    return false
    }
var doc=new DOMParser();
var xml=doc.parseFromString(xmltxt,"text/xml");
if (xml.documentElement.nodeName=="parsererror")
    {
    document.write("Error in XML<br><br>" + xml.documentElement.childNodes[0].nodeValue);
    alert("Error in XML\n\n" + xml.documentElement.childNodes[0].nodeValue);
    return false;
    }
// XSL:
var xsltPrs=new XSLTProcessor();
var xsltxt
xsltxt=document.getElementById("xsltcode").value
if (xsltxt=="")
    {
    alert("The XSLT is empty")
    return false
    }
xsl=doc.parseFromString(xsltxt,"text/xml");
if (xsl.documentElement.nodeName=="parsererror")
    {
    document.write("Error in XSLT<br><br>" + xsl.documentElement.childNodes[0].nodeValue);      
    alert("Error in XSLT\n\n" + xsl.documentElement.childNodes[0].nodeValue);
    return false;
    }

xsltPrs.importStylesheet(xsl);

// Transform:
var result=xsltPrs.transformToFragment(xml,document);
document.getElementById("result_output").appendChild(result);
 // document.replaceChild(result,window.document.childNodes[0])
  }
   else
  {
// No Browser support:
alert("Your browser does not support this example.");
    }
   } 
  </script>

Thanks

EDIT

Marcus Rickert - "You need to replace

  <xsl:value-of select="link"/>

by

  <xsl:copy-of select="link/*"/>

since the former will only copy a text representation of the selected sub tree to your target document. All tags will be lost. The latter will make a copy of your link tag. I've added a /* to make sure that the tags themselves will not show up in the HTML. Most likely, they will be ignored but they are not required either."

Upvotes: 0

Views: 1251

Answers (1)

Marcus Rickert
Marcus Rickert

Reputation: 4238

You need to replace

<xsl:value-of select="link"/>

by

<xsl:copy-of select="link/*"/>

since the former will only copy a text representation of the selected sub tree to your target document. All tags will be lost. The latter will make a copy of your link tag.

Upvotes: 1

Related Questions