Chrome and Safari XSLT using JavaScript - javascript

I have the following code that applies a XSLT style
Test.Xml.xslTransform = function(xml, xsl) {
try {
// code for IE
if (window.ActiveXObject) {
ex = xml.transformNode(xsl);
return ex;
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToFragment(xml, document);
return resultDocument;
}
} catch (exception) {
if (typeof (exception) == "object") {
if (exception.message) {
alert(exception.message);
}
} else {
alert(exception);
}
}
The code is working in IE and firefox but not in Chrome and Safari. Any ideas why?
Update
ResultDocument = xsltProcessor.transformToFragment(xml, document);
The line above is returning null. No error is being thrown.
Update
The code is not working as the xslt file contains xsl:include. Need to find a way to get the include working I will paste progress here
Update
It has been recomended that I use the http://plugins.jquery.com/project/Transform/ plugin. I am trying to use the client side libary as the example of include works here (http://daersystems.com/jquery/transform/).
The code works in IE but still not in chrome.
Test.Xml.xslTransform = function(xml, xsl) {
try {
$("body").append("<div id='test' style='display:none;'></div>");
var a = $("#test").transform({ xmlobj: xml, xslobj: xsl });
return a.html();
}
catch (exception) {
if (typeof (exception) == "object") {
if (exception.message) {
alert(exception.message);
}
} else {
alert(exception);
}
}
}
xml and xsl are both objects being passed in.
Update
I tried changing the XSL file to being something very simple with no include and Chrome is still not applying the stylesheet and IE is. The XSL that is being brought in as an object is:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:rs="urn:schemas-microsoft-com:rowset"
xmlns:z="#RowsetSchema"
xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:spsoap="http://schemas.microsoft.com/sharepoint/soap/"
>
<xsl:output method="html"/>
<xsl:template match="/">
<h1>test</h1>
</xsl:template>
</xsl:stylesheet>
Update
The end result that I want is for the xsl to be applied to the xml file. The xsl file has in it includes. I want the trasnfer to happen on the client ideally.
Updated
Rupert could you update the question with the xml and how you're calling Test.Xml.xslTransform ?
I got the xml using ie8
<?xml version="1.0"?>
<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"><soap:Body><SearchListItemsResponse xmlns="http://schemas.microsoft.com/sharepoint/soap/"><SearchListItemsResult><listitems xmlns:s="uuid:BDC6E3F0-6DA3-11d1-A2A3-00AA00C14882" xmlns:dt="uuid:C2F41010-65B3-11d1-A29F-00AA00C14882" xmlns:rs="urn:schemas-microsoft-com:rowset" xmlns:z="#RowsetSchema">
<rs:data ItemCount="1">
<z:row ows_Title="Test" ows_FirstName="Test 4" ows_UniqueId="74;#{1A16CF3E-524D-4DEF-BE36-68A964CC24DF}" ows_FSObjType="74;#0" ows_MetaInfo="74;#" ows_ID="74" ows_owshiddenversion="10" ows_Created="2009-12-29 12:21:01" ows_FileRef="74;#Lists/My List Name/74_.000" ReadOnly="False" VerificationRequired="0"/>
</rs:data>
</listitems></SearchListItemsResult></SearchListItemsResponse></soap:Body></soap:Envelope>
The code is being called as follows:
xsl = Test.Xml.loadXMLDoc("/_layouts/xsl/xsl.xslt");
var doc = Test.Xml.xslTransform(xData.responseXML, xsl);
xData is the xml returned by a web service.

If your XSLT is using xsl:include you might receive weird unexplainable errors but always with the same end result: your transformation failing.
See this chromium bug report and please support it!
http://code.google.com/p/chromium/issues/detail?id=8441
The bug is actually in webkit though. For more info here's another link which goes into more detail why it doesn't work.
The only way around this is to pre-process the stylesheet so that it injects the included stylesheets. Which is what a crossbrowser XSLT library like Sarissa will do for you automatically.
If your looking for jQuery solution:
http://plugins.jquery.com/project/Transform/ is a cross browser XSL plug-in. I've succesfully used this to get xsl:include working in the past without much hassle. You don't have to rewrite your xsl's this plugin will pre-process them for you. Definitely worth looking at as it's more lightweight then Sarissa.
UPDATE:
<html>
<head>
<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript" src="jquery.transform.js"></script>
<script type="text/javascript">
function loadXML(file)
{
var xmlDoc = null;
try //Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load(file);
}
catch(e)
{
try //Firefox, Mozilla, Opera, etc.
{
xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async=false;
xmlDoc.load(file);
}
catch(e)
{
try //Google Chrome
{
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET",file,false);
xmlhttp.send(null);
xmlDoc = xmlhttp.responseXML.documentElement;
}
catch(e)
{
error=e.message;
}
}
}
return xmlDoc;
}
function xslTransform(xmlObject, xslObject)
{
try
{
$("body").append("<div id='test'></div>");
var a = $("#test").transform({ xmlobj: xmlObject, xslobj: xslObject });
}
catch (exception)
{
if (typeof (exception) == "object" && exception.message)
alert(exception.message);
else alert(exception);
}
}
var xmlObject = loadXML("input.xml");
var xslObject = loadXML("transform.xsl");
$(document).ready(function()
{
xslTransform(xmlObject, xslObject);
});
</script>
</head>
<body>
</body>
</html>
This test html page works both in Chrome/FireFox/IE.
input.xml is just a simple xml file containing <root />
transform.xsl is the stripped down xsl you posted.
EDIT
It does however seem the $.transform has problems importing stylesheets from included files:
Here's how to fix this:
Locate
var safariimportincludefix = function(xObj,rootConfig) {
in jquery.transform.js and replace the entire function with this:
var safariimportincludefix = function(xObj,rootConfig) {
var vals = $.merge($.makeArray(xObj.getElementsByTagName("import")),$.makeArray(xObj.getElementsByTagName("include")));
for(var x=0;x<vals.length;x++) {
var node = vals[x];
$.ajax({
passData : { node : node, xObj : xObj, rootConfig : rootConfig},
dataType : "xml",
async : false,
url : replaceref(node.getAttribute("href"),rootConfig),
success : function(xhr) {
try {
var _ = this.passData;
xhr = safariimportincludefix(xhr,_.rootConfig);
var imports = $.merge(childNodes(xhr.getElementsByTagName("stylesheet")[0],"param"),childNodes(xhr.getElementsByTagName("stylesheet")[0],"template"));
var excistingNodes = [];
try
{
var sheet = _.xObj;
var params = childNodes(sheet,"param");
var stylesheets = childNodes(sheet,"template");
existingNodes = $.merge(params,stylesheets);
}
catch(exception)
{
var x = exception;
}
var existingNames = [];
var existingMatches = [];
for(var a=0;a<existingNodes.length;a++) {
if(existingNodes[a].getAttribute("name")) {
existingNames[existingNodes[a].getAttribute("name")] = true;
} else {
existingMatches[existingNodes[a].getAttribute("match")] = true;
}
}
var pn = _.node.parentNode;
for(var y=0;y<imports.length;y++) {
if(!existingNames[imports[y].getAttribute("name")] && !existingMatches[imports[y].getAttribute("match")]) {
var clonednode = _.xObj.ownerDocument.importNode(imports[y],true);
//pn.insertBefore(clonednode,_.xObj);
pn.insertBefore(clonednode,childNodes(_.xObj,"template")[0]);
}
}
pn.removeChild(_.node);
} catch(ex) {
}
}
});
}
return xObj;
};
Now using the previously pasted test index.html use this for transform.xsl:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
>
<xsl:include href="include.xsl" />
<xsl:output method="html"/>
<xsl:template match="/">
<xsl:call-template name="giveMeAnIncludedHeader" />
</xsl:template>
</xsl:stylesheet>
And this for include.xsl
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template name="giveMeAnIncludedHeader">
<h1>Test</h1>
</xsl:template>
</xsl:stylesheet>
With the previously posted fix in jquery.transform.js this will now insert the included <h1>Test</h1> on all the browsers.
You can see it in action here: http://www.mpdreamz.nl/xsltest

This is not an answer to the original question but during my search over internet looking for a sample xslt transformation that works on chrome I found links to this thread many times. I was looking for a solution that doesn't use any open-source or third party libraries/plugins and works well with silverlight.
The problem with chrome and safari is the limitation that prevents loading xml files directly. The suggested workaround at http://www.mindlence.com/WP/?p=308 is to load the xml file via any other method and pass it as a string to the xslt processor.
With this approach I was able to perform xsl transformations in javascript and pass on the result to silverlight app via HTML Bridge.

Related

tvOS not loading external TVML file

While creating a new Client-Server tvOS App, tvOS will not get the data from my external tvml file. This is the Error: ITML <Error>: Failed to load launch URL with error: (null)
This is the main.js code
function getDocument(url) {
var templateXHR = new XMLHttpRequest();
templateXHR.responseType = "document";
templateXHR.addEventListener("load", function() {pushDoc(templateXHR.responseXML);}, false);
templateXHR.open("GET", url, true);
templateXHR.send();
return templateXHR;
}
function pushDoc(document) {
navigationDocument.pushDocument(document);
}
App.onLaunch = function(options) {
var templateURL = 'niclasblog.com/appletv/main.tvml';
getDocument(templateURL);
}
App.onExit = function() {
console.log('App finished');
}
And I have attached the main.tvml file as well
<document>
<alertTemplate>
<title>Test</title>
<description>This is a test</description>
<button>
<text>Yes</text>
</button>
<button>
<text>No</text>
</button>
</alertTemplate>
</document>
That code is directly from the Apple Documentation, so I do not know why it is not working.
In your App.onLaunch function you could get the BASEURL and use this for loading all your assets:
App.onLaunch = function(options) {
var BASEURL = options.BASEURL;
// etc.
}
You can also consider a different approach to loading templates. Consider using a DOMParser to parse an XML String. This way you can write Multiline template strings with "real" content e.g.
getDocument(options) {
let parser = new DOMParser();
let templateString = `<?xml version="1.0" encoding="UTF-8" ?>
<document>
<alertTemplate>
<description>${options.translate.errorRandomErrorAlertText}</description>
<button>
<text>${options.translate.utilOk}/text>
</button>
</alertTemplate>
</document>`;
return parser.parseFromString(templateString, "application/xml");
}
I've written a generator for specfically for Apple TVML apps using es6, its still early in its development, but might help you get started.
Try replacing this
var templateURL = 'niclasblog.com/appletv/main.tvml';
with fully qualified URI
var templateURL = 'https://niclasblog.com/appletv/main.tvml';
Also
templateXHR.responseType = "document";
is not needed as that seem to be the default behavior.

AJAX Error when attempting to read xml file

I'm trying to retrieve some data from an xml file using ajax
<?xml version="1.0" encoding=UTF-8"?>
<user>
<u_idno>1</u_idno>
<u_name>nobody</u_name>
<u_srnm>nothing</u_srnm>
<u_role>linux</u_role>
</user>
<user>
<u_idno>2</u_idno>
<u_name>yesbody</u_name>
<u_srnm>something</u_srnm>
<u_role>administrator</u_role>
</user>
but I am getting an error
Uncaught TypeError: Cannot read property 'getElementsByTagName' of null
I am unsure why it would say null and I've been googling furiously to find out what I've done wrong but I'm clueless. My javascript is as followed
function f_ajax() {
var lv_request;
try {
lv_request = new XMLHttpRequest();
} catch (error) {
lv_request = new ActiveXObject("Microsoft.XMLHTTP");
}
lv_request.onreadystatechange = function() {
if(lv_request.readyState == 4 && lv_request.status == 200) {
lv_xml = lv_request.responseXML;
lv_row = lv_xml.getElementsByTagName("user");
lv_output = null;
for (lv_cnt = 0; lv_cnt < lv_row.length; lv_cnt++) {
lv_output = lv_output + lv_row[lv_cnt].childNodes[0].nodeValue;
}
document.getElementById("h2_ajax").innerHTML = lv_row;
}
}
lv_request.open("GET", "data.xml", true);
lv_request.send();
};
f_ajax();
Your XML is not well formed. It is missing a root and has some other issues. Try this:
<?xml version="1.0" encoding="UTF-8"?>
<root>
<user>
<u_idno>1</u_idno>
<u_name>nobody</u_name>
<u_srnm>nothing</u_srnm>
<u_role>linux</u_role>
</user>
<user>
<u_idno>2</u_idno>
<u_name>yesbody</u_name>
<u_srnm>something</u_srnm>
<u_role>administrator</u_role>
</user>
</root>

responseXML is returning null

I am trying to parse xml data with javascript in ajax call.But responseXML is returning null value.Here is my code
<script language="javascript">
if(window.addEventListener)
{
window.addEventListener("load",getXML,false);
}
else if(window.attachEvent)
{
window.attachEvent("onload",getXML);
}
function getXML()
{
var xhr = new XMLHttpRequest();
xhr.open("GET","myxml.xml",true);
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4)
{
//alert("got response");
var root = xhr.responseXML;
alert(root);
}
}
xhr.send(null);
}
</script>
Here is my "myxml.xml" file
<?xml version="1.0" encoding="iso-8859-1"?>
<root>
<child-1>
<grandChild1_1>textOfGrandChild1_1</grandchild1_1>
<grandChild2_1>textOfGrandChild2_1</grandchild2_1>
<grandChild3_1>textOfGrandChild3_1</grandchild3_1>
</child-1>
<child-2>
<grandChild1_2>textOfGrandChild1_2</grandchild1_2>
<grandChild2_2>textOfGrandChild2_2</grandchild2_2>
<grandChild3_2>textOfGrandChild3_2</grandchild3_2>
</child-2>
<child-3>
<grandChild1_3>textOfGrandChild1_3</grandchild1_3>
<grandChild2_3>textOfGrandChild2_3</grandchild2_3>
<grandChild3_3>textOfGrandChild3_3</grandchild3_3>
</child-3>
</root>
When I tried with
alert(xhr.responseText)
it showed the xml file as it is.But when using responseXML it is giving null value.Where is the problem?
Your XML is invalid, Case matters
<grandChild1_1>textOfGrandChild1_1</grandchild1_1>
^ ^
All the closing tags have the wrong camel case in the names.
Your XML was incorrect, beacuse it is case sensitive, changed grandchild1_1 to grandChild1_1 and it worked.
<?xml version="1.0" encoding="iso-8859-1"?>
<root>
<child-1>
<grandChild1_1>textOfGrandChild1_1</grandChild1_1>
<grandChild2_1>textOfGrandChild2_1</grandChild2_1>
<grandChild3_1>textOfGrandChild3_1</grandChild3_1>
</child-1>
<child-2>
<grandChild1_2>textOfGrandChild1_2</grandChild1_2>
<grandChild2_2>textOfGrandChild2_2</grandChild2_2>
<grandChild3_2>textOfGrandChild3_2</grandChild3_2>
</child-2>
<child-3>
<grandChild1_3>textOfGrandChild1_3</grandChild1_3>
<grandChild2_3>textOfGrandChild2_3</grandChild2_3>
<grandChild3_3>textOfGrandChild3_3</grandChild3_3>
</child-3>
Here is the Plunker
Thanks!

