XSLT and XML content using JavaScript not loading in Microsoft Edge browser, it's working fine on Internet Explorer.

Try to use the XSLTProcessor instead. See some examples here.

ActiveX is not supported in Microsoft Edge.

ActiveX is not supported in Chromium or Mozilla which means Microsoft Edge, Chrome and Firefox plus more.
Also you stylesheet may not be accepted as valid in those browsers. I could not find the exact reason.

I would also like to point out that your stylesheet is not a standardized XSLT stylesheet but a working draft one
check the namespace: xmlns:xsl="http://www.w3.org/TR/WD-xsl"
the namespace for an xslt is xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

Microsoft was the only company that ever published a processor for the XSLT working draft
(they were to early, too many changes to the standard would happen after)
They kept the working draft XSLT processor available (since there were too many customers already relying on it) alongside the standard XSLT processor after in msxml and IE. I believe they are now dropping support

If ever you want to use your stylesheet in edge or chrome... you will need to change the namespace

other changes you will need

<xsl:stylesheet
    version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

Select allOpen in new window

add the version and loose the language attribute

And you need to fix this line

<xsl:if expr="depth(this) > 2">

Select allOpen in new window

the @expr is no longer allowed, this needs to be test
and in order to have access to the depth function, you need to extend the processor to have access to the scripting engine. But that would bind your stylesheet to a specific processor again

If I understand your code well enough, I guess this should work

                <xsl:if test="count(ancestor::entity) > 2">

Select allOpen in new window

 

Hi,
ActiveX end of life was reached a few years ago for security reason.
So it may only work with old browsers / old OS and this would not be recommended for security reason.

There is no real replacement for ActiveX.
Maybe you can check advance Javascript (server side) to find so sort of replacement
or maybe create an Apps using React Native .

An old article that explain this
https://blogs.windows.com/msedgedev/2015/05/06/a-break-from-the-past-part-2-saying-goodbye-to-activex-vbscript-attachevent/

Thanks everyone for answering my question. Gertone, I tried your solution. Please find my latest code in the attachment. It's displaying the data in edge. It's showing data in expanded format. None of the javascript functions are working in Edge Browser. Data nodes should expand/collapse, clicking on each node open a webpage.
On clicking of any node, this is error showing. Please help me what needs to be done to fix this issue.
'Uncaught TypeError: entity.childNodes is not a function
    at collapse (tree.js)
    at clickOnEntity (tree.js)
    at expand(tree.js)
    at expandAll(tree.js)
    at HTMLDivElement.onclick

I want the data to be collapsed on page load.
like. Tree should look like
+ Sales
+ Service
 
Clicking on Sales expand that node
 -Sales
     - A_test1_test1
           + A_Product1
+ Service


tree.xml
tree.xsl

tree.js

function loadXMLDoc(filename) {
    if (window.ActiveXObject) {
        xhttp = new ActiveXObject("Microsoft.XMLDOM");
    }
    else {
        xhttp = new XMLHttpRequest();
    }
    xhttp.open("GET", filename, false);
    try { xhttp.responseType = "msxml-document" } catch (err) { } // IE11
    xhttp.send("");
    return xhttp.responseXML;
}
 
function initialize() {
    xml = loadXMLDoc("tree/tree.xml");
    xsl = loadXMLDoc("tree/tree.xsl");
 
    // code for IE
    if (window.ActiveXObject || "ActiveXObject" in window) {
        alert("ie")
        folderTree.innerHTML = xml.documentElement.transformNode(xsl)
    }
    // code for Edge, etc.
    else if (document.implementation && document.implementation.createDocument) {
        alert("edge")
        xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xsl);
        resultDocument = xsltProcessor.transformToFragment(xml, document);
        document.getElementById("folderTree").appendChild(resultDocument);
    }
 
}
 
 
 
function LinkToForms(keyId, pageName) {
       if ((keyId != null && keyId != "") && (pageName != null && pageName != "") ) {
           parent.frameName2.location.href = pageName + '?PrimaryKeyID=' + keyId;
 
       }
            
    return true;
}
 
