Link to home
Start Free TrialLog in
Avatar of sscotti
sscottiFlag for United States of America

asked on

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

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');
            return;
      }
}

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
  document.getElementById('updateTarget').appendChild(frag);
}

The URI for this is here:

http://www.ibm.com/developerworks/xml/library/x-ffox3/index.html

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.

Thanks.
ASKER CERTIFIED SOLUTION
Avatar of Gertone (Geert Bormans)
Gertone (Geert Bormans)
Flag of Belgium image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of sscotti
sscotti
Flag of United States of America image

ASKER

<!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>
<head>
<style type="text/css">
#updateTarget {
margin-top:20px;
margin-left:20px;
}
#attributeName {
border:1px solid black;
font-size:14px;
background-color:#CCCCCC;
}
#attributeValue {
border:1px solid black;
font-size:12px;
}
</style>
<script type="text/javascript" src="sarissa-0.9.8.1/sarissa/sarissa.js"></script>
<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>');
   importXML(s);
}
     
function importXML(jString) {
      var oDomDoc = Sarissa.getDomDocument();  
      oDomDoc = (new DOMParser()).parseFromString(jString, "text/xml");  
      //alert(new XMLSerializer().serializeToString(oDomDoc));  
      test(1,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  
processor.importStylesheet(xslDoc);  
// 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);
}  
</script>
</head>
<body>
<input size="100" id="redirectorLinkThinger" type="text">
<input value="Break it&gt;" onclick="breakit()" type="button">
<div id="updateTarget"></div>
</body>
</html>


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:

http://mydomainname.com?n=cur&v=840&n=cid&v=120804&n=renewalCurrency&v=840&n=SP&v=10250&n=PN&v=11&n=sid&v=40586&n=rc&v=N&n=pfid&v=16050010&n=daysDuration&v=11&n=lang&v=en&n=countryCode&v=USA&n=spefsku&v=10433531&n=vendorName&v=&n=price&v=49%2E99&n=api1&v=90&n=api2&v=003&n=api3&v=0&n=api4&v=10433718&n=rcSubSku&v=10433718&n=expDate&v=07312007&n=mediaType&v=ESD&n=udrpid2&v=842964&n=udrpid1&v=859127&n=return&v=renewalcenter&n=isku&v=&n=pskupfid&v=&n=subscriptionExpired&v=YES&n=udrpid&v=842964&n=udrpid&v=859127&n=udrpid&v=820839&n=renewalProductID&v=820839&n=renewalPrice&v=%2449%2E99&n=renewalVersionID&v=1524040&n=DSP&v=&n=PGRP&v=0&n=ABCODE&v=&CACHE_ID=0

and the URL for my little project.

http://homepage.mac.com/sscotti/link_breaker.htm