XSLT Transformation using JQuery

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&lt;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&lt;imports.length;y++) {
                        if(!existingNames[imports[y].getAttribute("name")] &amp;&amp; !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/