function clickOnEntity(entity) {
      
  LinkToForms(entity.keyId, entity.linkPageName);
      
  if(entity.open == "false") {
    expand(entity, true)
  }
  else {
    collapse(entity)
  }
  window.event.cancelBubble = true
}
function redirect(pageName) {
    //Redirect to new page in same window.
       self.location.href = pageName;
}
 
function expand(entity) {
  var oImage
 
  oImage = entity.childNodes(0).all["image"]
  oImage.src = entity.imageOpen
 
  for(i=0; i < entity.childNodes.length; i++) {
    if(entity.childNodes(i).tagName == "DIV") {
      entity.childNodes(i).style.display = "block"
    }
  }
  entity.open = "true"
}
 
function collapse(entity) {
  var oImage
  var i
 
  oImage = entity.childNodes(0).all["image"]
  oImage.src = entity.image
 
  // collapse and hide children
  for(i=0; i < entity.childNodes.length; i++) {
      if(entity.childNodes(i).tagName == "DIV") {
        if(entity.id != "folderTree") entity.childNodes(i).style.display = "none"
        collapse(entity.childNodes(i))
      }
    }
  entity.open = "false"
}
 
function expandAll(entity) {
  var oImage
  var i
 
  expand(entity, false)
 
  // expand children
  for(i=0; i < entity.childNodes.length; i++) {
    if(entity.childNodes(i).tagName == "DIV") {
      expandAll(entity.childNodes(i))
    }
  }
}
 

Select allOpen in new window

Hi,

Please find the latest code of javascript. Data is showing in edge browser. Node clicks are not working. Please look into the javascript file and let me know how to fix the issue. None of the javascript functions are working now in edge browser.

Error : 'Uncaught TypeError: entity.childNodes is not a function
    at collapse (tree.js)
    at clickOnEntity (tree.js)
    at expand(tree.js)
    at expandAll(tree.js)
    at HTMLDivElement.onclick
tree.js

Hi experts,

Please find the latest code of javascript. Data is showing in edge browser. Node clicks are not working. Please look into the javascript file and let me know how to fix the issue. None of the javascript functions are working now in edge browser.
Please help me.

Error : 'Uncaught TypeError: entity.childNodes is not a function
    at collapse (tree.js)
    at clickOnEntity (tree.js)
    at expand(tree.js)
    at expandAll(tree.js)
    at HTMLDivElement.onclick
tree.js

Hi,

tree.js is a very old script (8 years) and it now archived (the author stop the dev).
So this is normal that the script is not compatible with newest browser.
I would replace the script by another one
Maybe JStree https://github.com/vakata/jstree/

Other
Jqtree https://mbraak.github.io/jqTree/

jQuery TreeView https://github.com/HasanDelibas/jQueryTreeView

Fancy tree https://github.com/mar10/fancytree
Tree view https://github.com/vsvvssrao/TreeView

I MAY have broken IE but this works in Chromium (Edge and Chrome) and Firefox

the biggest issues were the collections and .all instead of using array notation

I also changed the id="image" to class="image" in the xsl, since IDs need to be unique

https://plungjan.name/ee/xmlxsl/

//function initialize() {
//        var xmlDoc
//        var xslDoc
//        xmlDoc = new ActiveXObject('Microsoft.XMLDOM')
//        xmlDoc.async = false;
//        xslDoc = new ActiveXObject('Microsoft.XMLDOM')
//        xslDoc.async = false;

//        xmlDoc.load("tree/tree.xml")
//        xslDoc.load("tree/tree.xsl")
//        folderTree.innerHTML = xmlDoc.documentElement.transformNode(xslDoc)
//    }

var xsl;
var xsltProcessor = new XSLTProcessor();
var myDOM;
var xmlDoc;
function initialize() {
  // load the xslt file
  var myXMLHTTPRequest = new XMLHttpRequest();
  myXMLHTTPRequest.open("GET", "tree/tree.xsl", false);
  myXMLHTTPRequest.send(null);
  xsl = myXMLHTTPRequest.responseXML;
  xsltProcessor.importStylesheet(xsl);
  // load the xml file
  myXMLHTTPRequest = new XMLHttpRequest();
  myXMLHTTPRequest.open("GET", "tree/tree.xml", false);
  myXMLHTTPRequest.send(null);
  xmlDoc = myXMLHTTPRequest.responseXML;
  var fragment = xsltProcessor.transformToFragment(xmlDoc, document);
  document.getElementById("folderTree").textContent = "";
  myDOM = fragment;
  document.getElementById("folderTree").appendChild(fragment);
  // collapse
  const divs = document.querySelectorAll("div"); // newer browsers can do forEach here
  for (var i=0;i<divs.length;i++) collapse(divs[i]); 
}



