I have an ajax function using jQuery that defines an error function to be called. When an error occurs on the server this error function runs. One of the variables passed in "jqXHR" contains a property called responseText. I want to dump this response text into a div on the page, but the response text contains a fully-formed HTML document. Is there any way to use jQuery to traverse this variable containing HTML in the same way I would traverse the regular DOM?
$.ajax({
blah blah blah...,
error: function (jqXHR, textStatus, errorThrown)
{
var errorText = $(jqXHR.responseText).find('body').html();
// The above line does not work. errorText is NULL.
$('#mainContent').html(errorText);
}
});
I would like to do something like the above code snippet but the way I'm doing it does not work. Is there a way to traverse this variable as if it were a DOM that I could navigate with jQuery?
UPDATE
Here is a console.log($(jqXHR.responseText))
.jpg
I have an ajax function using jQuery that defines an error function to be called. When an error occurs on the server this error function runs. One of the variables passed in "jqXHR" contains a property called responseText. I want to dump this response text into a div on the page, but the response text contains a fully-formed HTML document. Is there any way to use jQuery to traverse this variable containing HTML in the same way I would traverse the regular DOM?
$.ajax({
blah blah blah...,
error: function (jqXHR, textStatus, errorThrown)
{
var errorText = $(jqXHR.responseText).find('body').html();
// The above line does not work. errorText is NULL.
$('#mainContent').html(errorText);
}
});
I would like to do something like the above code snippet but the way I'm doing it does not work. Is there a way to traverse this variable as if it were a DOM that I could navigate with jQuery?
UPDATE
Here is a console.log($(jqXHR.responseText))
http://www.codetunnel./content/images/consolelog.jpg
Share Improve this question edited Jul 8, 2011 at 22:45 ChevCast asked Jul 8, 2011 at 22:18 ChevCastChevCast 59.3k66 gold badges221 silver badges325 bronze badges 2-
1
Can you do a
console.log($(jqXHR.responseText));and see what the dom looks like to be sure ... i know that jQuery often selects thebodyby default so it may be you dont need to use the extra$()and jsut need to doerrorText = $(jqXHR.responseText).html();ORerrorText = $('#mainContent', jqXHR.responseText).html();Also your response is ign over withtext/htmland not an xml content type, right? – prodigitalson Commented Jul 8, 2011 at 22:32 -
Yes the response is text/html. For some reason this only works if I don't use
.html(), but then I also get the contents of the HEAD tag in addition to the contents of the BODY tag. – ChevCast Commented Jul 8, 2011 at 22:41
4 Answers
Reset to default 3Some sweet discovery for me as well on this one.
This doesn't work because behind the scenes, jQuery is creating a document fragment and setting the innerHtml property on it. This does not work with the <html> and <body> nodes because those aren't document node types--they cannot be placed into the DOM.
Instead, when you call $('<html><body><b>foo</b></body></html>'), a fragment is created with just "<b>foo</b>" in it! So, you want just the body part? Just return:
$(jqXHR.responseText).html();
Fiddle to prove what I'm referring to: http://jsfiddle/L5PR5/1/
EDIT #2
I think your only choice, given that <head> elements are being put in there, is to use substrings:
var res = jqXHR.responseText;
$(res.substring(res.indexOf('<body'))).appendTo('#mainContent');
Try this:
var errorText = $('<div />').append(jqXHR.responseText).html();
and here's a jsfiddle.
Use .filter()
http://api.jquery./filter/
var myHtml = '<div id="blah">hello world</div>';
console.log($(myHtml).filter('#blah').html());
This will show "hello world" in the console. It's HTML stored in a variable. You apply the filter() from jquery to that variable (see above) and you can access your dom that way even though it's in a variable.
Assuming your html is valid xml you can do
var xmlDoc = $.parseXML( jqXHR.responseText ),
body = $( xmlDoc ).find('body')[0],
bodystring = body.xml || new XMLSerializer().serializeToString(body);
now bodystring holds the entire <body> tag (as a string) and you can use it to append it in the DOM with
$('#mainContent').html( bodystring );
demo at http://jsfiddle/gaby/hYukn/
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745341866a4623362.html
评论列表（0条）