[Last Call] Learn how to a build a cloud-first strategyRegister Now


Want to dynamically create javascript variable that consists of well formed XML code and then display using xslt

Posted on 2007-10-15
Medium Priority
Last Modified: 2013-11-18
I am just learning how to use XML and XML stylesheets.  For a learning project I am building a little HTML page that takes as input a URL with either parameters (e.g. country=USA) or name value pairs (name=user, value=pass).  That part really isn't that important.  I am able to form the XML fine with javascript, but then I want to somehow write the transformed XML to an element on the same page that the javascript and input fileds reside.

I have a vague idea on how to do it in that I believe I need to create document objects for both the XML and for the XSLT.  I've found some examples on the net, but they load the XML and XSLT from a file whereas I am dynamically generating the XML from a javascript function and storing the string in a variable.

I did find a function like this:

function importXML(jString) {
      if (document.implementation && document.implementation.createDocument) {
            xmlDoc = document.implementation.createDocument("", "", null);
      else if (window.ActiveXObject) {
            xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
            xmlDoc.onreadystatechange = function () {
                  if (xmlDoc.readyState == 4) {
      else {
            alert('Your browser can\'t handle this script');

for creating the document object, I changed it to take a jString argument, but I don't know how to put that in as the source for the document.

I also found a transform function that is something like this:

function runTransform(){
  //Run the transform, creating a fragment output subtree that
  //can be inserted back into the main page document object (given
  //in the second argument)
  var frag = processor.transformToFragment(xmlDoc, document);
  //insert the result subtree into the document, using the target element ID

The URI for this is here:


Probably a little old.

I've been able to take the output of my javascript function, paste that into another XML files that references my XSLT file and it works fine.  I basically want all of the functionality on one page with dynamic generation of the XML.  The reason is that the XSLT gives a little more flexibility in formatiting and handling the output.

Question by:sscotti
LVL 60

Accepted Solution

Geert Bormans earned 1000 total points
ID: 20083522
if the XML is dynamically generated as a DOM,
the loading already has happened and you can use the document as is in the transform

Author Comment

ID: 20106127
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Link Breaker Version 0.1</title>
<style type="text/css">
#updateTarget {
#attributeName {
border:1px solid black;
#attributeValue {
border:1px solid black;
<script type="text/javascript" src="sarissa-"></script>
function breakit() {
   s = new String("BEGIN"+document.getElementById("redirectorLinkThinger").value+"END");
   s = s.replace(/\?p_name=/g,'"><\/RedirectorURLthingyElement><RedirectorURLthingyElement name="');
   s = s.replace(/\?n=/g,'"><\/RedirectorURLthingyElement><RedirectorURLthingyElement name="');
   s = s.replace(/&p_name=/g,'"><\/RedirectorURLthingyElement><RedirectorURLthingyElement name="');
   s = s.replace(/&n=/g,'"><\/RedirectorURLthingyElement><RedirectorURLthingyElement name="');
   s = s.replace(/&cur=/g,'"><\/RedirectorURLthingyElement><RedirectorURLthingyElement name="cur_(param)" value=\"');
   s = s.replace(/&cid=/g,'"><\/RedirectorURLthingyElement><RedirectorURLthingyElement name="cid_(param)" value=\"');
   s = s.replace(/&CACHE_ID=/g,'"><\/RedirectorURLthingyElement><RedirectorURLthingyElement name="CACHE_ID_(param)" value=\"');
   s = s.replace(/&p_val=/g,'" value="');
   s = s.replace(/&v=/g,'" value="');
   s = s.replace(/BEGIN/g,'<RedirectorURLthingy><RedirectorURLthingyElement name=\"domain\" value=\"');
   s = s.replace(/END/g,'"><\/RedirectorURLthingyElement><\/RedirectorURLthingy>');
function importXML(jString) {
      var oDomDoc = Sarissa.getDomDocument();  
      oDomDoc = (new DOMParser()).parseFromString(jString, "text/xml");  
      //alert(new XMLSerializer().serializeToString(oDomDoc));  

var processor = new XSLTProcessor();  
 // create a DOM Document containing an XSLT stylesheet  
var xslDoc = Sarissa.getDomDocument();  
var xslStr = "<?xml version='1.0' encoding='UTF-8'?>"+
"<xsl:stylesheet version='1.0' xmlns:xsl='http://www.w3.org/1999/XSL/Transform'>"+
"lt;xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/gt;"+
"<xsl:template match='RedirectorURLthingy'><html>"+
"<body><div id='container'><h1><xsl:value-of select='domain'/></h1><table><xsl:for-each select='RedirectorURLthingyElement'>"+
"<xsl:sort select='@name'/><tr><td id='attributeName'><xsl:value-of select='@name'/></td>"+
"<td id='attributeValue'><xsl:value-of select='@value'/></td></tr></xsl:for-each></table></div></body></html></xsl:template></xsl:stylesheet>";
 xslDoc = (new DOMParser()).parseFromString(xslStr, "text/xml");  
// make the stylesheet reusable by importing it in the  
// XSLTProcessor  
// now XSLTProcessor is the 'proxy' for our stylesheet,  
// the function below demonstrates usage  
function test(paramValue, xmlDoc) {  
// set a stylesheet parameter  
processor.setParameter(null, "title", paramValue);  
// create source document  
//var xmlDoc = Sarissa.getDomDocument("http://foo.org/ns/uri","foo", null);  
// transform the document  
var newDocument = processor.transformToDocument(xmlDoc);  
// show transformation results  
//alert(new XMLSerializer().serializeToString(newDocument));  
document.getElementById('updateTarget').innerHTML = new XMLSerializer().serializeToString(newDocument);
<input size="100" id="redirectorLinkThinger" type="text">
<input value="Break it&gt;" onclick="breakit()" type="button">
<div id="updateTarget"></div>

I actually got something mostly working.  Your comment was helpful but lacking on details.  I used sarissa to help things out a bit.  I am posting a new question on how to update the code so that it parses the input URL in a more general fashion to accomodate the format we are using, namely p_name=x&p_val=y  or n=x&v=y format for name value pairs and parameter=value for others.  I'd like to generalize it some parameter=value is handled like p_name=parameter&p_val=value.  I am already doing that, but I sma checking specifically for parameters cur, cid and cacheID.  I think a regular expression or 2 could handle all of the case and replace the location string with the XML markup.

I've included a dummy URL to break up:


and the URL for my little project.


Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question