function LinkToForms(keyId, pageName) {
  if ((keyId != null && keyId != "") && (pageName != null && pageName != "")) {
    //This links the category/product information to the admin screens using it's primary key.;
    parent.frameName2.location.href = pageName + '?PrimaryKeyID=' + keyId;
  }
  return true;
}

function clickOnEntity(entity) {
  LinkToForms(entity.keyId, entity.linkPageName);
  if (entity.open == "false") {
    expand(entity, true)
  } else {
    collapse(entity)
  }
  window.event.cancelBubble = true
}

function redirect(pageName) {
  //Redirect to new page in same window.
  self.location.href = pageName;
}

function expand(entity) {
  var oImage, i;
  oImage = entity.querySelector(".image")
  oImage.src = entity.imageOpen

  for (i = 0; i < entity.childNodes.length; i++) {
    if (entity.childNodes[i].tagName == "DIV") {
      entity.childNodes[i].style.display = "block"
    }
  }
  entity.open = "true"
}

function collapse(entity) {
  var oImage, i;

  oImage = entity.querySelector(".image")
  oImage.src = entity.image

  // collapse and hide children
  for (i = 0; i < entity.childNodes.length; i++) {
    if (entity.childNodes[i].tagName == "DIV") {
      if (entity.id != "folderTree") entity.childNodes[i].style.display = "none"
      collapse(entity.childNodes[i])
    }
  }
  entity.open = "false"

}

function expandAll(entity) {
  var oImage, i;

  expand(entity, false)

  // expand children
  for (i = 0; i < entity.childNodes.length; i++) {
    if (entity.childNodes[i].tagName == "DIV") {
      expandAll(entity.childNodes[i])
    }
  }
}
window.addEventListener("load", initialize)

Select allOpen in new window

Hi All,
I cannot use any extra plugin.
Please find my code Javascript, xml and xsl files
tree.js
tree.xsl
tree.xml
Tree data start coming, but none of the javascript functions are working. Its not passing any values.
'Uncaught TypeError: entity.childNodes is not a function
    at collapse (tree.js)
    at clickOnEntity (tree.js)
    at expand(tree.js)
    at expandAll(tree.js)
    at HTMLDivElement.onclick

I want the data to be collapsed on page load.
like. Tree should look like
+ Sales
+ Service
 
Clicking on Sales expand that node
 -Sales
     - A_test1_test1
           + A_Product1
+ Service

Try to replace

entity.childNodes(0)

Select allOpen in new window

by

entity.childNodes[0] 

Select allOpen in new window

This will require some adjustment to replace () by []

Did you see my example code?

To collapse just do

document.getElementById("folderTree").appendChild(fragment);
const divs = document.querySelectorAll("div"); // newer browsers can do forEach here
for (var i=0;i<divs.length;i++) collapse(divs[i]);

Select allOpen in new window

Hi Michel, I tried your solution. It works. expand/collapse are working, but it's not showing the proper images. Please find the complete code in zip as well as the TreeLayoutIn_InternetExplorer document and TreeLayoutIn_EdgeBrowser. I want the layout similar to IE browser.
1. on page load. All nodes are collapsed and only parent nodes will display Service and Sales with plus image.  Currently nodes are expanded on page load.
2. click on any of these nodes, will open the page in the right frame passing id and page name. ClickOnEntity is the function. currently its not working. Also, node will expand one level. expanded node image changes to minus image.

Please check the layouts and how to fix these issues.
Highly appreciate for your help.
Thanks
Tree_IE_Layout.docx
Tree_EdgeBrowser_Layout.docx
TestXMLInEdge.zip

It has REALLY been too long since I did any XSL..

