Load an XML File at Runtime


You might not have total control on where and how all the files that are used on a website are created. In this tutorial, you'll learn how to load an externally created XHTML file in your publication at runtime, meaning when it is viewed over the web, your intranet or file system. In this scenario, the web page always displays the current content of the file, unlike including the same page in your publication, which would take a snapshot of the file at the time of the publication.

Although you could program your own cross browser XML DOM script to perform this task, it's far more efficient to use one of the many scripting libraries you can find on the web. In this case, you'll use the Sarissa JavScript Library.


From the Sarissa Web Site. "Sarissa is an ECMAScript library acting as a cross-browser wrapper for native XML APIs. It offers various XML related goodies like Document instantiation, XML loading from URLs or strings, XSLT transformations, XPath queries etc and comes especially handy for people doing what is lately known as "AJAX" development."

Insert the content of an external XHTML file when a published page is viewed

Let's pretend there are some XHTML files on your intranet that you'd like to include in a personal mashup. Since you'd like to view the most up to date information from these files, you cannot just XInclude them in.

Add the Sarissa scripts to the collection

  1. Download the Sarissa scripts from the web site ;
  2. Create a sarissa folder in your collection's online/scripts folder
  3. Copy the scripts in the online/scripts/sarissa folder

You can now reference these scripts from the template.

Add the Sarissa script to the template

  1. From the Collection Properties dialog, open the collection template;
  2. Insert this script in the XML editing view of your topic;
    <script type="text/javascript" src="scripts/sarissa/sarissa.js"/>
    <script type="text/javascript" src="scripts/sarissa/sarissa_ieemu_xpath.js"/>
    <script src="scripts/sarissa_xml.js" type="text/javascript"></script>
    The last line being a reference to the script you'll create in the following step;
  3. Save and close the template.

Create a custom functions to load the external file

The approach we'll use is to place a special <div id="xyz"/> on the page, serving as the target container, along with a one line script to load the XHTML file. You will now create the script that will be called from each page you'll want to load external content on.

  1. Create a file named sarissa_xml.js in your collection's online/scripts folder;
  2. Add the function below to the file;
  3. Save the file.
function LoadXmlFileInElementId(sXmlFileName, sXPath, sId) {
 var output = document.getElementById(sId);
 if (output != null) {
  var xmlDoc = Sarissa.getDomDocument();
  xmlDoc.async = false;
  if(xmlDoc.parseError.errorCode != 0) {
   output.innerHTML = "The XML file is not well formed or there was an other error!";
  try {
   xmlDoc.setProperty("SelectionLanguage", "XPath");
   xmlDoc.setProperty("SelectionNamespaces", "xmlns:xhtml='http://www.w3.org/1999/xhtml' xmlns:xsl='http://www.w3.org/1999/XSL/Transform'");
   var targets = xmlDoc.selectNodes(sXPath);
   //write the target to the output element
   output.innerHTML = new XMLSerializer().serializeToString(targets[0])
  catch(e) {output.innerHTML = e.message;}
  else {alert("Cannot find element with the following attribute: id = " + sId );}

In the above script, a DOM Documents is first created to load the XML file. Then the XPath selector is used to copy the desired element into the output <div>. The three parameters of the function are sXmlFileName, sXPath, sId.

To load the root node of an XML document, you can use "/" as the sXPath variable.

Calling the script to load an XHTML file at runtime

The last step is to insert the output element and the appropriate script to load the content.

  1. Place your cursor where you want to insert the external file content;
  2. Switch to the XML markup view and insert the following markup and script;
  3. Make sure the ID if the output element matches the one in the script;
  4. Publish your collection.
<div id="output"/>
<script lang="JavaScript" type="text/javascript"><![CDATA[
 LoadXmlFileInElementId("xml/source.xml", "//xhtml:body", "output");

When you open the published page, the content of the source.xml file is loaded dynamically.


The default collection created by Tópico already contains a reference to the Sarissa library through the topico_xml.js script file. This means you can readily use the above technique in your collections.

In addition to the LoadXmlFileInElementId(sXmlFileName, sXPath, sId) function, there is also the TransformXmlFileInElementId(sXmlFileName, sXPath, sId, sXslFileName) function that adds the sXslFileName parameter to transform the source before selecting the target element.

This technique could be used with any JavaScript library and is not a feature of Tópico.

Providing a different user interface for authors

Another way to do the same would be to allow the author to set up the different parameters through custom markup, along with XStandard labels and then create the script through the XSLT transformation step. This approach has the advantage of providing vide a much simpler user interface for the author who would like to use this approach in more than a few topics. Learn how to do it in this tutorial.


65 / 194