ansaurus

Question

Loading/Transforming XML with XSLT and CSS

Answer 1

+1 A:

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"&gt;

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

MandoMando 2009-11-23 02:42:52

Thanks for your answer. Could you point me in the right direction on proper placement of the resultDocument instruction? All the resultDocument examples I could find didn't look like my .xsl document, which is already formatted to spit out HTML: http://www.choosychildclothing.com/gallery/WORKS.xslThe XML it transforms is just a sample: http://www.choosychildclothing.com/gallery/WORKS.xmlMuch gratitude.

Alan 2009-11-23 07:54:46

You're resultDocument placement looks correct. Looking at your xsl file, I noticed that you have <HTML>and<HEAD> tags. You are however, inserting the resultDocument as a NODE inside an already existing HTML document. Try removing the html, head and body tags and try. It should fix it.

MandoMando 2009-11-23 15:24:50

Answer 2

A:

Got it to work. Your advice, Mando, about removing the html, head and body tags was right on. With those gone the CSS worked fine. Thank you!

I still couldn't get the javascript math functions to work within the tags, so I switched to XSLT math functions to multiply prices by a fixed percentage and round to two decimal places. That worked.

Alan 2009-12-03 16:55:56

ansaurus

tags:

views:

answers:

Loading/Transforming XML with XSLT and CSS

related questions