Project

Profile

Help

What am I doing wrong?

Added by Dino Fancellu over 7 years ago

In chrome I sometimes get:

Uncaught SyntaxError: Unexpected end of input

on JSON.parse()

If I try again its normally ok.

Here's the url

http://dinofancellu.com/demo/xml-visualization/index2.html

Here's the code:

<script type="text/javascript" language="javascript" src="Saxonce/Saxonce.nocache.js"></script>
</head>
<body>
JSON=<div id="json"></div>
<script>
 var onSaxonLoad = function()
{
 var xsl = Saxon.requestXML("metadata.xsl");

 var xml = Saxon.requestXML("metadata.xml");

var proc = Saxon.newXSLT20Processor(xsl);

 proc.updateHTMLDocument(xml);
 
 setTimeout(function(){
  var x=document.getElementById('json').innerHTML

console.log("xsl output:"+x)	

  json=JSON.parse(x);     
 
 console.log("json:"+json)	
 
 },1) 
 
};
</script>
Hello
</body>

I strongly suspect that I'm checking the json div before it gets populated (xsl output: doesn't show anything). So how do I properly get the results back from saxon. I had thought that proc.updateHTMLDocument was synchronous, but maybe not!

Thanks

Dino.


Replies (20)

Please register to reply

RE: What am I doing wrong? - Added by Michael Kay over 7 years ago

I would suggest invoking the parse-JSON from within the stylesheet. Something like this perhaps:






  




  

Alternatively, if you want to write a JS application that invokes XSLT, rather than an XSLT application that invokes JS, then do the transformation using transformToHtmlFragment(), and you can then append the returned fragment to the HTML page, and process it in other ways, under the control of your Javascript code.

RE: What am I doing wrong? - Added by Dino Fancellu over 7 years ago

Still unclear.

I try:


 var x=proc.transformToHTMLFragment(xml);
 console.log("xsl output:"+x)
 json=JSON.parse(x);     
 console.log("json:"+json)	


I get:

xsl output:undefined index2.html:24 SaxonCE.XSLT20Processor 22:13:32.176 SEVERE: Exception com.google.gwt.core.client.JavaScriptException in onModuleLoad: (SyntaxError) : Unexpected token u 6D08C01821381D35BD12009B44D2D65D.cache.html:875 Uncaught client.net.sf.saxon.ce.lib.JavaScriptAPIException: [js] Exception com.google.gwt.core.client.JavaScriptException in onModuleLoad: (SyntaxError) : Unexpected token u 6D08C01821381D35BD12009B44D2D65D.cache.html:1913

My xsl is here: http://dinofancellu.com/demo/xml-visualization/metadata.xsl

RE: What am I doing wrong? - Added by Dino Fancellu over 7 years ago

Just in case I haven't made myself clear, my use case is this:

XML->SAXON XSLT->TEXT

This TEXT in this case happens to be JSON, which I then want to turn to a proper JSON dom from the JS side.

No params, nothing fancy, just an input doc and an output blob of text.

The docs mention that XSLT20Processor "support asynchronous processing."

For my needs I want to avoid this and if possible have simple synchronous calls, well, at least for know, until I get something reliably working.

e.g.


 var xsl = Saxon.requestXML("metadata.xsl");
 var xml = Saxon.requestXML("metadata.xml");  
 var proc = Saxon.newXSLT20Processor(xsl);

 var jsonstring=proc.XXXXX

 var json=JSON.parse(jsonstring); 

RE: What am I doing wrong? - Added by O'Neil Delpratt over 7 years ago

Hi Dino,