Load an xml file with javascript in XSLT

I am stuck at this. I have an XSLT file that uses an XML file to retrieve data from it.
IN this XSLT file is also a javascript. It's purpose is to create counters to the 'for each' statement in the XSLT.
Now I need to add a feature to the javascript that gets a specific entry from the XML file.
I will paste a part of the xml here so I can explain further.
<ROW>
<Date>03-12-2013</Date>
<School>SvR</School>
<Locale>B1.04</Locale>
<Class>1236VUGK16</Class>
<Time>09:00-16:00</Time>
</ROW>
I need to get the data from "Date". But I do not know how to load an xml file in javascript to achieve this. I've found some html codes that tell me to xmlDoc.load will do this, but it does not. It will give me a syntax error. Is this because it is in XSLT? How can I achieve what I want?
you need 4 things
data.xml -> XML file
Openxml.js -> contains funciton to open Javascript
filejs.js -> contains function to read/write and others things with data.
index.html -> show information
part 1, your xml file:
<?xml version="1.0" encoding="UTF-8"?>
<events>
<ROW>
<Date>03-12-2013</Date>
<School>SvR</School>
<Locale>B1.04</Locale>
<Class>1236VUGK16</Class>
<Time>09:00-16:00</Time>
</ROW>
</events>
part 2:
unction OpenFile(fichXML)
{
var xmlDoc=undefined;
try
{
if (document.all) //IE
{
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
}
else //firefox
{
xmlDoc = document.implementation.createDocument("","",null);
}
xmlDoc.async=false;
xmlDoc.load(fichXML);
}
catch(e)
{
try { //otros safari, chrome
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET",fichXML,false);
xmlhttp.send(null);
xmlDoc = xmlhttp.responseXML.documentElement;
return xmlDoc;
}
catch (e)
{
return undefined;
}
}
return xmlDoc;
}
part 3:
function Event(date)
{
this.date = date;
}
//funciton to charge XMLElements
function ChargeXMLElements()
{
try
{
xmlDoc=OpenFile("data.xml");
eventosXML=xmlDoc.getElementsByTagName('ROW');
if (eventosXML.length>0)
{
eventos=new Array(); //clase con los datos cargados
}
for(var i=0; i< eventosXML.length; i++)
{
xmlEvento=eventosXML[i];
fecha=xmlEvento.getElementsByTagName("DATE")[0].firstChild.nodeValue;
evento = new Evento(fecha);
eventos.push(evento);
}
return eventos;
}
catch(e)
{
alert("Error on the load data");
}
}
//show information take on previously function, and show on a table (with only 1 column)
function showinformation()
{
var tr;
var td;
var tabla;
var l=0;
ev= CargarXMLEventos();
auxUnEven=ev.pop();
tabla=document.getElementById("datos");
while (auxUnEven!=undefined)
{
tr=tabla.insertRow(l);
//creamos las columnas de la tabla
td=tr.insertCell(0);
td.innerHTML=auxUnEven.date;
/*td=tr.insertCell(1);
td.innerHTML=auxUnEven.hora;
td=tr.insertCell(2);
td.innerHTML=auxUnEven.comentario; */ //if you need more columns
l++;
auxUnEven=ev.pop();
}
if (l==0)
{
tabla=document.getElementById("datos");
tr=tabla.insertRow(l);
td=tr.insertCell(0);
td.innerHTML=" dont have events ";
}
}
part 4:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>example XML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="filejs.js"></script>
<script type="text/javascript" src="Openxml.js"></script>
</head>
<body>
<table id="datos">
<script type="text/javascript">
showinformation();
</script>
</table>
</body>
</html>
i think that is functional but i don't know. I see the information here: http://elcaminillo.wordpress.com/2012/01/15/leer-xml-en-javascript/ (spanish, sorry)

