none
In IE9, how to reference XML document from JS after XSL processing instruction runs RRS feed

  • Question

  • Hello,

    Below is a modified version of the example here: msdn.microsoft.com/en-us/library/ms757058(v=vs.85).aspx.
    It demonstrates functionality that is very similar to a legacy site I am currently supporting.

    The difference is that in my example, I am not using data islands. Instead I am using a Processing Instructions to transform the initial xml document and then I am attempting to use Javascript to transform the document again after the initial render.

    The problem is that in IE9 Standards mode there doesn't appear to be any access to the initial xml or xsl document from Javascript, after the content has been transformed to HTML.

    This example will however work in Compatibility View where I can still access document.XMLDocument and document.XSLDocument.

    Q1. In IE9 Standards Mode, is there any way to access the XML/XSL documents that produce a HTML page after it is rendered?

    Q2. Can anyone confirm that support for document.XMLDocument and document.XSLDocument went away with support for XML Data Islands in IE9?

    Thanks in advance

    book_catalog.xml

    <?xml version="1.0"?>
    <?xml-stylesheet href="book_catalog.xsl" type="text/xsl"?>
    <catalog>
       <book id="bk101">
          <title>XML Developer's Guide</title>
          <author>Gambardella, Matthew</author>
          <genre>Computer</genre>
          <price>44.95</price>
          <publish_date>2000-10-01</publish_date>      
          <description>An in-depth look at creating applications with XML.</description>
       </book>
       <book id="bk102">
          <title>Midnight Rain</title>
          <author>Ralls, Kim</author>
          <genre>Fantasy</genre>
          <price>5.95</price>
          <publish_date>2000-12-16</publish_date>
          <description>A former architect battles corporate zombies, an evil sorceress, and her own childhood to become queen of the world.</description>
       </book>
       <book id="bk103">
          <title>Maeve Ascendant</title>
          <author>Corets, Eva</author>
          <genre>Fantasy</genre>
          <price>5.95</price>
          <publish_date>2000-11-17</publish_date>
          <description>After the collapse of a nanotechnology society in England, the young survivors lay the foundation for a new society.</description>
       </book>
       <book id="bk104">
          <title>Oberon's Legacy</title>
          <author>Corets, Eva</author>
          <genre>Fantasy</genre>
          <price>5.95</price>
          <publish_date>2001-03-10</publish_date>
          <description>In post-apocalypse England, the mysterious agent known only as Oberon helps to create a new life for the inhabitants of London. Sequel to Maeve Ascendant.</description>
       </book>
       <book id="bk105">
          <title>The Sundered Grail</title>
          <author>Corets, Eva</author>
          <genre>Fantasy</genre>
          <price>5.95</price>
          <publish_date>2001-09-10</publish_date>
          <description>The two daughters of Maeve, half-sisters, battle one another for control of England. Sequel to Oberon's Legacy.</description>
       </book>
       <book id="bk106">
          <title>Lover Birds</title>
          <author>Randall, Cynthia</author>
          <genre>Romance</genre>
          <price>4.95</price>
          <publish_date>2000-09-02</publish_date>
          <description>When Carla meets Paul at an ornithology conference, tempers fly as feathers get ruffled.</description>
       </book>
       <book id="bk107">
          <title>Splish Splash</title>
          <author>Thurman, Paula</author>
          <genre>Romance</genre>
          <price>4.95</price>
          <publish_date>2000-11-02</publish_date>
          <description>A deep sea diver finds true love twenty thousand leagues beneath the sea.</description>
       </book>
       <book id="bk108">
          <title>Creepy Crawlies</title>
          <author>Knorr, Stefan</author>      
          <genre>Horror</genre>
          <price>4.95</price>
          <publish_date>2000-12-06</publish_date>
          <description>An anthology of horror stories about roaches, centipedes, scorpions  and other insects.</description>
       </book>
       <book id="bk109">
          <title>Paradox Lost</title>
          <author>Kress, Peter</author>
          <genre>Science Fiction</genre>
          <price>6.95</price>
          <publish_date>2000-11-02</publish_date>
          <description>After an inadvertant trip through a Heisenberg Uncertainty Device, James Salway discovers the problems of being quantum.</description>
       </book>
       <book id="bk110">
          <title>Microsoft .NET: The Programming Bible</title>
          <author>O'Brien, Tim</author>
          <genre>Computer</genre>
          <price>36.95</price>
          <publish_date>2000-12-09</publish_date>
          <description>Microsoft's .NET initiative is explored in detail in this deep programmer's reference.</description>
       </book>
       <book id="bk111">
          <title>MSXML3: A Comprehensive Guide</title>
          <author>O'Brien, Tim</author>
          <genre>Computer</genre>
          <price>36.95</price>
          <publish_date>2000-12-01</publish_date>
          <description>The Microsoft MSXML3 parser is covered in detail, with attention to XML DOM interfaces, XSLT processing, SAX and more.</description>
       </book>
       <book id="bk112">
          <title>Visual Studio 7: A Comprehensive Guide</title>
          <author>Galos, Mike</author>
          <genre>Computer</genre>
          <price>49.95</price>
          <publish_date>2001-04-16</publish_date>
          <description>Microsoft Visual Studio 7 is explored in depth, looking at how Visual Basic, Visual C++, C#, and ASP+ are integrated into a comprehensive development environment.</description>
       </book>   
    </catalog>
    book_catalog.xsl
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
            xmlns:msxsl="urn:schemas-microsoft-com:xslt"
            version="1.0">
    
    	<xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes" omit-xml-declaration="yes"/>
    
    	<xsl:param name="selected_genre" select="'all'"/>
    
    	<xsl:template match="/">
    <HTML>
    <HEAD>
       <TITLE>Transform Demo</TITLE>
       <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
       <STYLE>
        .catalog_genre_head {background-color:darkGreen;font-size:24pt;color:white;font-family:Impact;}
        .catalog_head {background-color:green;font-size:18pt;color:white;font-family:Impact;}
        .catalog_row0 {background-color:lightGreen;}
        .catalog_row1 {background-color:white;}
        .catalog_row_end {background-color:darkGreen;}
       </STYLE>
       <SCRIPT language="Javascript">
    var processorCache=null;
    
    function loadSource(sourceObj){
    	var xmlDoc=new ActiveXObject("Msxml2.FreeThreadedDOMDocument.6.0");
    	xmlDoc.async=false;
    	xmlDoc.loadXML(sourceObj.xml);
        return xmlDoc;
    }
    
    function getProcessor(transformObj){
        if (processorCache==null){
            var xslDoc=new ActiveXObject("Msxml2.FreeThreadedDOMDocument.6.0");
            var xslTemplate=new ActiveXObject("Msxml2.XSLTemplate.6.0");
            xslDoc.async=false;
            xslDoc.loadXML(transformObj.xml);
            xslTemplate.stylesheet = xslDoc;
            xslProcessor=xslTemplate.createProcessor();
            processorCache=xslProcessor;
        }
        else {
            xslProcessor=processorCache;
        }
        return xslProcessor;
    }
    
    function transformData(srcDoc,processor){
        processor.input=srcDoc;
        processor.transform();
        return processor.output;
    }
    
    function showGenre(genre){
        var srcDoc=loadSource(document.XMLDocument);
        var processor=getProcessor(document.XSLDocument);
        processor.addParameter("selected_genre",genre);
        var txt=transformData(srcDoc,processor);
        document.body.innerHTML = txt;
    }
       </SCRIPT>
    </HEAD>
    <BODY>
    	<H1>Scootney Press Book Catalog</H1>
    	<P>Select a genre to see all books in that genre:</P>
    		<div>
    			<form method="post" action="#">
    			Genre:
    			<select name="genre" value="{$selected_genre}" onchange="showGenre(this.value)">
    				<option value="all"><xsl:if test="$selected_genre='all'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>All</option>
    				<option value="Computer"><xsl:if test="$selected_genre='Computer'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Computer</option>
    				<option value="Fantasy"><xsl:if test="$selected_genre='Fantasy'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Fantasy</option>
    				<option value="Horror"><xsl:if test="$selected_genre='Horror'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Horror</option>
    				<option value="Romance"><xsl:if test="$selected_genre='Romance'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Romance</option>
    				<option value="Science Fiction"><xsl:if test="$selected_genre='Science Fiction'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Science Fiction</option>
    			</select>
    			</form>
    			<br/>
    			<xsl:apply-templates select="catalog"/>
    		</div>
    </BODY>
    </HTML>		
    	</xsl:template>
    
    	<xsl:template match="catalog">
    		<table class="catalog_table">
    			<xsl:apply-templates select="book[($selected_genre='all') or ($selected_genre=./genre)]">
    				<xsl:sort select="title"/>
    			</xsl:apply-templates>
    		</table>
    	</xsl:template>
    
    	<xsl:template match="book">
    		<xsl:if test="position()=1">
    		<tr class="catalog_genre_head"><td colspan="6">
    		<xsl:choose>
    		<xsl:when test="$selected_genre='all'">
    		All Genres
    		</xsl:when>
    		<xsl:otherwise>
    		Genre: <xsl:value-of select="genre"/>
    		</xsl:otherwise>
    		</xsl:choose>
    		</td></tr>            
    		<tr class="catalog_head">
    			<td>#</td>
    			<td>Title</td>
    			<td>Author</td>
    			<td>Publication Date</td>
    			<td>Description</td>
    			<xsl:if test="$selected_genre='all'">
    			<td>Genre</td>
    			</xsl:if>
    		</tr>
    		</xsl:if>
    		<tr class="catalog_row{position() mod 2}">
    			<td><xsl:value-of select="position()"/></td>
    			<td class="catalog_cell"><xsl:value-of select="title"/></td>
    			<td class="catalog_cell"><xsl:value-of select="author"/></td>
    			<td class="catalog_cell"><xsl:value-of select="publish_date"/></td>                    
    			<td class="catalog_cell"><xsl:value-of select="description"/></td>
    			<xsl:if test="$selected_genre='all'">
    			<td class="catalog_cell"><xsl:value-of select="genre"/></td>
    			</xsl:if>
    		</tr>
    		<xsl:if test="position()=last()">
    		<tr class="catalog_row_end"><td colspan="6"> </td></tr>
    		</xsl:if>
    	</xsl:template>
    </xsl:stylesheet>

    Monday, June 2, 2014 6:26 PM

