views:

200

answers:

4

Sorry if this has been posted many times. But I've tried many variations and it still doesn't work. The HTML comes back from the jquery AJAX call fine and I am trying to remove the header and footers from the response using:

// none of these work for me
$("#content", data);
$("#content", $(data));
$(data).find("#content").html()

I've breakpoint the response to verify the #content exists by inspected $(data) and using alert to print out the data's text. I've also try using "body" or "a" as selectors, but it always come back as undefined.

I've read in this post that you can't pull in the full XHTML document: http://stackoverflow.com/questions/1050333/jquery-ajax-parse-response-text. But I can't find the answer's quote anymore, maybe it's outdated?

Has anyone ran into this problem?

Many thanks, Steve

A: 

The data you receive from your AJAX call is not a part of your DOM tree, so you can not use JQuery function calls to manipulate it. You can use text manipulation functions, you can use JSON, or you may also attach your response to your DOM.

alemjerus
A: 

You need a div to attach your data to. Like $("#response").replaceWith($(data).find('#content')); That should work

Aaron Mc Adam
A: 

Are you using the get-method? Alternatively you could use the jQuery load method where you can provide a page fragment to load.

For example to load a content div from a wellformed html document you could use

$("#div-to-load-to").load("html-doc-to-load-from.html #content", function() { //do something });

metatron
A: 

It works when there is a <div> tag in the received document.

E.g. <body><div> your content </div></body>.

See a very simple proof of concept.

sanmai