DaniWeb IT Discussion Community

DaniWeb IT Discussion Community (http://www.daniweb.com/forums/)

- JavaScript / DHTML / AJAX (http://www.daniweb.com/forums/forum117.html)

- - AJAX Question (http://www.daniweb.com/forums/thread105764.html)

Hey everyone, this is a very tough problem I am facing right now in JavaScript.

I'm designing this script to load a page like an IFrame but is using AJAX, the only problem is that I need to edit certain attributes before displaying them through changing an element's innerHTML attribute.

Using the normal xmlHttp request, it retrieves a html document. But is there any way I could actually handle it through some kind of DOM before actually displaying it?

Modifying them after I display them is troublesome as the browser would convert relative links into absolute paths.

Using XML to load the document was fine, but then there was no way to generate the HTML code without lots of hassle.

Is there any other way?

PS: An older version of script is in my site, but it uses substr which is very messy.

Re: AJAX Question

Quote:

Originally Posted by Lee-Pro (Post 515513)

You could load the HTML with an XML content-type so that you can access the response as XML (XMLHttpRequest.responseXML).
Traverse each node in the XML Doc and create equivalent DOM nodes in your HTML Document.

Example:

/**

* Clones XML nodes to the current Document's DOM

*/

function cloneXMLtoDOM(Node) {

        var DOMNode;

        if (Node.nodeName == '#text') {

                // clone text nodes

                DOMNode = document.createTextNode(Node.data);

        } else {

                // clone root node

                DOMNode = document.createElement(Node.nodeName);

                // clone the attributes

                for(var i = 0; i < Node.attributes.length; i++) {

                        DOMnode.setAttribute(Node.attributes[i].nodeName, Node.attributes[i]);

                }

                // recursively clone the child nodes

                if (Node.hasChildNodes()) {        

                        for(var i = 0; i < Node.childNodes.length; i++) {

                                DOMNode.appendChild(cloneXMLtoDOM(Node.childNodes[i]));

                        }

                }

        }

        return DOMNode;

}

You could also use XPATH which would be faster.

Re: AJAX Question

> Using the normal xmlHttp request, it retrieves a html document. But is there any way I could
> actually handle it through some kind of DOM before actually displaying it?
Make sure that the page you fetch using XHR is well formed. If that is the case, you can manipulate the contents of the response just as you would to a normal HTML document.

var doc = xmlHttpRequest.responseXML;

doc.getElementsByTagName("someTag")[0].someAttribute = someValue;

DOMnode.setAttribute(Node.attributes[i].nodeName, Node.attributes[i]);

IE doesn't like

set/getAttribute

. Use

obj.attribute = value;

for maximum browser compatibility.

Re: AJAX Question

Hey, thanks for the XMLtoDom converter, but when I tried using it I got this:

Error: [Exception... "String contains an invalid character"  code: "5" nsresult: "0x80530005 (NS_ERROR_DOM_INVALID_CHARACTER_ERR)"  location: "file:///home/leezh/test.html Line: 57"]

Source File: file:///home/leezh/test.html

Line: 57

The source is here:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

</head>

<body>



<script type="text/javascript">

var xmlHttp;

try

{

  // Firefox, Opera 8.0+, Safari

  xmlHttp=new XMLHttpRequest();

}

catch (e)

{

  // Internet Explorer

  try

  {

    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

  }

  catch (e)

  {

    try

    {

      xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

    }

    catch (e)

    {

      alert("Your browser does not support AJAX!");

    }

  }

}



xmlHttp.onreadystatechange=function()

{

  if(xmlHttp.readyState==4)

  {

    var doc = xmlHttp.responseXML;

    // Some XML DOM stuff

    document.getElementsByTagName("body").appendChild(cloneXMLtoDOM(doc));

  }

}

xmlHttp.open("GET","books.xml",true);

xmlHttp.send(null);



/**

* Clones XML nodes to the current Document's DOM

*/

function cloneXMLtoDOM(Node) {

        var DOMNode;

        if (Node.nodeName == '#text') {

                // clone text nodes

                DOMNode = document.createTextNode(Node.data);

        } else {

                // clone root node

                DOMNode = document.createElement(Node.nodeName);

                // clone the attributes

                for(var i = 0; i < Node.attributes.length; i++) {

                        DOMnode.setAttribute(Node.attributes[i].nodeName, Node.attributes[i]);

                }

                // recursively clone the child nodes

                if (Node.hasChildNodes()) {        

                        for(var i = 0; i < Node.childNodes.length; i++) {

                                DOMNode.appendChild(cloneXMLtoDOM(Node.childNodes[i]));

                        }

                }

        }

        return DOMNode;

}

</script>



</body>

</html>

Is anything wrong?

Re: AJAX Question

Could you post the XML response from the server.

Re: AJAX Question

There was a problem in the function cloneXMLtoDOM's cloning of attributes. Here's it again, fixed:

/**

* Clones XML nodes to the current Document's DOM

*/

function cloneXMLtoDOM(Node) {

        var DOMNode;

        

        if (!Node) return false;

        

        if (Node.nodeName == '#text') {

                // clone text nodes

                DOMNode = document.createTextNode(Node.nodeValue);

        } else {

                // clone root node

                DOMNode = document.createElement(Node.nodeName);

                // clone the attributes

                for(var i = 0; i < Node.attributes.length; i++) {

                        DOMNode.setAttribute(Node.attributes[i].nodeName, Node.attributes[i].nodeValue);

                }

                // recursively clone the child nodes

                if (Node.hasChildNodes()) {        

                        for(var i = 0; i < Node.childNodes.length; i++) {

                                DOMNode.appendChild(cloneXMLtoDOM(Node.childNodes[i]));

                        }

                }

        }

        return DOMNode;

}

If it doesn't work for you, just use the DOM methods on the responseXML to make modifications and append it to the document using innerHTML like s.o.s mentioned

Re: AJAX Question

Hey, guys, I found this solution to the problem while searching about:

http://www.captain.at/howto-javascri...-to-string.php

The problem was so simple with just one line of code needed:

var string = (new XMLSerializer()).serializeToString(xmlobject);

But thanks for the help anyways.