Solved

[MSXML] Copying XHTML node to the document

Posted on 2004-04-15
15
427 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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 create a Printer Friendly PDF on a WordPress Page. This will be demonstrated using a Windows 8 PC. Tools Used are Photoshop, Awesome Screenshot” Google Chrome Extension, and SmallPDF.com Log…
The purpose of this video is to demonstrate how to set up an RSS Feed on a WordPress Website. This will be demonstrated using a Windows 8 PC. Feedburner will be used for this demonstration. Go to your WordPress login page. This will look like the…

740 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