CODEWITHSUNDEEP
javascriptcssxmlxslt
Alan
Alan

Reputation: 339

Loading/Transforming XML with XSLT and CSS

Total newbie. Thanks in advance. Here goes:

I'm trying to transform an XML document using an XSL stylesheet, and the XSL stylesheet links to a CSS file. When I open the XML file from my computer in a browser (Chrome), the data is displayed properly following the XSL and CSS files. I also have javascript math functions inside the XSL stylesheet to take an element from the XML file and multiply it by different percentages. This math also works.

But when I try to use Javascript (below) to load/transform the XML document within HTML, the XSL styling comes through but the CSS is off. In Chrome, the page layout from the CSS shows. But the font size is too small and the background image doesn't appear. No matter what I change in the CSS the font is barely readable its so small. In IE, the CSS doesn't show up at all.

Also, the Javascript seems to be hiding the xml data, which I'd guess is bad for SEO.

Anyone have any tips/different approaches? I can't use ASP because my webserver won't allow it, but anything else.

Here's the script from my html document:

<html>
<head>
  <script>
  function loadXMLDoc(dname) {
    if (window.XMLHttpRequest) {
      xhttp = new XMLHttpRequest();
    } else {
      xhttp = new ActiveXObject("Microsoft.XMLHTTP");  
    } 
    xhttp.open("GET",dname,false);
    xhttp.send("");
    return xhttp.responseXML;
  }

  function displayResult() {
    xml = loadXMLDoc("WORKS.xml");
    xsl = loadXMLDoc("WORKS.xsl");

    // code for IE
    if (window.ActiveXObject) {
      ex = xml.transformNode(xsl);  
      document.getElementById("example").innerHTML = ex;
    }

    // code for Mozilla, Firefox, Opera,etc.
    else if (document.implementation && 
             document.implementation.createDocument) {
      xsltProcessor=new XSLTProcessor();
      xsltProcessor.importStylesheet(xsl);  
      resultDocument = xsltProcessor.transformToFragment(xml,document);
      document.getElementById("example").appendChild(resultDocument);
    }
  }
  </script>
</head>
<body onload="displayResult()">
  <div id="example" />
</body>
</html>

Merci buckets.

Alan

Upvotes: 1

Views: 4149

Answers (1)

MandoMando
MandoMando

Reputation: 5515

This really depends on the contents of works.xml and works.xsl. Suggestion: to spit out the resultDocument into a textarea and see if the html looks ok. At that point you could also save=>load the html resultDocument in Chrome/IE and make sure it looks good.

Once you know what in the html is causing trouble, then it's easier to find the cause and fix it.

You can see the output html by adding:

<textarea cols="255" rows="50" id="textarea1"></textarea>

Below your example div tag.
and:

document.getElementById("textarea1").value = document.getElementById("example").innerHTML;

at the end of displayResult(). to see the output.

Notice that your xslt is a fragment and not a whole html document, it should not contain html/head/body tags, and look more or less like the following:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:template match="/">

    <!--<html>

      <head>-->

        <link rel="stylesheet" href="galleryCSS.css" type="text/css" />

      <!--</head>


      <body>-->

        <h2>Choosy Child Guaranteed BuyBack System</h2>

        <ul class="gallery">

          <xsl:for-each select="WORKS/item">
            <li>

              <a href="picture1.jpg">
                <img src="picture1.jpg" alt="image" />
              </a>
              <em>
                <xsl:value-of select="name"/>
              </em>
              <br />
              Buy Price: <em>
                $<xsl:value-of select="price"/>
              </em>
              <br />
              1-4 Day BuyBack: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.15;             document.write(Math.round(x*100)/100);
                </script>
              </em>
              <br />
              5-7 Day BuyBack: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.25;             document.write(Math.round(x*100)/100);
                </script>
              </em>
              <br />
              8-14 Day BuyBack: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.40;             document.write(Math.round(x*100)/100);
                </script>
              </em>
              <br />
              15-30 Day BuyBack: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.60;             document.write(Math.round(x*100)/100);
                </script>
              </em>
              <br />
              30+ Day Buyback: <em>
                $<script type="text/javascript">
                  x=<xsl:value-of select="price"/>*.75;             document.write(Math.round(x*100)/100);
                </script>
              </em>

            </li>

          </xsl:for-each>

        </ul>


<!--
      </body>
    </html>-->

  </xsl:template>

</xsl:stylesheet>

There are other ways to shorten and streamline the code and not repeat the script tag, but that's outside of the scope of this question.

Upvotes: 1

Related Questions