You get "undefined" in the src here

<img border="0" class="image">
  <xsl:attribute name="src">
    <xsl:value-of select="image" />
  </xsl:attribute>
</img>

Select allOpen in new window

So I tweaked the XSL to use variables

<xsl:copy-of select="$image" />

Select allOpen in new window

and the JS to use getAttribute
https://plungjan.name/ee/xmlxsl/

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="tree">
  <xsl:apply-templates select="entity"/>
</xsl:template>

<xsl:template match="entity">
  <xsl:variable name="image"><xsl:value-of select="image"/></xsl:variable>
  <xsl:variable name="imageOpen"><xsl:value-of select="imageOpen"/></xsl:variable>
  <div onclick="window.event.cancelBubble = true;clickOnEntity(this);" onselectstart="return false" ondragstart="return false">
  <xsl:attribute name="image"><xsl:copy-of select="$image" /></xsl:attribute>
  <xsl:attribute name="imageOpen"><xsl:copy-of select="$imageOpen" /></xsl:attribute>
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="id">f<xsl:value-of select="@id"/></xsl:attribute>	<!--pre-pend "f" to entity id value. -->
 <!-- <xsl:attribute name="folderName"><xsl:value-of select="description/."/></xsl:attribute>-->
  <xsl:attribute name="keyId"><xsl:value-of select="@key-id"/></xsl:attribute>
  <xsl:attribute name="linkPageName"><xsl:value-of select="@link-page-name"/></xsl:attribute>	
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="style">
    padding-left: 20px;
    cursor: hand;
    <xsl:if test="count(ancestor::entity) > 2">
      display: none;
    </xsl:if>
  </xsl:attribute>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="middle">
          <img border="0" class="image">
            <xsl:attribute name="src">
              <xsl:copy-of select="$image" />
            </xsl:attribute>
          </img>
        </td>
        <td valign="middle" nowrap="true">
        <xsl:attribute name="style">
          padding-left: 7px;
          font-family: Verdana;
          font-size: 11px;
          font-color: black;
        </xsl:attribute>
        <xsl:value-of select="description"/></td>
      </tr>
    </table>
  <xsl:apply-templates select="entity"/>
  </div>
</xsl:template>

</xsl:stylesheet>

Select allOpen in new window

//function initialize() {
//        var xmlDoc
//        var xslDoc
//        xmlDoc = new ActiveXObject('Microsoft.XMLDOM')
//        xmlDoc.async = false;
//        xslDoc = new ActiveXObject('Microsoft.XMLDOM')
//        xslDoc.async = false;

//        xmlDoc.load("tree/tree.xml")
//        xslDoc.load("tree/tree.xsl")
//        folderTree.innerHTML = xmlDoc.documentElement.transformNode(xslDoc)
//    }
var xsl;
var xsltProcessor = new XSLTProcessor();
var myDOM;

var xmlDoc;

function initialize() {
    console.log("edge")
    // load the xslt file
    var myXMLHTTPRequest = new XMLHttpRequest();
    myXMLHTTPRequest.open("GET", "tree/tree.xsl", false);
    myXMLHTTPRequest.send(null);

    xsl = myXMLHTTPRequest.responseXML;
    xsltProcessor.importStylesheet(xsl);

    // load the xml file
    myXMLHTTPRequest = new XMLHttpRequest();
    myXMLHTTPRequest.open("GET", "tree/tree.xml", false);
    myXMLHTTPRequest.send(null);

    xmlDoc = myXMLHTTPRequest.responseXML;

    var fragment = xsltProcessor.transformToFragment(xmlDoc, document);

    document.getElementById("folderTree").textContent = "";

    myDOM = fragment;
    document.getElementById("folderTree").appendChild(fragment);
    const divs = document.querySelectorAll("div"); // newer browsers can do forEach here
    for (var i=0;i<divs.length;i++) collapse(divs[i]);
}



function LinkToForms(keyId, pageName) {
	if ((keyId != null && keyId != "") && (pageName != null && pageName != "") ) {
	    //This links the category/product information to the admin screens using it's primary key.;
	    parent.frameName2.location.href = pageName + '?PrimaryKeyID=' + keyId;

	}
		
    return true;
}

