sscotti
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.cr eateDocume nt) {
xmlDoc = document.implementation.cr eateDocume nt("", "", null);
}
else if (window.ActiveXObject) {
xmlDoc = new ActiveXObject("Microsoft.X MLDOM");
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.transformToFragm ent(xmlDoc , document);
//insert the result subtree into the document, using the target element ID
document.getElementById('u pdateTarge t').append Child(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.
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.cr
xmlDoc = document.implementation.cr
}
else if (window.ActiveXObject) {
xmlDoc = new ActiveXObject("Microsoft.X
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.transformToFragm
//insert the result subtree into the document, using the target element ID
document.getElementById('u
}
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
<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/saris
<script>
function breakit() {
s = new String("BEGIN"+document.ge
s = s.replace(/\?p_name=/g,'">
s = s.replace(/\?n=/g,'"><\/Re
s = s.replace(/&p_name=/g,'"><
s = s.replace(/&n=/g,'"><\/Red
s = s.replace(/&cur=/g,'"><\/R
s = s.replace(/&cid=/g,'"><\/R
s = s.replace(/&CACHE_ID=/g,'"
s = s.replace(/&p_val=/g,'" value="');
s = s.replace(/&v=/g,'" value="');
s = s.replace(/BEGIN/g,'<Redir
s = s.replace(/END/g,'"><\/Red
importXML(s);
}
function importXML(jString) {
var oDomDoc = Sarissa.getDomDocument();
oDomDoc = (new DOMParser()).parseFromStri
//alert(new XMLSerializer().serializeT
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
"<body><div id='container'><h1><xsl:va
"<xsl:sort select='@name'/><tr><td id='attributeName'><xsl:va
"<td id='attributeValue'><xsl:v
xslDoc = (new DOMParser()).parseFromStri
// make the stylesheet reusable by importing it in the
// XSLTProcessor
processor.importStylesheet
// now XSLTProcessor is the 'proxy' for our stylesheet,
// the function below demonstrates usage
function test(paramValue, xmlDoc) {
// set a stylesheet parameter
processor.setParameter(nul
// create source document
//var xmlDoc = Sarissa.getDomDocument("http://foo.org/ns/uri",
// transform the document
var newDocument = processor.transformToDocum
// show transformation results
//alert(new XMLSerializer().serializeT
document.getElementById('u
}
</script>
</head>
<body>
<input size="100" id="redirectorLinkThinger"
<input value="Break it>" 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=val
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