Load an XML File at Runtime

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;
   HTML

   <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;
  xmlDoc.load(sXmlFileName);
  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");
]]></script>		

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

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.