In what you mentioned in your last comment, the following I managed to get working:


 var onSaxonLoad = function()
    {
     var xsl = Saxon.requestXML("metadata.xsl");
     var xml = Saxon.requestXML("metadata.xml");
    
     var proc = Saxon.newXSLT20Processor(xsl);
     var x = proc.transformToFragment(xml,document).textContent;
     console.log("xsl output:"+x);
     var json = JSON.parse(x);	
     console.log("json:"+json)	

Please observe I use 'transformToFragment' in the code snippet above. I got an Exception when I used transformToHTMLFragment

RE: What am I doing wrong? - Added by Dino Fancellu over 7 years ago

Thanks, I'll check it out when I get home. Behind work proxies, bah!

On 1 July 2013 13:15, Saxonica Developer Community < > wrote:

RE: What am I doing wrong? - Added by Dino Fancellu over 7 years ago

That works fine O'Neil,

You might want to put the example up in the docs.

By the way this is the finished bit of code:

http://dinofancellu.com/demo/xml-visualization

Thanks.

Dino.

RE: What am I doing wrong? - Added by Dino Fancellu over 7 years ago

Ah, more "issues".

http://dinofancellu.com/demo/xml-visualization/index2.html

works fine, emits json to console.

http://dinofancellu.com/demo/xml-visualization/index2b.html

Emits json then dies horribly.

It doesn't pull in XML but itself, index2b.html

Any idea why it happens and why such a garbled message?

e.g.

xsl output:
        {
         "name":"html"
          ,"children": [  { "name":"head" ,"children": [ { "name":"meta" } , { "name":"link" } , { "name":"script" } ] } , { "name":"body" ,"content":"Hello","children": [ { "name":"script" ,"content":"var onSaxonLoad = function() { var xsl = Saxon.requestXML("metadata.xsl"); var xml = Saxon.requestXML("index2b.html"); var proc = Saxon.newXSLT20Processor(xsl); var x = proc.transformToFragment(xml,document).textContent; console.log("xsl output:"+x) json=JSON.parse(x); console.log("json:"+json) };" } ] } ]
        }
     index2b.html:24
SaxonCE.XSLT20Processor 23:25:44.353
SEVERE: Exception com.google.gwt.core.client.JavaScriptException in onModuleLoad: (SyntaxError) : Unexpected token m 6D08C01821381D35BD12009B44D2D65D.cache.html:875
Uncaught client.net.sf.saxon.ce.lib.JavaScriptAPIException: [js] Exception com.google.gwt.core.client.JavaScriptException in onModuleLoad: (SyntaxError) : Unexpected token m 6D08C01821381D35BD12009B44D2D65D.cache.html:1913

RE: What am I doing wrong? - Added by O'Neil Delpratt over 7 years ago

In the source of http://dinofancellu.com/demo/xml-visualization/index2b.html you have the following line of code:

var xml = Saxon.requestXML("index2b.html");

Is this right? Should this not be some XML document?

RE: What am I doing wrong? - Added by Dino Fancellu over 7 years ago

I know, its deliberate. It is well formed XML. It is comes back as json (look at the console). But then gives the above nasty error.

Dino.

On 2 July 2013 11:04, Saxonica Developer Community < > wrote:

RE: What am I doing wrong? - Added by O'Neil Delpratt over 7 years ago

Hi,

Looking more closely at the output of the transformation you have not escaped the quotes that appear within the text content. For example:

"content":"var onSaxonLoad = function() { var xsl = Saxon.requestXML(*"metadata.xsl"*)...

In the stylesheet you will need to call the XPath function analyze-string to properly escape the quotes.

RE: What am I doing wrong? - Added by Michael Kay over 7 years ago

XPath function analyze-string

I'd suggest

"
\\"

then

 replace($x, $quot, $escapedQuot)

RE: What am I doing wrong? - Added by Dino Fancellu over 7 years ago

Aha, thanks. Original xml didn't have those quotes so worked fine.

On 2 July 2013 11:59, Saxonica Developer Community < > wrote:

RE: What am I doing wrong? - Added by Dino Fancellu over 7 years ago

Thanks.

Did as

<xsl:variable name="quot">"</xsl:variable>
<xsl:variable name="escapedQuot">\\"</xsl:variable>

... (replace(., $quot, $escapedQuot))

Here's an example of the XSL itself seen as a tree

http://dinofancellu.com/demo/xml-visualization/index4.html

However, yet another small issue.

Looking at the end script node coming back I see:

{ "name":"script" ,"children": [ {"name":"@type","content":"text/javascript"} ] }

i.e. script has no content.

But running on Saxon 9.4 on the server I see what I would expect (had to escape the && first, CE doesn't mind)

{ "name":"script" ,"content":"var m = [20, 120, 20, 120]...

RE: What am I doing wrong? - Added by Michael Kay over 7 years ago

On Safari I see the HTML rendered as a tree with an html node at its root with three children - parseError, head, and body. On Firefox I just see the parseError node.

I guess for some reason the script element has no text node children. I don't know if that might have something to do with the parse errors?

The HTML5 DOM is pretty quirky, so surprises like this cease to be surprising after a while... If you display the string value of the script element, is that any better than displaying its text node children?

Should I be able to scroll to see more of the tree? At present I can only see the whole tree by zooming to a level where I can't read the text.

RE: What am I doing wrong? - Added by Dino Fancellu over 7 years ago

Re: firefox, console says:

[21:39:34.297] 
        {
         "name":"parsererror"
          ,"content":"XML Parsing Error: not well-formed Location: http://dinofancellu.com/demo/xml-visualization/Saxonce/CECE12D2976993D3B12B21ED2115A689.cache.html Line Number 113, Column 29:","children": [  { "name":"sourcetext" ,"content":"var duration = d3.event && d3.event.altKey ? 1500 : 500; ----------------------------^" } ]
        }
   

Chrome doesn't mind. I tried changing to && but neither chrome or ff liked that.


I'm also concerned by what is coming back from Saxon-CE

If you bring up chrome/safari and its dev console (you should see the json coming back from the xsl)

{ "name":"html" ,"children": [ { "name":"parsererror" ,"children": [ {"name":"@style","content":"display: block; white-space: pre; border: 2px solid #c77; padding: 0 1em 0 1em; margin: 1em; background-color: #fdd; color: black"} , { "name":"h3" ,"content":"This page contains the following errors:" } , { "name":"div" ,"content":"error on line 113 at column 29: xmlParseEntityRef: no name","children": [ {"name":"@style","content":"font-family:monospace;font-size:12px"} ] } , { "name":"h3" ,"content":"Below is a rendering of the page up to the first error." } ] } , { "name":"head" ,"children": [ { "name":"title" ,"content":"XML->JSON->Tree" } , { "name":"meta" ,"children": [ {"name":"@http-equiv","content":"Content-Type"} ,{"name":"@content","content":"text/html;charset=utf-8"} ] } , { "name":"link" ,"children": [ {"name":"@type","content":"text/css"} ,{"name":"@rel","content":"stylesheet"} ,{"name":"@href","content":"tree_files/style.css"} ] } , { "name":"script" ,"children": [ {"name":"@type","content":"text/javascript"} ,{"name":"@src","content":"Saxonce/Saxonce.nocache.js"} ] } , { "name":"script" ,"children": [ {"name":"@type","content":"text/javascript"} ,{"name":"@src","content":"d3.v3.min.js"} ] } , { "name":"style" ,"content":".node circle { cursor: pointer; fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font-size: 11px; } path.link { fill: none; stroke: #ccc; stroke-width: 1.5px; }","children": [ {"name":"@type","content":"text/css"} ] } ] } , { "name":"body" ,"children": [ { "name":"div" ,"children": [ {"name":"@id","content":"body"} , { "name":"div" ,"children": [ {"name":"@style","content":"float:left"} , { "name":"a" ,"content":"Click to see visualization of XSL","children": [ {"name":"@href","content":"index4.html"} ] } ] } , { "name":"div" ,"content":"Shows","content":"->JSON (via Saxon-CE","content":")->","children": [ {"name":"@style","content":"text-align:right;margin-right:20px"} , { "name":"a" ,"content":"HTML (This page)","children": [ {"name":"@href","content":"index3.html"} ] } , { "name":"a" ,"content":"XSL","children": [ {"name":"@href","content":"metadata.xsl"} ] } , { "name":"a" ,"content":"D3.js","children": [ {"name":"@href","content":"http://d3js.org/"} ] } ] } , { "name":"div" ,"children": [ {"name":"@id","content":"footer"} , { "name":"div" ,"content":"click or option-click to expand or collapse","children": [ {"name":"@class","content":"hint"} ] } ] } ] } , { "name":"script" ,"children": [ {"name":"@type","content":"text/javascript"} ] } ] } ] }

If you run the same XSLT on Saxon 9.4 server side you get:

{ "name":"html" ,"children": [
{ "name":"head" ,"children": [ { "name":"title" ,"content":"XML->JSON->Tree" }, { "name":"meta" ,"children": [ {"name":"@http-equiv","content":"Content-Type"} , {"name":"@content","content":"text/html;charset=utf-8"} ] } , { "name":"link" ,"children": [ {"name":"@type","content":"text/css"} , {"name":"@rel","content":"stylesheet"} , {"name":"@href","content":"tree_files/style.css"} ] } , { "name":"script" ,"children": [ {"name":"@type","content":"text/javascript"} , {"name":"@src","content":"Saxonce/Saxonce.nocache.js"} ] } , { "name":"script" ,"children": [ {"name":"@type","content":"text/javascript"} ,{"name":"@src","content":"d3.v3.min.js"} ] } , { "name":"style" ,"content":".node circle { cursor: pointer; fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node text { font-size: 11px; } path.link { fill: none; stroke: #ccc; stroke-width: 1.5px; }","children": [ {"name":"@type","content":"text/css"} ] } ] } , { "name":"body" ,"children": [ { "name":"div" ,"children": [ {"name":"@id","content":"body"} , { "name":"div" ,"children": [ {"name":"@style","content":"float:left"} , { "name":"a" ,"content":"Click to see visualization of XSL","children": [ {"name":"@href","content":"index4.html"} ] } ] } , { "name":"div" ,"content":"Shows","content":"->JSON (via Saxon-CE","content":")->","children": [ {"name":"@style","content":"text-align:right;margin-right:20px"} , { "name":"a" ,"content":"HTML (This page)","children": [ {"name":"@href","content":"index3.html"} ] } , { "name":"a" ,"content":"XSL","children": [ {"name":"@href","content":"metadata.xsl"} ] } , { "name":"a" ,"content":"D3.js","children": [ {"name":"@href","content":"http://d3js.org/"} ] } ] } , { "name":"div" ,"children": [ {"name":"@id","content":"footer"} , { "name":"div" ,"content":"click or option-click to expand or collapse","children": [ {"name":"@class","content":"hint"} ] } ] } ] } , { "name":"script" ,"content":"var m = [20, 120, 20, 120], w = 1280 - m[1] - m[3], h = 800 - m[0] - m[2], i = 0, json, root; var onSaxonLoad = function() { var xsl = Saxon.requestXML("metadata.xsl"); var xml = Saxon.requestXML("index3.html"); var proc = Saxon.newXSLT20Processor(xsl); var jsontext = proc.transformToFragment(xml,document).textContent; console.log(jsontext) json=JSON.parse(jsontext); doD3(); }; var tree = d3.layout.tree() .size([h, w]); // turn on its side var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y, d.x]; }); var vis = d3.select("#body").append("svg") .attr("width", w + m[1] + m[3]) .attr("height", h + m[0] + m[2]) .append("g") .attr("transform", "translate(" + m[3] + "," + m[0] + ")"); function doD3(){ root=json; root.x0 = h / 2; root.y0 = 0; function toggleAll(d) { if (d.children) { d.children.forEach(toggleAll); toggle(d); } } // Initialize the display to show a few nodes. root.children.forEach(toggleAll); toggle(root) // toggle(root.children[1]); // toggle(root.children[1].children[2]); // toggle(root.children[9]); // toggle(root.children[9].children[0]); update(root); }; function update(source) { // slows down transition if alt key is pressed var duration = d3.event && d3.event.altKey ? 1500 : 500; // Compute the new tree layout. var nodes = tree.nodes(root).reverse(); // Normalize for fixed-depth. nodes.forEach(function(d) { d.y = d.depth * 180; }); // Update the nodes… var node = vis.selectAll("g.node") .data(nodes, function(d) { return d.id || (d.id = ++i); }); // Enter any new nodes at the parent's previous position. var nodeEnter = node.enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; }) .on("click", function(d) { toggle(d); update(d); }); nodeEnter.append("circle") .attr("r", 1e-6) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); var text=nodeEnter.append("text") .attr("x", function(d) { return d.children || d._children ? -10 : 10; }) .attr("dy", ".35em") .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; }) .text(function(d) { return d.name; }) .attr("font-style",function(d) { if (d.name.indexOf('@')==0) { return "italic" } else {return "normal";} }) .attr("fill",function(d) { if (d.name.indexOf('@')==0) { return "red" } else {return "black";} }) .style("fill-opacity", 1e-6); text.append("title").text(function(d) { return d.content; }) // Transition nodes to their new position. var nodeUpdate = node.transition() .duration(duration) .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; }); nodeUpdate.select("circle") .attr("r", 4.5) .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; }); nodeUpdate.select("text") .style("fill-opacity", 1); // Transition exiting nodes to the parent's new position. var nodeExit = node.exit().transition() .duration(duration) .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; }) .remove(); nodeExit.select("circle") .attr("r", 1e-6); nodeExit.select("text") .style("fill-opacity", 1e-6); // Update the links… var link = vis.selectAll("path.link") .data(tree.links(nodes), function(d) { return d.target.id; }); // Enter any new links at the parent's previous position. link.enter().insert("path", "g") .attr("class", "link") .attr("d", function(d) { var o = {x: source.x0, y: source.y0}; return diagonal({source: o, target: o}); }) .transition() .duration(duration) .attr("d", diagonal); // Transition links to their new position. link.transition() .duration(duration) .attr("d", diagonal); // Transition exiting nodes to the parent's new position. link.exit().transition() .duration(duration) .attr("d", function(d) { var o = {x: source.x, y: source.y}; return diagonal({source: o, target: o}); }) .remove(); // Stash the old positions for transition. nodes.forEach(function(d) { d.x0 = d.x; d.y0 = d.y; }); } // Toggle children. function toggle(d) { if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } }","children": [ {"name":"@type","content":"text/javascript"} ] } ] } ] }

Why is CE not emitting content for the last script node, but server side is?

This is not about JS decoding the JSON, this is the text that is returned from Saxon.

p.s. I know my JSON is emitting multiple content keys, which is wrong for JSON (mixed content), I'll fix that later somehow.

RE: What am I doing wrong? - Added by Dino Fancellu over 7 years ago

Aha, 2 stops forward, 1 step back.

Put CDATA around my script. Now no parseError on either browser and end script has content! So putting CDATA around the script made it visible in CE. Odd.

However on FF, it seems to hang, then offers to kill script, say no, wait some more, then page comes up.

http://dinofancellu.com/demo/xml-visualization/index3.html

RE: What am I doing wrong? - Added by Dino Fancellu over 7 years ago

Its not a D3 issue, took out D3 here, just does transform and emits JSON

http://dinofancellu.com/demo/xml-visualization/index3ff.html

Fast on Chrome, hangy on FF.

RE: What am I doing wrong? - Added by Dino Fancellu over 7 years ago

I added scrolling, changed tree_files/style.css from overflow:hidden to auto

For those that haven't realized you can zoom in and out with ctrl-scroll wheel.

And in chrome at least you can print as pdf to get a lovely jaggy free pdf.

RE: What am I doing wrong? - Added by Michael Kay over 7 years ago

I don't have an answer to the question, but would make the observation that when you process the HTML5 DOM in Saxon-CE it will differ in many ways from the source tree you would see in Saxon server-side. That's because the HTML5 DOM isn't a literal representation of the markup in your HTML source. For example (classically) a table with no tbody or thead elements in the source HTML will acquire these child elements in the HTML DOM tree.

Whether something similar is going on for the script, I'm not sure. The HTML DOM is a strange beast.

    (1-20/20)

    Please register to reply