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?

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?

• javascript
• html
• ajax
• dom

• If you only want 1 part of the page you don't need to use the dom. You can just split the string. – user528470 Commented Feb 10, 2011 at 2:31

7 Answers 7

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

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.

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

In order to use jQuery to extract only a portion of an HTML document loaded via $.load() do this:

$('#dynamic').load('content.html #desiredElement');

.load will actually load the entire document, but the selector will force load to only return the selected portion of that document.

Try this out. This worked for me.

$.ajax({
    url: 'http://www.example.com',
    type: "GET",
    crossDomain: true,
    dataType: 'html',
    success: function (responseHTMLData) {   
        $($(responseHTMLData).find('.yourClassName')).each(function() {
            console.log($(this).attr('href'));
        });
    }
});

$.ajax({
  type: "POST",
  url : "yourURL"
  data : $("#yourFormID").serialize(),
  async: true,
  success : function(resp) {
    // resp contains data in html form you want to find data in
    // <span class="error">some Error</span>
    var errorData = $(resp).find('span.error').text();   
    // errorData would have value "some Error"             
  }
});

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);
}