Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post Using cloneNode and appendChild loses style.

    I'm developing an AJAX toolkit in which I needed a way to write a subset of a markup language to modify the running copy of the document. When implementing part of the append parser I came against a problem. What I'm basically doing is reading the append XML tag, looking where it says It has to add code and then clone the nodes inside that tag and attempt to insert them in the document. The problem comes when I'm trying to append, it seems like all my cloned nodes lose all it's style properties, for example several <li> items would come one next to the other instead of one below the other with the round bullet separation, or an image won't load the actual image.

    The example XML would be like:

    <append after=\"".$rowKey."\">
    <li>
    <img src="images/plus.gif" alt="plus" />
    <span>".$child_row->name."</span>
    </li>
    </append>

    And the javascript portion:

    var numElems = appendTags[k].childNodes.length;
    for(e = 0; e < numElems; e++)
    {
    var elemChild = appendTags[k].childNodes[e];
    var elemClone = document.importNode(elemChild, true); // I've tried cloneNode and importNode, both with the same results.
    object.insertBefore(elemClone, nextElement);
    }

    Anyone have any ideas? Am I doing something really stupid here?

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    it looks to me that your xml is not quite an xml file. check wheter your server application generates a valid XML file.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I copied the XML Section from my PHP code that's why It has some variables there that I didn't remove, it's just as a matter of illustration. It is in fact valid, and the javascript code works, as if I inspect the DOM the correct elements are there, it's just that they lose their attributes, they are appended in the DOM without being actually parsed as elements, the <li> does nothing, the <img> doesn't even appear, <span> <div> they are never treated as elements.

  • #4
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solution

    Ok I found out some interesting information, that I'm going to share in case anyone else has the same problem.

    Explorer doesn't like importNode at all, I didn't really notice this since I never tested in Explorer yet. On the other hand, the XML specs prohibite copying nodes from one document to another, that's why cloneNode doesn't bring the expected results, the node is cloned, but it's still owned by the old document.

    The fact that my copied nodes weren't interpreted as HTML was because the returned document was in fact text/xml, so the DOM knows this, and doesn't interpret it as HTML. A way to solve this is to use a content-type of text/xml+xhtml or to do the object.innerHTML = object.innerHTML; trick after adding all your XML nodes, this magically makes the browser convert the nodes you added to HTML when re assigning them to innerHTML, I'm not sure if this trick works in IE though.

    Considering all this pitfalls, anyone has a suggestion for a real way of copying html tags from an xml document over to an html document? The fact I don't set the source data to xhtml type is because it also contains XML tags that I parse with javascript client side, and add their HTML child nodes after processing that extra XML data (Like in the example in my first post).

    Regards,
    Xavier.

  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    innerHTML is not a standard DOM method, thus it will not really insert the elements into the page's DOM tree, so that, if you want latter to handle them using DOM methods, it woun't work.

    Probably the best way is to use a content-type text/html instead of text/xml
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Quote Originally Posted by Kor
    innerHTML is not a standard DOM method, thus it will not really insert the elements into the page's DOM tree, so that, if you want latter to handle them using DOM methods, it woun't work.
    That's wrong. It will really insert the elements into the page's DOM. It parses the string as markup and does something equivalent to creating a DocumentFragment, which it then inserts.

    Anyway, importing nodes from an XML document into an HTML document is not a problem. If your returned XML document has properly namespaced elements in the XHTML namespace, then their DOM representation will be what you expect. From the markup you have posted, it seems everything is in the null, default namespace, so your returned XML document doesn't really contain any XHTML markup at all, just generic XML tags with the same names (but carry none of the semantics, presentation instructions, etc).

  • #7
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    How do you correctly specify the XHTML namespace around my mixed xml/html document? I assume that if the xml doc is recognized as xhtml I will get the best of both worlds, I can still parse my own tags as XML and copy/clone the html tags over to the dom?

    Regards,
    Xavier.

  • #8
    Senior Coder
    Join Date
    Feb 2006
    Location
    USA
    Posts
    1,013
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions
    Java != JavaScript && JScript != JavaScript
    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •