Menu
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?
Here is a console.log($(jqXHR.responseText))
http://www.codetunnel.com/content/images/consolelog.jpg
569
Yes, it is possible to pass a variable into a jQuery attribute-contains selector. The [attribute*=value] selector is used to select each element with a specific attribute and a value containing a string.
If you have a variable containing a DOM element, and want to select elements related to that DOM element, simply wrap it in a jQuery object. var myDomElement = document. getElementById( "foo" ); // A plain DOM element.
The jQuery syntax is tailor-made for selecting HTML elements and performing some action on the element(s). Basic syntax is: $(selector).action() A $ sign to define/access jQuery. A (selector) to "query (or find)" HTML elements. A jQuery action() to be performed on the element(s)
The jQuery #id selector uses the id attribute of an HTML tag to find the specific element. An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.
Some 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.net/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.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
