XSLT document function doesn't work in chrome

In general the whole approach is about nested templates.
This is already answered here: How to traverse a nested XML structure using templates

Below are still some issues and clarifications about the comments below the question.

Having adjusted the local server that it delivers the file util.xslt as Content-Type text/css like expected by chrome instead of application/xslt+xml, the scripts still never work like expected. Therefore there must be still another issue related to chrome.

The interesting point is that there are two xslt-documents while one is transferred and accepted by chrome with application/xslt+xml but the other one only as text/xml or text/xsl (yes, both are accepted by chrome, I tried).

Therefore an interesting post about versions of xml / xslt might not be useful concerning this problem.

Below are the console-messages in detail:

The adjustment of the server has been done with the following lines, that changes the Content-Type (mime-type) if the requested filename has the suffix xslt and the expected mime-type is text/css:

<If "%{REQUEST_FILENAME} =~ m#\.xslt$# && %{HTTP:Accept} =~ m#^text\/css#">    Header set "Content-Type" "text/css"</If>

FireFox

It might be noteworthy that firefox is hiding util.xslt in the network-panel completely:

Furthermore Firefox accepts both methods, ActiveXObject and XSLTProcessor. Depending on the logic in JavaScript the default is set to ActiveXObject, that version looks also smoother concerning the animation of the dropdown.

Firefox is complaining when the xml-version is set to 1.1, therefore playing with version numbers might not really help to increase browser-compatibility.

This is known issue and opened since 2009. Also Chrome team don't have any plan to fix it even, they are in planning to remove it's support from chrome (Not sure when). But there is one workaround for this issue. transform your xml data into xslt and then you can import that in to stylesheet.

so you javaScript code will remain same.

foo/b.xml will become foo/b.xslt

 <?xml version="1.0" encoding="UTF-8"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">    <xsl:template name="dropdowns">    <xsl:param name="listname"/>    <xsl:param name="value"/>    <xsl:choose>        <xsl:when test="$listname='xyz'">            <xsl:call-template name="option">                <xsl:with-param name="value">I</xsl:with-param>                <xsl:with-param name="label">Info</xsl:with-param>                <xsl:with-param name="selectedValue" select="$value"/>            </xsl:call-template>            <xsl:call-template name="option">                <xsl:with-param name="value">C</xsl:with-param>                <xsl:with-param name="label">Category</xsl:with-param>                <xsl:with-param name="selectedValue" select="$value"/>            </xsl:call-template>        </xsl:when>    </xsl:choose> </xsl:template> <xsl:template name="option">    <xsl:param name="label"/>    <xsl:param name="value"/>    <xsl:param name="selectedValue"/>    <option value="{$value}">        <xsl:if test="$value = $selectedValue">            <xsl:attribute name="selected">selected</xsl:attribute>        </xsl:if>        <xsl:value-of select="$label"/>    </option></xsl:template></xsl:stylesheet>

util.xslt:

<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"><xsl:import href="foo/b.xslt" /><xsl:output method="html" /><xsl:template name="dropdown">    <xsl:param name="listname"/>    <xsl:param name="value"/>    <select>        <xsl:call-template name="dropdowns">            <xsl:with-param name="listname" select="$listname"/>            <xsl:with-param name="value" select="$value"/>        </xsl:call-template>    </select></xsl:template></xsl:stylesheet>

render.xslt:

<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"><xsl:import href="util.xslt" /><xsl:output method="html"></xsl:output><xsl:template match="/">    <h1>        <xsl:value-of select="/catalog/@name"></xsl:value-of>    </h1>    <xsl:call-template name="dropdown">        <xsl:with-param name="listname">xyz</xsl:with-param>        <xsl:with-param name="value">C</xsl:with-param>    </xsl:call-template></xsl:template></xsl:stylesheet>

With these changes you can create drop-downs in you page which will work in both IE and chrome.

I have found a workaround^[1] for this problem.

In chrome, <xsl:import> works correctly when transforming in Javascript. So, I converted my XML into XSL <xsl:choose> with <xsl:when> for each dropdown tag.

Update util.xslt:

<?xml version="1.0" encoding="UTF-8"?><xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">    <xsl:output method="html"></xsl:output>    <xsl:template name="dropdown">        <xsl:param name="listname"/>        <xsl:param name="value"/>        <select>            <xsl:choose>                <xsl:when name="$listname='xyz'">                    <option value="I">Info</option>                    <option value="C">Category</option>                </xsl:when>            </xsl:choose>        </select>    </xsl:template></xsl:stylesheet>

^{1. I agree that this is not a very good workaround and certainly not a generalized one. If someone has a better solution, please post it as an answer.}