Solved

[MSXML] Copying XHTML node to the document

Posted on 2004-04-15
15
430 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

[Webinar] Learn How Hackers Steal Your Credentials

Do You Know How Hackers Steal Your Credentials? Join us and Skyport Systems to learn how hackers steal your credentials and why Active Directory must be secure to stop them. Thursday, July 13, 2017 10:00 A.M. PDT

Question has a verified solution.

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

When setting up new project requests for our site, one of the most powerful tools our team has available to use is Axure (http://www.axure.com/). It’s a tool for creating software and web prototypes that can function and interact as if it were the a…
This article discusses how to implement server side field validation and display customized error messages to the client.
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…

705 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