Answers

  • Surprisingly easy to separate the files. Am a little sorry I didn't do this first. Anyway, if you check your network tab you will see that only one request for each file is ever made. The big difference is that url's for the files must be used in the script. All three (renamed to book.*) files are below.

    book.html

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Transform Demo</title>
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />-->
    <style type="text/css">
    .catalog_genre_head {background-color:darkGreen;font-size:24pt;color:white;font-family:Impact;}
    .catalog_head {background-color:green;font-size:18pt;color:white;font-family:Impact;}
    .catalog_row0 {background-color:lightGreen;}
    .catalog_row1 {background-color:white;}
    .catalog_row_end {background-color:darkGreen;}
    </style>
    <script type="text/javascript">
    var processorCache=null;
    var srcXML=null;
    var srcXSL=null;
    
    function loadSource(sourceObj){
     var xmlDoc=new ActiveXObject("Msxml2.DOMDocument.6.0");
     xmlDoc.async=false;
     xmlDoc.load(sourceObj);
     return xmlDoc;
    }
    
    function getProcessor(transformObj){
     var xslDoc, xslTemplate;
     if(processorCache===null){
      xslDoc=new ActiveXObject("Msxml2.FreeThreadedDOMDocument.6.0");
      xslTemplate=new ActiveXObject("Msxml2.XSLTemplate.6.0");
      xslDoc.async=false;
      xslDoc.loadXML(transformObj.xml);
      xslTemplate.stylesheet = xslDoc;
      processorCache=xslTemplate.createProcessor();
     }
     return processorCache;
    }
    
    function transformData(srcDoc,processor){
     processor.input=srcDoc;
     processor.transform();
     return processor.output;
    }
    
    function showGenre(genre){
     var txt, processor=getProcessor(srcXSL);
     processor.addParameter("selected_genre",genre);
     txt=transformData(srcXML,processor);
     document.getElementById("xslOut").innerHTML=txt;
    }
    
    document.onreadystatechange=function(){
     if(document.readyState==="complete"){
      srcXML=loadSource("book.xml");
      srcXSL=loadSource("book.xsl");
      showGenre("all");
     }
    };
    
    </script>
    </head>
    <body>
     <h1>Scootney Press Book Catalog</h1>
     <p>Select a genre to see all books in that genre:</p>
     <div id="xslOut">
     </div> 
    </body>
    </html>

    book.xsl

    <?xml version="1.0" encoding="utf-8"?>
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" version="1.0">
    <xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
    <xsl:param name="selected_genre" select="'all'"/>
    <xsl:template match="/" name="root">
    
     Genre:
     <select id="genre" value="{$selected_genre}" onchange="showGenre(this.value)" style="margin-bottom:20px">
      <option value="all"><xsl:if test="$selected_genre='all'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>All</option>
      <option value="Computer"><xsl:if test="$selected_genre='Computer'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Computer</option>
      <option value="Fantasy"><xsl:if test="$selected_genre='Fantasy'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Fantasy</option>
      <option value="Horror"><xsl:if test="$selected_genre='Horror'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Horror</option>
      <option value="Romance"><xsl:if test="$selected_genre='Romance'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Romance</option>
      <option value="Science Fiction"><xsl:if test="$selected_genre='Science Fiction'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Science Fiction</option>
     </select>
    
     <xsl:apply-templates select="catalog"/>
    
    </xsl:template>
     
    <xsl:template match="catalog">
     <table class="catalog_table">
      <xsl:apply-templates select="book[($selected_genre='all') or ($selected_genre=./genre)]">
       <xsl:sort select="title"/>
      </xsl:apply-templates>
     </table>
    </xsl:template>
    
    <xsl:template match="book">
     <xsl:if test="position()=1">
      <tr class="catalog_genre_head"><td colspan="6">
       <xsl:choose>
        <xsl:when test="$selected_genre='all'">
         All Genres
        </xsl:when>
        <xsl:otherwise>
         Genre: <xsl:value-of select="genre"/>
        </xsl:otherwise>
       </xsl:choose>
      </td></tr>            
      <tr class="catalog_head">
       <td>#</td>
       <td>Title</td>
       <td>Author</td>
       <td>Publication Date</td>
       <td>Description</td>
       <xsl:if test="$selected_genre='all'">
        <td>Genre</td>
       </xsl:if>
      </tr>
     </xsl:if>
     <tr class="catalog_row{position() mod 2}">
      <td><xsl:value-of select="position()"/></td>
      <td class="catalog_cell"><xsl:value-of select="title"/></td>
      <td class="catalog_cell"><xsl:value-of select="author"/></td>
      <td class="catalog_cell"><xsl:value-of select="publish_date"/></td>                    
      <td class="catalog_cell"><xsl:value-of select="description"/></td>
      <xsl:if test="$selected_genre='all'">
       <td class="catalog_cell"><xsl:value-of select="genre"/></td>
      </xsl:if>
     </tr>
     <xsl:if test="position()=last()">
      <tr class="catalog_row_end"><td colspan="6"> </td></tr>
     </xsl:if>
    </xsl:template>
    
    </xsl:stylesheet>
    

    book.xml

    <?xml version="1.0" encoding="utf-8"?>
    <catalog>
       <book id="bk101">
          <title>XML Developer's Guide</title>
          <author>Gambardella, Matthew</author>
          <genre>Computer</genre>
          <price>44.95</price>
          <publish_date>2000-10-01</publish_date>      
          <description>An in-depth look at creating applications with XML.</description>
       </book>
       <book id="bk102">
          <title>Midnight Rain</title>
          <author>Ralls, Kim</author>
          <genre>Fantasy</genre>
          <price>5.95</price>
          <publish_date>2000-12-16</publish_date>
          <description>A former architect battles corporate zombies, an evil sorceress, and her own childhood to become queen of the world.</description>
       </book>
       <book id="bk103">
          <title>Maeve Ascendant</title>
          <author>Corets, Eva</author>
          <genre>Fantasy</genre>
          <price>5.95</price>
          <publish_date>2000-11-17</publish_date>
          <description>After the collapse of a nanotechnology society in England, the young survivors lay the foundation for a new society.</description>
       </book>
       <book id="bk104">
          <title>Oberon's Legacy</title>
          <author>Corets, Eva</author>
          <genre>Fantasy</genre>
          <price>5.95</price>
          <publish_date>2001-03-10</publish_date>
          <description>In post-apocalypse England, the mysterious agent known only as Oberon helps to create a new life for the inhabitants of London. Sequel to Maeve Ascendant.</description>
       </book>
       <book id="bk105">
          <title>The Sundered Grail</title>
          <author>Corets, Eva</author>
          <genre>Fantasy</genre>
          <price>5.95</price>
          <publish_date>2001-09-10</publish_date>
          <description>The two daughters of Maeve, half-sisters, battle one another for control of England. Sequel to Oberon's Legacy.</description>
       </book>
       <book id="bk106">
          <title>Lover Birds</title>
          <author>Randall, Cynthia</author>
          <genre>Romance</genre>
          <price>4.95</price>
          <publish_date>2000-09-02</publish_date>
          <description>When Carla meets Paul at an ornithology conference, tempers fly as feathers get ruffled.</description>
       </book>
       <book id="bk107">
          <title>Splish Splash</title>
          <author>Thurman, Paula</author>
          <genre>Romance</genre>
          <price>4.95</price>
          <publish_date>2000-11-02</publish_date>
          <description>A deep sea diver finds true love twenty thousand leagues beneath the sea.</description>
       </book>
       <book id="bk108">
          <title>Creepy Crawlies</title>
          <author>Knorr, Stefan</author>      
          <genre>Horror</genre>
          <price>4.95</price>
          <publish_date>2000-12-06</publish_date>
          <description>An anthology of horror stories about roaches, centipedes, scorpions  and other insects.</description>
       </book>
       <book id="bk109">
          <title>Paradox Lost</title>
          <author>Kress, Peter</author>
          <genre>Science Fiction</genre>
          <price>6.95</price>
          <publish_date>2000-11-02</publish_date>
          <description>After an inadvertant trip through a Heisenberg Uncertainty Device, James Salway discovers the problems of being quantum.</description>
       </book>
       <book id="bk110">
          <title>Microsoft .NET: The Programming Bible</title>
          <author>O'Brien, Tim</author>
          <genre>Computer</genre>
          <price>36.95</price>
          <publish_date>2000-12-09</publish_date>
          <description>Microsoft's .NET initiative is explored in detail in this deep programmer's reference.</description>
       </book>
       <book id="bk111">
          <title>MSXML3: A Comprehensive Guide</title>
          <author>O'Brien, Tim</author>
          <genre>Computer</genre>
          <price>36.95</price>
          <publish_date>2000-12-01</publish_date>
          <description>The Microsoft MSXML3 parser is covered in detail, with attention to XML DOM interfaces, XSLT processing, SAX and more.</description>
       </book>
       <book id="bk112">
          <title>Visual Studio 7: A Comprehensive Guide</title>
          <author>Galos, Mike</author>
          <genre>Computer</genre>
          <price>49.95</price>
          <publish_date>2001-04-16</publish_date>
          <description>Microsoft Visual Studio 7 is explored in depth, looking at how Visual Basic, Visual C++, C#, and ASP+ are integrated into a comprehensive development environment.</description>
       </book>   
    </catalog>

    • Marked as answer by WilliamBoyd Friday, June 6, 2014 4:56 PM
    Wednesday, June 4, 2014 7:59 PM

