Solved

[MSXML] Copying XHTML node to the document

Posted on 2004-04-15
15
426 Views
Last Modified: 2013-12-16
After loading the xml document, i try to clone a node from that document to a variable in the script to later on append it to the window.document. The node in question is a xhtml element type node.

It works perfect (..well as expected :| ) in Mozilla, but in IE i get the error:"No such interface suported."
Wich references to line where i try to append it as a child of another element in the window.document tree;

Anyone familiar with this problem?
0
Comment
Question by:MMeijer
  • 6
  • 4
  • 4
  • +1
15 Comments
 
LVL 5

Expert Comment

by:alambres
ID: 10832199
send code, please
0
 
LVL 5

Author Comment

by:MMeijer
ID: 10832619
test.htm file:
8><---------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
      <head>
            <title>EE</title>
      </head>
      <body >

            <script type="text/javascript">
                  
function ElementControl()
{
      this.element = document.createElement("div");
      
      this.fromXmlFile = function(sXml)
      {
            var blnMs     = (navigator.appName.toLowerCase().indexOf("microsoft")!=-1);
            var blnLoaded = false;
            var objXmlDoc = null;

            if(blnMs)
                  objXmlDoc = new ActiveXObject("microsoft.xmldom");
            else
                  objXmlDoc = document.implementation.createDocument("", "", null);

            objXmlDoc.async = false;

            blnLoaded = objXmlDoc.load(sXml)
            
            if(!blnLoaded)
            {
                  var strErrMessage = "Failed to load XML";
                  if(objXmlDoc.parseError)
                        strErrMessage += ", reason: " + objXmlDoc.parseError.reason;

                  return this.onerror(strErrMessage);
            }
            void this.fromXmlDomNode(objXmlDoc.documentElement);
      }

      this.fromXmlDomNode = function(oNode)
      {
            if(oNode==undefined || oNode==null || oNode.nodeName!="div")
                  return;

            this.element = oNode.cloneNode(true);
      }
      
      this.render = function(oParent)
      {
            objParent = oParent? oParent: document.body;
            void objParent.appendChild(this.element);
      }

      this.onerror = function(){return;}
}


var objControl = new ElementControl()

objControl.onerror = function(e)
{
      alert(e);
}


window.onload = function()
{
      void objControl.fromXmlFile("test.xml");
      objControl.render();      
}

            </script>
            
      </body>
</html>
---------------------------------------------------><8

test.xml file:
8><---------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<div xmlns="http://www.w3.org/1999/xhtml">Hello world!</div>
---------------------------------------------------><8

in mozilla this will write "Hello world!", in IE the error happense
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10832643
The tree model is slightly different in both browsers, so we need the code to help you speciffic.

0
NFR key for Veeam Backup for Microsoft Office 365

Veeam is happy to provide a free NFR license (for 1 year, up to 10 users). This license allows for the non‑production use of Veeam Backup for Microsoft Office 365 in your home lab without any feature limitations.

 
LVL 63

Expert Comment

by:Zvonko
ID: 10833408
You have to extend the render() method:

   
     this.render = function(oParent){
         objParent = (oParent)? oParent: document.body;
         newNode = document.createElement(this.element.nodeName);
         txtNode = document.createTextNode(this.element.text);
         newNode.appendChild(txtNode);
         objParent.appendChild(newNode);
    }


The only reason I can imagine for this is that the IE enforces that child nodes belong to same parent document.
Therefore you have to recreate the child node:
http://www.zvon.org/xxl/DOM2reference/DOM2/Output/data/interfaces/Node.html#appendChild




0
 
LVL 5

Expert Comment

by:alambres
ID: 10833522
what about attributes? This way you'd lost'em
0
 
LVL 5

Expert Comment

by:alambres
ID: 10833613
NS + IE way (til this moment we got only NS/Mozilla way and only IE way):

 this.render = function(oParent)
      {
         objParent = (oParent)? oParent: document.body;
         newNode = document.createElement(this.element.nodeName);
         newNode.innerHTML =  (navigator.appName == 'Netscape')?this.element.innerHTML:this.element.text;
         objParent.appendChild(newNode);
      }

can't make it work in Opera
0
 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 250 total points
ID: 10833627
Or you move to copy functionality in the create function.
Like this:


    this.fromXmlDomNode = function(oNode){
         if(oNode==undefined || oNode==null || oNode.nodeName!="div")
              return;

         newNode = document.createElement(oNode.nodeName);
         txtNode = document.createTextNode(oNode.firstChild.nodeValue);
         newNode.appendChild(txtNode);
         this.element = newNode;
    }
   
     this.render = function(oParent){
         objParent = oParent? oParent: document.body;
         void objParent.appendChild(this.element);
    }

