469,636 Members | 1,929 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,636 developers. It's quick & easy.

Getting DOM from AJAX request

5
Hi!

I have a pretty simple AJAX request that just GETs the content of a page depending on a name that is fed to it. I'm parsing the page in quite a complex way, so I'm using the DOM to make it a bit easier.

Having created my parser, I realised that document.getElementById() doesn't work (>.<), because I'm trying to use it on the AJAX response, which isn't the document. So I tried just referring to the AJAX response variable, then realised that that doesn't work either, because responseText just returns a string. responseXML returns null, because it isn't an XML document - it's an HTML document.

Does anyone know how I can access the DOM of a page I'm getting through AJAX?

Thanks!
Dec 2 '07 #1
8 2774
acoder
16,027 Expert Mod 8TB
Welcome to TSDN!

If you add it to the page, you can use the DOM methods, document.getElementById() and elem.getElementsByTagName().
Dec 3 '07 #2
alejrb
5
Hi.

So, do you have to add it to the document before you can use the DOM to access it?

Because I was trying to get the AJAX response, parse it, and then display what I'd retrieved from it, all without the user seeing what the actual page was. Is that even possible?

Thanks :).
Dec 3 '07 #3
acoder
16,027 Expert Mod 8TB
So, do you have to add it to the document before you can use the DOM to access it?

Because I was trying to get the AJAX response, parse it, and then display what I'd retrieved from it, all without the user seeing what the actual page was. Is that even possible?
You could use the String parsing methods, e.g. split(), indexOf(), etc.

You could alternatively, add it to a hidden element.
Dec 3 '07 #4
alejrb
5
I was going to parse the string, but because it's just an HTML page, DOM is easier... or not, as the case may be heh.

Maybe I'll add it to a hidden element.

Thanks!
Dec 3 '07 #5
alejrb
5
I'm still having a few problems :(.


I'm getting a string containing all the HTML content of a page from an AJAX request with responseText. I'm cleaning this to only get the content in between the body tags. I'm creating a div (which is hidden) to hold it, with a specific ID, and appending it using appendChild to a pre-existing div. I'm putting my HTML string into my holder div by altering the holder's innerHTML.

But after all that, it is still returning that my holder div doesn't have any childNodes. Is there any way of getting around this?

Thanks!
Dec 3 '07 #6
acoder
16,027 Expert Mod 8TB
Show your code.

One other option, if possible, is to only return what you need from the server-side script. That way there's no need to parse.
Dec 3 '07 #7
alejrb
5
ajax func, pretty standard:

Expand|Select|Wrap|Line Numbers
  1. function ajaxGet(page, caller) {
  2.         page_request = false;
  3.         var root = '############';
  4.  
  5.         if (window.XMLHttpRequest)
  6.             page_request = new XMLHttpRequest();
  7.         else if (window.ActiveXObject){ 
  8.             try {
  9.             page_request = new ActiveXObject("Msxml2.XMLHTTP");
  10.             } 
  11.             catch (e){
  12.                 try{
  13.                 page_request = new ActiveXObject("Microsoft.XMLHTTP");
  14.                 }
  15.                 catch (e){}
  16.             }
  17.         }
  18.         else
  19.         {
  20.             return false;
  21.         }
  22.  
  23.         var url = root + page;
  24.  
  25.         page_request.onreadystatechange = function() {
  26.             if (page_request.readyState == 4) {
  27.                  if (page_request.status == 200) {
  28.                     var pageContents = page_request.responseText;
  29.  
  30.                     caller.contents = pageContents;
  31.                     caller.update();
  32.                  } else {
  33.                     return false;
  34.                  }
  35.               }
  36.         }
  37.         page_request.open('GET', url, true);
  38.         page_request.send(null);
  39.     }
  40.  


caller object + function:
Expand|Select|Wrap|Line Numbers
  1. function Check() {
  2.             this.contents = '';
  3.  
  4.             this.create = function(da) {
  5.                     var Ref = 'sc_' + da;
  6.  
  7.                     this.div                       = document.createElement("div");
  8.                     var title                     = Ref;
  9.                     this.div.id                    = Ref;
  10.                     this.div.style.position         = "absolute";
  11.  
  12.                     var cont = ajaxGet(Ref, this);
  13.                         document.getElementById('bodyContent').appendChild(this.div);
  14.             }
  15.  
  16.             this.update= function() {
  17.                     var cont = this.doParse(this.contents);
  18.  
  19.                     var dwdata = '<div style="border: 1px solid #BBBBBB; padding: 3px; background-color: #F0F0F0; width: 400px; height: 100px;">'
  20.                     dwdata += cont;
  21.                     dwdata += '</div>';
  22.                     this.div.innerHTML = dwdata;
  23.             }
  24.  
  25.             this.doParse = function(data) {
  26.                     // Create hidden div with which to use DOM.
  27.                     dom_div                      = document.createElement("div");
  28.                     dom_div.id                   = "dom_div_holder";
  29.                     dom_div.style.visibility    = "hidden";
  30.  
  31.                     // Clean input text that we're getting from the AJAX request.
  32.                     clean_data                     = data;
  33.                     clean_data                     = right(clean_data, clean_data.length - clean_data.indexOf('<div id="globalWrapper">'));
  34.                     clean_data                     = left(clean_data, clean_data.indexOf('</body>'));
  35.  
  36.                     dom_div.innerHTML = clean_data;
  37.                     document.getElementById('bodyContent').appendChild(dom_div);
  38.                     var text = clean_data;
  39.  
  40.                     var elem = document.getElementById('dom_div_holder');
  41.  
  42.                     test = elem.childNode[0].childNode[0].innerHTML;
  43.  
  44.                     var endString = 'content ' + test
  45.  
  46.                     return endString;
  47.             }
  48.  
  49. // Other functions
  50. }
  51.  



That's pretty much it. I get an error saying 'elem.childNode has no properties'.

Thanks!
Dec 3 '07 #8
acoder
16,027 Expert Mod 8TB
Have you tested that "dom_div_holder" contains the text that you need?

Can you give an example of what the server-side returns and what you need to parse?
Dec 4 '07 #9

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by dmagliola | last post: by
17 posts views Thread by Arjen | last post: by
6 posts views Thread by =?Utf-8?B?U2hhd24gU2VzbmE=?= | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.