All replies

  • The following (IE only) modification to the head of book_catalog.xsl is provided with the sole hope that someone else may then supply a better example.

    <HEAD>
    <TITLE>Transform Demo</TITLE>
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />-->
    <STYLE type="text/css">
    .catalog_genre_head {background-color:darkGreen;font-size:24pt;color:white;font-family:Impact;}
    .catalog_head {background-color:green;font-size:18pt;color:white;font-family:Impact;}
    .catalog_row0 {background-color:lightGreen;}
    .catalog_row1 {background-color:white;}
    .catalog_row_end {background-color:darkGreen;}
    </STYLE>
    <script type="text/javascript">
    var processorCache=null;
    var xslUrl=null;
    
    function loadSource(sourceObj){
     var xmlDoc=new ActiveXObject("Msxml2.DOMDocument.6.0");
     xmlDoc.async=false;
     xmlDoc.load(sourceObj);
     xslUrl=xmlDoc.selectSingleNode("//processing-instruction(\"xml-stylesheet\")").text.match(/href="(.+?)"/)[1];
     return xmlDoc;
    }
    
    function getProcessor(transformObj){
     var xslDoc, xslTemplate;
     if(processorCache==null){
      xslDoc=new ActiveXObject("Msxml2.FreeThreadedDOMDocument.6.0");
      xslTemplate=new ActiveXObject("Msxml2.XSLTemplate.6.0");
      xslDoc.async=false;
      xslDoc.load(transformObj);
      xslTemplate.stylesheet = xslDoc;
      xslProcessor=xslTemplate.createProcessor();
      processorCache=xslProcessor;
     }
     else{xslProcessor=processorCache;}
     return xslProcessor;
    }
    
    function transformData(srcDoc,processor){
     processor.input=srcDoc;
     processor.transform();
     return processor.output;
    }
    
    function showGenre(genre){
     var txt, srcDoc=loadSource(document.URL), processor=getProcessor(xslUrl);
     processor.addParameter("selected_genre",genre);
     txt=transformData(srcDoc,processor);
     document.body.innerHTML=txt;
    }
    </script>
    </HEAD>

    Tuesday, June 3, 2014 10:31 AM
  • Thanks mystifeid,

    This is a valid solution however as you point out, it is not perfect. This solution requires an HTTP get on each OnChange event of the dropdown. I was hoping to avoid that extra round trip to the server as the initial XML can get very large in my case.

    Regards

    Tuesday, June 3, 2014 10:28 PM
  • Looks like it uses cache to me.

    (Network monitor on desktop is first thing installed after installing Windows)

    So when using the select to change genre it is just checking for updated files. Please test.
    Tuesday, June 3, 2014 10:49 PM
  • Hi,

    I deployed the example to Tomcat to test. Each onchange event showed as a HTTP get in the Network tab of the IE f12 debug console. This suggest to me that IE is making a request but my understanding could be flawed. I don't see this if I load the file directly (no we container).

    Cheers


    • Edited by WilliamBoyd Wednesday, June 4, 2014 12:19 AM
    Wednesday, June 4, 2014 12:09 AM
  • Yes it will make the request but seems to use cached files instead of downloading new copy each time. (When I said network monitor, should have said bandwidth monitor)

    But believe me, I know what you mean. It seems bizarre that there is no way to do this with jscript. Without finding appropriate replacement properties for XMLDocument and XSLDocument, the only other way I can think of is by doing a double load - ie using xmlhttprequests to set global strings. I was hoping that these requests would use cache (from the initial load) too, but that does not seem to be the case - the onload bandwidth does appear to double. But at least after that there are no more requests. Anyway here is the example

    <HEAD>
    <TITLE>Transform Demo</TITLE>
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />-->
    <STYLE type="text/css">
    .catalog_genre_head {background-color:darkGreen;font-size:24pt;color:white;font-family:Impact;}
    .catalog_head {background-color:green;font-size:18pt;color:white;font-family:Impact;}
    .catalog_row0 {background-color:lightGreen;}
    .catalog_row1 {background-color:white;}
    .catalog_row_end {background-color:darkGreen;}
    </STYLE>
    <script type="text/javascript">
    var processorCache=null;
    var srcXML=null;
    var srcXSL=null;
    
    function getSource(sourceURL){
     var xmlHttp=new XMLHttpRequest();
     xmlHttp.open("GET", sourceURL, false);
     xmlHttp.send();
     return xmlHttp.responseText;
    }
    
    function loadSource(sourceObj){
     var xmlDoc=new ActiveXObject("Msxml2.DOMDocument.6.0");
     xmlDoc.async=false;
     xmlDoc.loadXML(sourceObj);
     return xmlDoc;
    }
    
    function getProcessor(transformObj){
     var xslDoc, xslTemplate;
     if(processorCache==null){
      xslDoc=new ActiveXObject("Msxml2.FreeThreadedDOMDocument.6.0");
      xslTemplate=new ActiveXObject("Msxml2.XSLTemplate.6.0");
      xslDoc.async=false;
      xslDoc.loadXML(transformObj);
      xslTemplate.stylesheet = xslDoc;
      xslProcessor=xslTemplate.createProcessor();
      processorCache=xslProcessor;
     }
     else{xslProcessor=processorCache;}
     return xslProcessor;
    }
    
    function transformData(srcDoc,processor){
     processor.input=srcDoc;
     processor.transform();
     return processor.output;
    }
    
    function showGenre(genre){
     var txt, srcDoc, processor;
     srcDoc=loadSource(srcXML);
     processor=getProcessor(srcXSL);
     processor.addParameter("selected_genre",genre);
     txt=transformData(srcDoc,processor);
     document.body.innerHTML=txt;
    }
    
    function getXmlStrings(){
     var xslUrl;
     srcXML=getSource(document.URL);
     xslUrl=srcXML.match(/href="(.+?)"/)[1];
     srcXSL=getSource(xslUrl);
    }
    
    document.onreadystatechange=function(){
     if(document.readyState==="complete"){
      getXmlStrings();
     }
    };
    </script>
    </HEAD>

    Wednesday, June 4, 2014 12:39 AM
  • Oops, forgot the bandwidth monitor was using non-standard settings. After adjusting it, it does appear that the first example is not using cache for the xml file.

    And while I wait to be shown the solution, the following is the last example with two functions deleted.

    <HEAD>
    <TITLE>Transform Demo</TITLE>
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />-->
    <STYLE type="text/css">
    .catalog_genre_head {background-color:darkGreen;font-size:24pt;color:white;font-family:Impact;}
    .catalog_head {background-color:green;font-size:18pt;color:white;font-family:Impact;}
    .catalog_row0 {background-color:lightGreen;}
    .catalog_row1 {background-color:white;}
    .catalog_row_end {background-color:darkGreen;}
    </STYLE>
    <script type="text/javascript">
    var processorCache=null;
    var xslUrl=null;
    var srcXML=null;
    var srcXSL=null;
    
    function loadSource(sourceObj,findURL){
     var xmlDoc=new ActiveXObject("Msxml2.DOMDocument.6.0");
     xmlDoc.async=false;
     xmlDoc.load(sourceObj);
     if(findURL===true){xslUrl=xmlDoc.selectSingleNode("//processing-instruction(\"xml-stylesheet\")").text.match(/href="(.+?)"/)[1];}
     return xmlDoc;
    }
    
    function getProcessor(transformObj){
     var xslDoc, xslTemplate;
     if(processorCache===null){
      xslDoc=new ActiveXObject("Msxml2.FreeThreadedDOMDocument.6.0");
      xslTemplate=new ActiveXObject("Msxml2.XSLTemplate.6.0");
      xslDoc.async=false;
      xslDoc.loadXML(transformObj.xml);
      xslTemplate.stylesheet = xslDoc;
      processorCache=xslTemplate.createProcessor();
     }
     return processorCache;
    }
    
    function transformData(srcDoc,processor){
     processor.input=srcDoc;
     processor.transform();
     return processor.output;
    }
    
    function showGenre(genre){
     var txt, processor=getProcessor(srcXSL);
     processor.addParameter("selected_genre",genre);
     txt=transformData(srcXML,processor);
     document.body.innerHTML=txt;
    }
    
    document.onreadystatechange=function(){
     if(document.readyState==="complete"){
      srcXML=loadSource(document.URL,true);
      srcXSL=loadSource(xslUrl,false);
     }
    };
    
    </script>
    </HEAD>

    • Edited by mystifeid Wednesday, June 4, 2014 1:50 AM
    Wednesday, June 4, 2014 1:22 AM
  • Thanks again mystifeid! I'm glad I can still trust the network tab... somewhat....

    Because our xml documents get very larger we really need to avoid extra round trips. Even if the browser was grapping from cache the behaviour would be different with a generated xml document (We could cache on the server I guess). The only other choice I can come up with is to add a small HTML file to the mix which then goes and gets the xml and associated xsl. This is nasty though because of the impact to the system. Lots of xml, xsl and path changes...

    I too would love to hear about better way.

    Wednesday, June 4, 2014 5:09 PM
  • Using separate html, xml and xsl files is the only way I can see that will make just one request for each file. I would have done this before now except that when it comes to xsl/xpath, I am a plodder.
    Wednesday, June 4, 2014 6:30 PM
  • Surprisingly easy to separate the files. Am a little sorry I didn't do this first. Anyway, if you check your network tab you will see that only one request for each file is ever made. The big difference is that url's for the files must be used in the script. All three (renamed to book.*) files are below.

    book.html

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Transform Demo</title>
    <!-- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />-->
    <style type="text/css">
    .catalog_genre_head {background-color:darkGreen;font-size:24pt;color:white;font-family:Impact;}
    .catalog_head {background-color:green;font-size:18pt;color:white;font-family:Impact;}
    .catalog_row0 {background-color:lightGreen;}
    .catalog_row1 {background-color:white;}
    .catalog_row_end {background-color:darkGreen;}
    </style>
    <script type="text/javascript">
    var processorCache=null;
    var srcXML=null;
    var srcXSL=null;
    
    function loadSource(sourceObj){
     var xmlDoc=new ActiveXObject("Msxml2.DOMDocument.6.0");
     xmlDoc.async=false;
     xmlDoc.load(sourceObj);
     return xmlDoc;
    }
    
    function getProcessor(transformObj){
     var xslDoc, xslTemplate;
     if(processorCache===null){
      xslDoc=new ActiveXObject("Msxml2.FreeThreadedDOMDocument.6.0");
      xslTemplate=new ActiveXObject("Msxml2.XSLTemplate.6.0");
      xslDoc.async=false;
      xslDoc.loadXML(transformObj.xml);
      xslTemplate.stylesheet = xslDoc;
      processorCache=xslTemplate.createProcessor();
     }
     return processorCache;
    }
    
    function transformData(srcDoc,processor){
     processor.input=srcDoc;
     processor.transform();
     return processor.output;
    }
    
    function showGenre(genre){
     var txt, processor=getProcessor(srcXSL);
     processor.addParameter("selected_genre",genre);
     txt=transformData(srcXML,processor);
     document.getElementById("xslOut").innerHTML=txt;
    }
    
    document.onreadystatechange=function(){
     if(document.readyState==="complete"){
      srcXML=loadSource("book.xml");
      srcXSL=loadSource("book.xsl");
      showGenre("all");
     }
    };
    
    </script>
    </head>
    <body>
     <h1>Scootney Press Book Catalog</h1>
     <p>Select a genre to see all books in that genre:</p>
     <div id="xslOut">
     </div> 
    </body>
    </html>

    book.xsl

    <?xml version="1.0" encoding="utf-8"?>
    <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" version="1.0">
    <xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
    <xsl:param name="selected_genre" select="'all'"/>
    <xsl:template match="/" name="root">
    
     Genre:
     <select id="genre" value="{$selected_genre}" onchange="showGenre(this.value)" style="margin-bottom:20px">
      <option value="all"><xsl:if test="$selected_genre='all'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>All</option>
      <option value="Computer"><xsl:if test="$selected_genre='Computer'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Computer</option>
      <option value="Fantasy"><xsl:if test="$selected_genre='Fantasy'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Fantasy</option>
      <option value="Horror"><xsl:if test="$selected_genre='Horror'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Horror</option>
      <option value="Romance"><xsl:if test="$selected_genre='Romance'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Romance</option>
      <option value="Science Fiction"><xsl:if test="$selected_genre='Science Fiction'"><xsl:attribute name="selected">Selected</xsl:attribute></xsl:if>Science Fiction</option>
     </select>
    
     <xsl:apply-templates select="catalog"/>
    
    </xsl:template>
     
    <xsl:template match="catalog">
     <table class="catalog_table">
      <xsl:apply-templates select="book[($selected_genre='all') or ($selected_genre=./genre)]">
       <xsl:sort select="title"/>
      </xsl:apply-templates>
     </table>
    </xsl:template>
    
    <xsl:template match="book">
     <xsl:if test="position()=1">
      <tr class="catalog_genre_head"><td colspan="6">
       <xsl:choose>
        <xsl:when test="$selected_genre='all'">
         All Genres
        </xsl:when>
        <xsl:otherwise>
         Genre: <xsl:value-of select="genre"/>
        </xsl:otherwise>
       </xsl:choose>
      </td></tr>            
      <tr class="catalog_head">
       <td>#</td>
       <td>Title</td>
       <td>Author</td>
       <td>Publication Date</td>
       <td>Description</td>
       <xsl:if test="$selected_genre='all'">
        <td>Genre</td>
       </xsl:if>
      </tr>
     </xsl:if>
     <tr class="catalog_row{position() mod 2}">
      <td><xsl:value-of select="position()"/></td>
      <td class="catalog_cell"><xsl:value-of select="title"/></td>
      <td class="catalog_cell"><xsl:value-of select="author"/></td>
      <td class="catalog_cell"><xsl:value-of select="publish_date"/></td>                    
      <td class="catalog_cell"><xsl:value-of select="description"/></td>
      <xsl:if test="$selected_genre='all'">
       <td class="catalog_cell"><xsl:value-of select="genre"/></td>
      </xsl:if>
     </tr>
     <xsl:if test="position()=last()">
      <tr class="catalog_row_end"><td colspan="6"> </td></tr>
     </xsl:if>
    </xsl:template>
    
    </xsl:stylesheet>
    

    book.xml

    <?xml version="1.0" encoding="utf-8"?>
    <catalog>
       <book id="bk101">
          <title>XML Developer's Guide</title>
          <author>Gambardella, Matthew</author>
          <genre>Computer</genre>
          <price>44.95</price>
          <publish_date>2000-10-01</publish_date>      
          <description>An in-depth look at creating applications with XML.</description>
       </book>
       <book id="bk102">
          <title>Midnight Rain</title>
          <author>Ralls, Kim</author>
          <genre>Fantasy</genre>
          <price>5.95</price>
          <publish_date>2000-12-16</publish_date>
          <description>A former architect battles corporate zombies, an evil sorceress, and her own childhood to become queen of the world.</description>
       </book>
       <book id="bk103">
          <title>Maeve Ascendant</title>
          <author>Corets, Eva</author>
          <genre>Fantasy</genre>
          <price>5.95</price>
          <publish_date>2000-11-17</publish_date>
          <description>After the collapse of a nanotechnology society in England, the young survivors lay the foundation for a new society.</description>
       </book>
       <book id="bk104">
          <title>Oberon's Legacy</title>
          <author>Corets, Eva</author>
          <genre>Fantasy</genre>
          <price>5.95</price>
          <publish_date>2001-03-10</publish_date>
          <description>In post-apocalypse England, the mysterious agent known only as Oberon helps to create a new life for the inhabitants of London. Sequel to Maeve Ascendant.</description>
       </book>
       <book id="bk105">
          <title>The Sundered Grail</title>
          <author>Corets, Eva</author>
          <genre>Fantasy</genre>
          <price>5.95</price>
          <publish_date>2001-09-10</publish_date>
          <description>The two daughters of Maeve, half-sisters, battle one another for control of England. Sequel to Oberon's Legacy.</description>
       </book>
       <book id="bk106">
          <title>Lover Birds</title>
          <author>Randall, Cynthia</author>
          <genre>Romance</genre>
          <price>4.95</price>
          <publish_date>2000-09-02</publish_date>
          <description>When Carla meets Paul at an ornithology conference, tempers fly as feathers get ruffled.</description>
       </book>
       <book id="bk107">
          <title>Splish Splash</title>
          <author>Thurman, Paula</author>
          <genre>Romance</genre>
          <price>4.95</price>
          <publish_date>2000-11-02</publish_date>
          <description>A deep sea diver finds true love twenty thousand leagues beneath the sea.</description>
       </book>
       <book id="bk108">
          <title>Creepy Crawlies</title>
          <author>Knorr, Stefan</author>      
          <genre>Horror</genre>
          <price>4.95</price>
          <publish_date>2000-12-06</publish_date>
          <description>An anthology of horror stories about roaches, centipedes, scorpions  and other insects.</description>
       </book>
       <book id="bk109">
          <title>Paradox Lost</title>
          <author>Kress, Peter</author>
          <genre>Science Fiction</genre>
          <price>6.95</price>
          <publish_date>2000-11-02</publish_date>
          <description>After an inadvertant trip through a Heisenberg Uncertainty Device, James Salway discovers the problems of being quantum.</description>
       </book>
       <book id="bk110">
          <title>Microsoft .NET: The Programming Bible</title>
          <author>O'Brien, Tim</author>
          <genre>Computer</genre>
          <price>36.95</price>
          <publish_date>2000-12-09</publish_date>
          <description>Microsoft's .NET initiative is explored in detail in this deep programmer's reference.</description>
       </book>
       <book id="bk111">
          <title>MSXML3: A Comprehensive Guide</title>
          <author>O'Brien, Tim</author>
          <genre>Computer</genre>
          <price>36.95</price>
          <publish_date>2000-12-01</publish_date>
          <description>The Microsoft MSXML3 parser is covered in detail, with attention to XML DOM interfaces, XSLT processing, SAX and more.</description>
       </book>
       <book id="bk112">
          <title>Visual Studio 7: A Comprehensive Guide</title>
          <author>Galos, Mike</author>
          <genre>Computer</genre>
          <price>49.95</price>
          <publish_date>2001-04-16</publish_date>
          <description>Microsoft Visual Studio 7 is explored in depth, looking at how Visual Basic, Visual C++, C#, and ASP+ are integrated into a comprehensive development environment.</description>
       </book>   
    </catalog>

    • Marked as answer by WilliamBoyd Friday, June 6, 2014 4:56 PM
    Wednesday, June 4, 2014 7:59 PM
  • Thanks,

    I'm guessing this will be the only answer but I'll leave it for a couple days before I mark it as such.

    You definitely deserve points mystifeid.

    Wednesday, June 4, 2014 8:52 PM
  • It's been fun - reward enough.
    Wednesday, June 4, 2014 9:07 PM