function clickOnEntity(entity) {
	
  LinkToForms(entity.keyId, entity.linkPageName);
   	
  if(entity.open == "false") {
    expand(entity, true)
  }
  else {
    collapse(entity)
  }
  window.event.cancelBubble = true
}
function redirect(pageName) {
    //Redirect to new page in same window.
	self.location.href = pageName;
}

function expand(entity) {
  var oImage, i;
  oImage = entity.querySelector(".image")
  oImage.src = entity.getAttribute('imageOpen');

  for(i=0; i < entity.childNodes.length; i++) {
    if(entity.childNodes[i].tagName == "DIV") {
      entity.childNodes[i].style.display = "block"
    }
  }
  entity.open = "true"
}

function collapse(entity) {
  var oImage, i;

  oImage = entity.querySelector(".image")
  oImage.src = entity.getAttribute('image')

  // collapse and hide children
  for(i=0; i < entity.childNodes.length; i++) {
      if(entity.childNodes[i].tagName == "DIV") {
        if(entity.id != "folderTree") entity.childNodes[i].style.display = "none"
        collapse(entity.childNodes[i])
      }
    }
  entity.open = "false"
 
}

function expandAll(entity) {
  var oImage, i;

  expand(entity, false)

  // expand children
  for(i=0; i < entity.childNodes.length; i++) {
    if(entity.childNodes[i].tagName == "DIV") {
      expandAll(entity.childNodes[i])
    }
  }
}
window.addEventListener("load",initialize)

Select allOpen in new window

Thanks a lot. I tried to use the same code. Images are coming up correctly.
On Page load, its still showing the tree in expanded mode , so I modify this section in xsl.
<xsl:if test="count(ancestor::entity) > 2"> to <xsl:if test="count(ancestor::entity) > 0">
This is just showing two parent nodes Service and Sales with plus image.

Issue1 : To expand the tree first time, why I need to click the node Service or  Sales two times. After that its working fine.

Issue 2: Also, its not opening the pages on the right frame on click of node. Node click should have page information and node id information. Its calling 'ClickonEntity' function.
Error: Cannot set properties of null (setting 'src') at collapse at initialize at onload.

thanks

If you use my xml, xsl and script, it seem to work as you suggest at my site. I do not understand what your problem is

Currently node click is not opening page on the right frame. This function is not working
KeyId , Page Name information is coming from xml for each node.



function LinkToForms(keyId, pageName) {    if ((keyId != null && keyId != "") && (pageName != null && pageName != "") ) {  parent.frameName2.location.href = pageName + '?PrimaryKeyID=' + keyId;    }            return true; } function clickOnEntity(entity) {       LinkToForms(entity.keyId, entity.linkPageName);          if(entity.open == "false") {     expand(entity, true)   }   else {     collapse(entity)   }   window.event.cancelBubble = true } function redirect(pageName) {     //Redirect to new page in same window.    self.location.href = pageName; }
Thanks a lot.

Since I did not have the complete HTML, I did not notice it.
Again you need getAttribute

https://plungjan.name/ee/xmlxsl/

LinkToForms(entity.getAttribute("keyId"), entity.getAttribute("linkPageName"));

Select allOpen in new window

        
I recommend to use data-attributes instead. then you can use
entity.dataset.linkPageName instead

Hi Michel,
Everything is working fine. Only one issue:
I tried everything. I am not sure what is missing. On Page load, it's showing nodes in expanded mode. I want a tree in collapse mode. Only Parent nodes need to display.
+ Service
+ Sales 
Please find the code in the zip file.
TestXMLInEdge.zip

Thanks a lot for all the help.

Your code does not work.
https://plungjan.name/ee/xmlxsl1/

What is swapClass and why do you not have an image attribute

Why do you not use my code which works?

https://plungjan.name/ee/xmlxsl/

Please provide your  tree.js and tree.xsl file. I will verify if there is any difference in code.

Thanks

Thanks for all the help Michel. You are the best expert who helped me in fixing my issue.
Problem was coming as my HTML files have multiple <DIV's>.  

Its working perfectly. 

Great news! Happy to help