Navigate XML when loading with Javascript.

awetch · February 23rd, 2005, 07:56 PM

I had posted this on the xsl-list...apparently the wrong place..heh.

I am loading some xml using javascript, but cannot figure out how to
navigate it properly (next record, previous record...etc). I can do it with a data island, but for some reason
cannot quite get it to work when loading it with javascript.

Here is some of the loading javascript:

        XMLdata="file.xml";
        XMLfile = new ActiveXObject("MSXML2.DomDocument");
        XMLfile.async = false;
        XMLfile.setProperty("SelectionLanguage", "XPath");
        XMLfile.validateOnParse = false;
        XMLfile.resolveExternals = false;
        XMLfile.load(XMLdata);
    XSLfile.async = false;
    XSLfile.resolveExternals = false;
    XMLfile.validateOnParse = false;
    XSLfile.load(XSLdata);
        XSLmain = new ActiveXObject("MSXML2.XSLTemplate");
    XSLmain.stylesheet = XSLfile;
    renderData('root');
Just to give an example of how I am doing it.

Previous data island code:
<xml id="XMLfile" src="file.xml">

Previously I would use an external javascript file with somthing like:

        XMLfile.recordset.moveLast();
        currentRecord = XMLfile.recordset.recordcount - 1;

etc...

However, I am not sure how to use the old navigation code with the new XML loading method (javascript).
any ideas?

Santhi · February 24th, 2005, 03:56 AM

Find below the sample for client side paging for XML:
This example displays three records at a time..

HTML Code:
<html>
<head>
    <title>Paging mechanism using XML+XSLT</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
  // get the URL up to the page name
  url_root = this.document.location.href;
  page_name = url_root.split("/").pop().split("?")[0];
  url_root = url_root.substring(0, url_root.indexOf(page_name));

  // get URL arguments, have defaults if arguments are missing
  var args = getURLArguments(document.location.href);
  var start = args['start'] ? args['start'] : 1;
  var limit = args['limit'] ? args['limit'] : 3;

  // build the XML controller
  xml_text = '<?xml version="1.0"?>';
  xml_text += '<xml-controller>';
  xml_text += ' <xml-doc-name start="' + start + '" limit="' + limit + '">c:/Test.xml</xml-doc-name>';
  xml_text += '</xml-controller>';

  // load the controller XML
  var xml = new ActiveXObject("Microsoft.XMLDOM");
  xml.async = false;
  xml.loadXML(xml_text);

  // load the XSL
  var xsl = new ActiveXObject("Microsoft.XMLDOM");
  xsl.async = false;
  xsl.load("c:/Test.xsl");

  // XSL transform
  document.write(xml.transformNode(xsl));

  // return a map of URL's arguments
  function getURLArguments(url) {
    var args = {};
    var query_str = url.substring(url.indexOf('?') + 1);
    var args_arr = query_str.split('&');
    for (var i = 0; i < args_arr.length; i++) {
      var arg_arr = args_arr[i].split('=');
      args[arg_arr[0]] = unescape(arg_arr[1]);
    }
    return args;
  }

</script>

</body>

Xsl Code:

<?xml version="1.0" ?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/xml-controller/xml-doc-name">
  <xsl:variable name="xml-doc-name" select="." />
  <xsl:variable name="start" select="@start" />
  <xsl:variable name="limit" select="@limit" />
  <xsl:variable name="end" select="$start + $limit - 1" />
  <xsl:variable name="xml-doc" select="document($xml-doc-name)/Test[position() >=
    $start and position() <= $end]" />
  <html>
  <body>
  <table>
  <tr>
  <td>
     <xsl:if test="$start - $limit >= 1">
        <a href="?start={$start - $limit}&imit={$limit}">prev</a>
     </xsl:if>
  </td>
  <td align="right">
    <a href="?start={$end + 1}&limit={$limit}">next</a>
  </td>
  </tr>
  <tr bgcolor="#CCCCCC">
  <th>Title </th>
  </tr>
  <xsl:for-each select="$xml-doc">
  <tr>
  <td>
    <xsl:value-of select="Name" />

   </td>
   </tr>
   </xsl:for-each>
   </table>
   </body>
   </html>
</xsl:template>
</xsl:stylesheet>

Test.xml:
<Test>
    <Name>John</Name>
    <Name>Thomas</Name>
    <Name>Peter</Name>
    <Name>Sussanne</Name>
</Test>