A few weeks ago, I was facing this problem - HTML is not rendering in Chrome and Safari while it works perfectly in Firefox and IE.
After did some study and some try and errors at last I got the solution. Using
JQuery Transform plugin .But still need to do some changes.
Once you downloaded it, open jquery.transform.js. Replace the var safariimportincludefix = function(xObj,rootConfig){} with
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;
};
Then just call the script from your html header. Below some codes that show how to execute it.
Snippet that demonstrates how to call jquery
var animalElementArray = response.getElementsByTagName("animal");
var animalTable = dojo.byId("animal");
var tbodyArray=animalTable.getElementsByTagName("tbody");
if (animalTable != null){
if (animalTable.getElementsByTagName("tbody")[0] != null){
var tbodysArray = animalTable.getElementsByTagName("tbody");
for(p=0;p< tbodysArray.length;p++){
animalTable.removeChild(tbodysArray[p]);
}
}
}
var newtbody;
if (animalTable.getElementsByTagName("tbody").length==0)
newtbody = document.createElement('tbody');
else {
newtbody=animalTable.getElementsByTagName("tbody")[0];
removeChildNodes(newtbody);
}
newtbody.setAttribute('id','animaltbody');
if(dojo.isChrome || dojo.isSafari){
xsl=loadXMLDoc("/xslt/animal.xslt");
try {
resultDocument= $.transform({el:"resultDocument",async:false, xmlobj: response.documentElement, xslobj: xsl,xslParams:{name:"cat",type:"mammal"}});
var tbody = resultDocument;
var animalTableParent = animalTable.parentNode;
animalTableParent.innerHTML = tbody;
}
catch (exception)
{
if (typeof (exception) == "object" && exception.message)
alert(exception.message);
else alert(exception);
}
}
Loading function.
function loadXMLDoc(file) {
var xmlDoc;
// code for IE
if (window.ActiveXObject) {
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.load(file);
}
// code for Mozilla, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument) {
var xmlhttp = new window.XMLHttpRequest();
xmlhttp.open("GET",file,false);
xmlhttp.send(null);
var xmlDoc = xmlhttp.responseXML.documentElement;
} else {
alert('Your browser cannot handle this script');
}
return(xmlDoc);
}
Of course I got it from Internet. You can google, but the fastest way you can refer here :
http://stackoverflow.com/questions/2042178/chrome-and-safari-xslt-using-javascript
http://daersystems.com/jquery/transform/
