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

Posted on 2007-10-15
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

    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
    LVL 5

    Author Comment

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <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=''>"+
    "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("","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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 for Beginning Beginners

    Are you looking for an efficient introduction to HTML5? Have you tried other HTML5 courses and found them too complex? Do you need just the basics of HTML5 to use with Wordpress or other content management system? If you said yes to any of these questions, this course is for you.

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
    The viewer will learn how to count occurrences of each item in an array.
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    759 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

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now