How can I traverse XML in an HTML document?

I need to save the data offline, so I save the data as XML. I don't know how to get the XML object with JavaScript.
<xml id=xmlData>
<data>
<tb1>
<id>1</id>
<name>1</name>
</tb1>
<tb1>
<id>2</id>
<name>2</name>
</tb1>
</data>
</xml>
<html id="MainForm">
<head id="Head1">
</head>
<body>
<script type="text/javascript">
var xmlDoc;
// code for IE
if (window.ActiveXObject)
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation.createDocument)
{
xmlDoc=document.implementation.createDocument("","",null);
}
else
{
alert('Your browser cannot handle this script');
}
xmlDoc.async=false;
xmlDoc.load("");//how can i get the xml?
var x=xmlDoc.documentElement.childNodes;
for (var i=0;i<x.length;i++)
{
if (x[i].nodeType==1)
{
//Process only element (nodeType 1) nodes
document.write(x[i].nodeName + ": ");
document.write(x[i].childNodes[0].nodeValue);
document.write("<br />");
}
}
</script>
</body>
</html>
Try this:
var txt='<xml id=xmlData><data><tb1><id>1</id> <name>1</name></tb1><tb1><id>2</id><name>2</name></tb1></data></xml>';
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}
var x=xmlDoc.documentElement.childNodes;
for (var i=0;i<x.length;i++)
{
if (x[i].nodeType==1)
{
//Process only element (nodeType 1) nodes
console.log(x[i].nodeName + ": ");
console.log(x[i].childNodes[0].nodeValue);
console.log("<br />");
}
}
Fiddle: http://jsfiddle.net/hB5E9/
I use a local variable in the document to do this. If you can get the XML as a string property of an object then this might be useful -
I have a somewhat similar usage in my application. I read an "XML" column from the SQL Azure DB through a service call and I get this XML data as a "string" property of the service return object.
Here is what I am doing to read that :
_LocalVariable= XMLFromString(DataObject.Filter);
$.each($(_LocalVariable).find("Filter"),
function (index,filterDataItem) {
$filterDataItem =$(filterDataItem);
var tFilterType =$filterDataItem.find("FilterType").attr("class");
var tOperator = $filterDataItem.find("Operator").attr("class");
var tValue = $filterDataItem.find("Value").text();
// Do more operations
});
//--------------------------------------------------------------------------------
//Parse XML from String
//--------------------------------------------------------------------------------
function XMLFromString(pXMLString) {
if (!pXMLString)
pXMLString = "<FilterRule></FilterRule>";
if (window.ActiveXObject) {
var oXML = new ActiveXObject("Microsoft.XMLDOM");
oXML.loadXML(pXMLString);
return oXML;
} else {
return (new DOMParser()).parseFromString(pXMLString, "text/xml");
}
}
Where my XML in the database is something like this -
<FilterRule>
<Filter id="1">
<FilterType id="AB11">Ranking</FilterType>
<Operator id="1">Equal To</Operator>
<Value>1</Value>
</Filter>
<Filter id="2">
<FilterType id="AB22">Segment</FilterType>
<Operator id="1">Equal To</Operator>
<Value>2</Value>
</Filter>
<Logic>Or</Logic>
</FilterRule>

Categories

Resources