0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10833630
And the last is tested in IE6.0 and Mozilla1.5
0
 
LVL 5

Accepted Solution

by:
alambres earned 250 total points
ID: 10833684
we're getting lost the attributes. You'll see, change the sample xml :
<div style="color:red" xmlns="http://www.w3.org/1999/xhtml">Hello world!</div>

no red font!
0
 
LVL 7

Expert Comment

by:searlas
ID: 10834808
Maybe you two can (Zvonko, alambres) can extract something useful from:

http://www.howtocreate.co.uk/tutorials/jsexamples/importingXML.html

Though, it does look at first glance that copying over attributes would probably be a manual exercise.
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10835263
Generally does this question belong into XML topic area:
http://www.experts-exchange.com/Web/Web_Languages/XML/

0
 
LVL 5

Author Comment

by:MMeijer
ID: 10835692
microsoft domdocument cannot exchange nodes with window.document, atleast not with a simple cloneNode or reference.
Mozilla's domdocument can, but need's a namespaceURI
I've solved this with a function (attached to the ElementControl object):
---------------------------
      this.importNode = function(oNode)
      {
            if(oNode==undefined || oNode==null)
                  return null;

            var objNodeResult = null;

            if(oNode.nodeType == 1)
            {
                  objNodeResult = document.createElement(oNode.nodeName);
                  for(var i=0; i<oNode.attributes.length; i++)
                        void objNodeResult.setAttribute(oNode.attributes[i].name, oNode.attributes[i].value)

                  for(var i=0; i<oNode.childNodes.length; i++)
                        void objNodeResult.appendChild(this.importNode(oNode.childNodes[i]));
            }
            
            if(oNode.nodeType == 3)
            {
                  objNodeResult = document.createTextNode(oNode.nodeValue);
            }

            return objNodeResult;
      }

---------------------------
this function chages to
---------------------------

     this.fromXmlDomNode = function(oNode)
     {
          if(oNode==undefined || oNode==null || oNode.nodeName!="div")
               return;

          this.element = this.importNode(oNode)
     }

---------------------------

now i can write partial HTML document in the xml file, but another problem shows the style attribute doesnt work with IE
0
 
LVL 5

Author Comment

by:MMeijer
ID: 10835954
last changes to the importNode function
---------------------------

      this.importNode = function(oNode)
      {
            if(oNode==undefined || oNode==null)
                  return null;

            var objNodeResult = null;
            var blnMs     = (navigator.appName.toLowerCase().indexOf("microsoft")!=-1);

            if(oNode.nodeType == 1)
            {
                  objNodeResult = document.createElement(oNode.nodeName);
                  for(var i=0; i<oNode.attributes.length; i++)
                  {
                        if(blnMs && (oNode.attributes[i].name.toLowerCase() == "class" || oNode.attributes[i].name.toLowerCase() == "style" || oNode.attributes[i].name.substr(0,2).toLowerCase()=="on"))
                        {
                              if(oNode.attributes[i].name.toLowerCase() == "class")
                                    objNodeResult.className = oNode.attributes[i].value;

                              if(oNode.attributes[i].name.toLowerCase() == "style")
                                    objNodeResult.style.cssText = oNode.attributes[i].value;
                              
                              if(oNode.attributes[i].name.substr(0,2).toLowerCase()=="on")
                                    objNodeResult[oNode.attributes[i].name] = new Function(oNode.attributes[i].value);
                              

                        }
                        else
                        {
                              void objNodeResult.setAttribute(oNode.attributes[i].name, oNode.attributes[i].value)
                        }      
                  }

                  for(var i=0; i<oNode.childNodes.length; i++)
                        void objNodeResult.appendChild(this.importNode(oNode.childNodes[i]));
            }
            
            if(oNode.nodeType == 3)
            {
                  objNodeResult = document.createTextNode(oNode.nodeValue);
            }

            return objNodeResult;
      }
---------------------------

class, style and events can be declared in the xml file :)
0
 
LVL 5

Author Comment

by:MMeijer
ID: 10836004
thanx for the comments
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 10836533
Thanks for the points and for the feedback.
0

Featured Post

What is SQL Server and how does it work?

The purpose of this paper is to provide you background on SQL Server. It’s your self-study guide for learning fundamentals. It includes both the history of SQL and its technical basics. Concepts and definitions will form the solid foundation of your future DBA expertise.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to integrate Mailchimp with Facebook. This will be demonstrated using a Windows 8 PC. Mailchimp and Facebook will be used. Log into your Mailchimp account. : Click on your name. Go to Account Setti…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question