943,789 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > AJAX Question
Ad:
Permalink
Jan 22nd, 2008
0

AJAX Question

Expand Post »
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.
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Lee-Pro is offline Offline
5 posts
since Dec 2007
Permalink
Jan 22nd, 2008
0

Re: AJAX Question

Click to Expand / Collapse  Quote originally posted by Lee-Pro ...
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.
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:

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. /**
  2. * Clones XML nodes to the current Document's DOM
  3. */
  4. function cloneXMLtoDOM(Node) {
  5. 	var DOMNode;
  6. 	if (Node.nodeName == '#text') {
  7. 		// clone text nodes
  8. 		DOMNode = document.createTextNode(Node.data);
  9. 	} else {
  10. 		// clone root node
  11. 		DOMNode = document.createElement(Node.nodeName);
  12. 		// clone the attributes
  13. 		for(var i = 0; i < Node.attributes.length; i++) {
  14. 			DOMnode.setAttribute(Node.attributes[i].nodeName, Node.attributes[i]);
  15. 		}
  16. 		// recursively clone the child nodes
  17. 		if (Node.hasChildNodes()) {	
  18. 			for(var i = 0; i < Node.childNodes.length; i++) {
  19. 				DOMNode.appendChild(cloneXMLtoDOM(Node.childNodes[i]));
  20. 			}
  21. 		}
  22. 	}
  23. 	return DOMNode;
  24. }

You could also use XPATH which would be faster.
Moderator
Reputation Points: 457
Solved Threads: 101
Nearly a Posting Virtuoso
digital-ether is offline Offline
1,250 posts
since Sep 2005
Permalink
Jan 23rd, 2008
0

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.
JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. var doc = xmlHttpRequest.responseXML;
  2. 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.
Super Moderator
Featured Poster
Reputation Points: 3233
Solved Threads: 719
Failure as a human
~s.o.s~ is offline Offline
8,871 posts
since Jun 2006
Permalink
Jan 24th, 2008
0

Re: AJAX Question

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. 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"]
  2. Source File: file:///home/leezh/test.html
  3. Line: 57


The source is here:
html Syntax (Toggle Plain Text)
  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. </head>
  6. <body>
  7.  
  8. <script type="text/javascript">
  9. var xmlHttp;
  10. try
  11. {
  12.   // Firefox, Opera 8.0+, Safari
  13.   xmlHttp=new XMLHttpRequest();
  14. }
  15. catch (e)
  16. {
  17.   // Internet Explorer
  18.   try
  19.   {
  20.     xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  21.   }
  22.   catch (e)
  23.   {
  24.     try
  25.     {
  26.       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  27.     }
  28.     catch (e)
  29.     {
  30.       alert("Your browser does not support AJAX!");
  31.     }
  32.   }
  33. }
  34.  
  35. xmlHttp.onreadystatechange=function()
  36. {
  37.   if(xmlHttp.readyState==4)
  38.   {
  39.     var doc = xmlHttp.responseXML;
  40.     // Some XML DOM stuff
  41.     document.getElementsByTagName("body").appendChild(cloneXMLtoDOM(doc));
  42.   }
  43. }
  44. xmlHttp.open("GET","books.xml",true);
  45. xmlHttp.send(null);
  46.  
  47. /**
  48. * Clones XML nodes to the current Document's DOM
  49. */
  50. function cloneXMLtoDOM(Node) {
  51. 	var DOMNode;
  52. 	if (Node.nodeName == '#text') {
  53. 		// clone text nodes
  54. 		DOMNode = document.createTextNode(Node.data);
  55. 	} else {
  56. 		// clone root node
  57. 		DOMNode = document.createElement(Node.nodeName);
  58. 		// clone the attributes
  59. 		for(var i = 0; i < Node.attributes.length; i++) {
  60. 			DOMnode.setAttribute(Node.attributes[i].nodeName, Node.attributes[i]);
  61. 		}
  62. 		// recursively clone the child nodes
  63. 		if (Node.hasChildNodes()) {	
  64. 			for(var i = 0; i < Node.childNodes.length; i++) {
  65. 				DOMNode.appendChild(cloneXMLtoDOM(Node.childNodes[i]));
  66. 			}
  67. 		}
  68. 	}
  69. 	return DOMNode;
  70. }
  71. </script>
  72.  
  73. </body>
  74. </html>

Is anything wrong?
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Lee-Pro is offline Offline
5 posts
since Dec 2007
Permalink
Jan 24th, 2008
0

Re: AJAX Question

Could you post the XML response from the server.
Moderator
Reputation Points: 457
Solved Threads: 101
Nearly a Posting Virtuoso
digital-ether is offline Offline
1,250 posts
since Sep 2005
Permalink
Jan 24th, 2008
0

Re: AJAX Question

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

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text)
  1. /**
  2. * Clones XML nodes to the current Document's DOM
  3. */
  4. function cloneXMLtoDOM(Node) {
  5. 	var DOMNode;
  6.  
  7. 	if (!Node) return false;
  8.  
  9. 	if (Node.nodeName == '#text') {
  10. 		// clone text nodes
  11. 		DOMNode = document.createTextNode(Node.nodeValue);
  12. 	} else {
  13. 		// clone root node
  14. 		DOMNode = document.createElement(Node.nodeName);
  15. 		// clone the attributes
  16. 		for(var i = 0; i < Node.attributes.length; i++) {
  17. 			DOMNode.setAttribute(Node.attributes[i].nodeName, Node.attributes[i].nodeValue);
  18. 		}
  19. 		// recursively clone the child nodes
  20. 		if (Node.hasChildNodes()) {	
  21. 			for(var i = 0; i < Node.childNodes.length; i++) {
  22. 				DOMNode.appendChild(cloneXMLtoDOM(Node.childNodes[i]));
  23. 			}
  24. 		}
  25. 	}
  26. 	return DOMNode;
  27. }

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
Moderator
Reputation Points: 457
Solved Threads: 101
Nearly a Posting Virtuoso
digital-ether is offline Offline
1,250 posts
since Sep 2005
Permalink
Jan 28th, 2008
0

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:
javascript Syntax (Toggle Plain Text)
  1. var string = (new XMLSerializer()).serializeToString(xmlobject);

But thanks for the help anyways.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
Lee-Pro is offline Offline
5 posts
since Dec 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: Help! Tab content not working in FF
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Disabling back button in asp.net





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC