AJAX Question

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: Dec 2007
Posts: 5
Reputation: Lee-Pro is an unknown quantity at this point 
Solved Threads: 0
Lee-Pro's Avatar
Lee-Pro Lee-Pro is offline Offline
Newbie Poster

AJAX Question

 
0
  #1
Jan 22nd, 2008
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.
Cheers,
LeeZH
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2005
Posts: 1,085
Reputation: digital-ether is just really nice digital-ether is just really nice digital-ether is just really nice digital-ether is just really nice 
Solved Threads: 66
Moderator
digital-ether's Avatar
digital-ether digital-ether is offline Offline
Veteran Poster

Re: AJAX Question

 
0
  #2
Jan 22nd, 2008
•
•
•
•
Originally Posted by Lee-Pro View 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.
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.
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
Reply With Quote Quick reply to this message  
•
•
Join Date: Jun 2006
Posts: 7,652
Reputation: ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of ~s.o.s~ has much to be proud of 
Solved Threads: 474
Super Moderator
Featured Poster
~s.o.s~'s Avatar
~s.o.s~ ~s.o.s~ is offline Offline
Failure as a human

Re: AJAX Question

 
0
  #3
Jan 23rd, 2008
> 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.
I don't accept change; I don't deserve to live.

Jo Tujhe Jagaaye, Nindein Teri Udaaye Khwaab Hai Sachcha Wahi.
Nindon Mein Jo Aaye Jise To Bhul Jaaye Khawab Woh Sachcha Nahi.
Khwaab Ko Raag De, Nind Ko Aag De
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2007
Posts: 5
Reputation: Lee-Pro is an unknown quantity at this point 
Solved Threads: 0
Lee-Pro's Avatar
Lee-Pro Lee-Pro is offline Offline
Newbie Poster

Re: AJAX Question

 
0
  #4
Jan 24th, 2008
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?
Cheers,
LeeZH
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2005
Posts: 1,085
Reputation: digital-ether is just really nice digital-ether is just really nice digital-ether is just really nice digital-ether is just really nice 
Solved Threads: 66
Moderator
digital-ether's Avatar
digital-ether digital-ether is offline Offline
Veteran Poster

Re: AJAX Question

 
0
  #5
Jan 24th, 2008
Could you post the XML response from the server.
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
Reply With Quote Quick reply to this message  
•
•
Join Date: Sep 2005
Posts: 1,085
Reputation: digital-ether is just really nice digital-ether is just really nice digital-ether is just really nice digital-ether is just really nice 
Solved Threads: 66
Moderator
digital-ether's Avatar
digital-ether digital-ether is offline Offline
Veteran Poster

Re: AJAX Question

 
0
  #6
Jan 24th, 2008
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
www.fijiwebdesign.com - web design and development and fun
Cpanel Email - Let users Register email accounts on your website upon registration
Ajax Chat - Fully browser based chat!
Reply With Quote Quick reply to this message  
•
•
Join Date: Dec 2007
Posts: 5
Reputation: Lee-Pro is an unknown quantity at this point 
Solved Threads: 0
Lee-Pro's Avatar
Lee-Pro Lee-Pro is offline Offline
Newbie Poster

Re: AJAX Question

 
0
  #7
Jan 28th, 2008
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.
Cheers,
LeeZH
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum


Views: 3878 | Replies: 6
Thread Tools Search this Thread



Tag cloud for JavaScript / DHTML / AJAX
ajax ajaxcode ajaxhelp animate api automatically beta boarder box bug button calendar card checkbox child class column cookies createrange() css cursor disablefirebug dom download dropdown editor element engine error events explorer ext file firehose flash form forms google gwt html htmlform ie8 iframe image() images internet java javascript jawascriptruntimeerror jquery jsf jsfile jump margin math matrixcaptcha microsoft mimic mp3 mysql object offline onmouseoutdivproblem onreadystatechange parent passing pdf php player post problem progressbar rated rating regex runtime scroll search select session shopping size sql star stars stretch text textarea twitter validation w3c web website window windowofwords windowsxp wysiwyg xml xspf \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC