XHTML embeding XML using XSL

Question

I want create fully functional (CSS,JS) web page with dynamic data content. I found working concept XHTML but I still have troubles to get fully functional XHTML. Here are my XHTML and XSL.

XHTML

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="xAlbumx.xsl" ?>
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">     
  <HEAD>
    <TITLE>xxxxxxxxxxxxxxxx</TITLE>
    <META http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <LINK rel="stylesheet" type="text/css" href="album.css" title="style"/>
    <SCRIPT type="text/javascript" src="album.js"></SCRIPT>
   </HEAD>
  <BODY>

<album xmlns="">
  <name>albumname</name>
    <image>
      <filename>album1.jpg</filename>
      <description>meeting</description>
    </image>
    <image>
      <filename>IMG_9048d.jpg</filename>
      <description>Mountains</description>
    </image>
</album>

  </BODY>
</HTML>

XSL

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">

<xsl:template match="node()|@*">
  <xsl:copy>
    <xsl:apply-templates select="node()|@*"/>
  </xsl:copy>
</xsl:template>

<xsl:template match="album">
    <H1><xsl:value-of select="name"/></H1>
    <TABLE width="100%">
      <TBODY>
        <xsl:apply-templates select="image" mode="transform"/>
      </TBODY>
    </TABLE>
</xsl:template>

<xsl:template match="image" mode="transform">
      <TR>
        <TD style="padding-right: 10px;" width="200">
          <IMG width="0" height="0">
            <xsl:attribute name="src"><xsl:value-of select="filename"/></xsl:attribute>
          </IMG>
        </TD>
        <TD valign="top">
          <DIV><xsl:value-of select="description"/></DIV>
          <HR/>
        </TD>
        <xsl:apply-templates select="node()" mode="transform"/> 
      </TR>
</xsl:template>
</xsl:stylesheet>

Output web page does not use formatting and javascript. It looks like transformation went wrong but there was not any error.
Unlike in question "XSLT not working in web browser" my trasformation works and linking between XHTML and XSL file is OK. My problem is kind of XHTML processing or rednering problem.
What I am doing wrong?

Did you use some online transformer https://www.freeformatter.com/xsl-transformer.html to see what is the actual output of your xslt? — Artemy Vysotsky, Oct 05 '17 at 11:30
Of course. But it does just XML transformation not XHTML. Transformation output look OK but browser don't get CSS and javascript linked in XHTML. — Eduard Nickel, Oct 05 '17 at 11:45
@EduardNickel, case of names matters in XML and XHTML so if you intend to use XHTML or create XHTML then make sure you use all lower-case names for the XHTML elements and attributes e.g. `html`, `body`, `table`, `tr` and so on, otherwise no browser processing your content as XML will recognize elements as the known and intended XHTML elements. — Martin Honnen, Oct 05 '17 at 12:18
@MartinHonnen Thank you for guidance. Now browser use CSS and formats page but Javascript doesn't work. — Eduard Nickel, Oct 05 '17 at 12:36
After inspect browser console I found TypeErrors in javascript. So JS works but things that works in HTML are not good for XHTML. :( — Eduard Nickel, Oct 05 '17 at 12:52
Well, first test whether your script works in a static XHTML document, if not, ask a question on Javascript, showing minimal but complete executable code snippets together with an explanation of what you want to achieve and in which way it does not work. If the problem is only with Javascript in the XSLT result, then also show minimal but complete samples to allow others to reproduce the problem together with an explanation of what goes wrong. — Martin Honnen, Oct 05 '17 at 12:52
And if you have script that works with HTML as text/html and want to use it with the result of an XSLT transformation, then you also have the choice of creating HTML output with XSLT, indeed with XSLT 1.0 in the browser HTML is often a better choice than XHTML. That might fix the script problem, unless it is caused by using `document.write`, which is not supported in Mozilla browsers at all in the result of an XSLT transformation, whether that creates HTML or XHTML. — Martin Honnen, Oct 05 '17 at 14:23
I found that problem is again case sensitive tags. All tags are lower-case according to XHTML but I get tags in javascript using upper-case constants. — Eduard Nickel, Oct 06 '17 at 07:35
Post a separate Javascript question with minimal but complete and executable code snippets to demonstrate the issue you have. — Martin Honnen, Oct 06 '17 at 10:14
Are you sure you're outputting XHTML? That is, are you using `` with the correct attributes? Your last comment sounds like the browsers thinks it's HTML after all. E.G. the JavaScript statement `alert(document.body.tagName)` will output "BODY" in a html environment, no matter how the tag is spelled in the source. — Mr Lister, Oct 07 '17 at 07:21
@MrLister According to W3C there are only "xml|html|text|name" output methods. — Eduard Nickel, Oct 10 '17 at 11:30

XHTML embeding XML using XSL

0 Answers0