I'm trying to learn jQuery's ajax functions. I've got it working, but jQuery doesn't find elements in the returned HTML DOM. In the same folder as jquery, run this page:
Which loads this page "ajaxtest-load.html":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>load this</title> </head> <body> <div id="wrapper"> test </div> </body> </html>
It gives two alerts. One showing the DOM was loaded, but the second shows NULL instead of the #wrapper. What am I doing wrong?
EDIT: I'm loading "ajaxtest-load.html" which includes the whole header, including jquery again. Is that the issue?
This is not a direct answer, but may help to clarify things.
The data parameter of the callback function can be made into a jQuery (1.6.2) object $(data), which contains the different parts of the HTML response:
The html, head and body elements are not in the data object. Since the number of elements contained in head and body may vary, you should not get them by indexing like $(data). Instead, apply a filter to this object, like this:
After filtering the right elements, you can apply further selectors using find().
Unfortunately, in IE the head elements are not part of $(data). I have no idea why this is.