Can Javascript access the DOM of an Ajax text/html response?

Question

I'm trying to use Ajax to fetch an HTML page and then pull out a div by it's ID, and insert that DIV into the current page. So the current page loads (via Ajax) a second page, pulls the div out of the Ajax response and inserts into the current page. However I am at a loss as unless the response is text/xml, I cannot use any DOM functions on it... can I?

Answer 1

Yes you can. Here you will find a resource for how to parse XML responses.

If you are loading it into the DOM tree that already exists (innerHTML), you should be able to call the standard DOM traversal functions you are used to.

Answer 2

script tags will fail on any browser by any method.. so to access current page's dom apply the "eval" function on the script text which you currently requested.

i mean, if you have html like:

<div id="content">some html</div>

and you got the script text on server side like

content.innerHTML = "foo";

use the eval function on ajax response

function onXmlHttpAnswer()
{
   if(xmlHttp.readyState==4 && xmlHttp.status==200)eval(xmlHttp.responseText);
}

Answer 3

Jquery (or other libraries??) will basically do all this for you. I highly recommend looking into this and not reinventing the wheel.

For query it would probably like:

// Make a call to url, with data 
$.ajax(
  { url: $url,
    data: $data, 
    dataType: 'xml',
    callback: function(returnData) { 
      // Jquery find <mytag attribute="foo">...</mytag> and store it in mydata
      var mydata = $(returnData).find('mytag[attribute=foo]');
      // Insert into current page to somewhere with class="after-me"
      $('.after-me').html(mydata);
   }
});

I may have the syntax wrong. But here is the docs: http://docs.jquery.com/Ajax/jQuery.ajax#options

Answer 4

Don't worry about validity, since you are doing this dynamically using javascript, you can fill hidden element's innerHTML with your response data and then use any DOM/jQuery functions you wish