Ok this is really frusturating me because I've done this a hundred times before, and this time it isn't working. So I know I'm doing something wrong, I just can't figure it out.
I am using the jQuery .get routine to load html from another file. I don't want to use .load() because it always replaces the children of the element I'm loading content into.
Here is my .get request:
$(document).ready(function() {
$.get('info.html', {}, function(html) {
// debug code
console.log($(html).find('ul').html());
// end debug code
});
});
The file 'info.html' is a standard xhtml file with a proper doctype, and the only thing in the body is a series of ul's that I need to access. For some reason, the find function is giving me a null value.
In firebug, the GET request is showing the proper RESPONSE text and when I run
console.log(html);
Instead of the current console.log line, I get the whole info.html as output, like I would expect.
Any ideas?
-
You cannot pull in an entire XHTML document. You can only handle tags that exist within the
<body>of an html document. Frustrating. Strip everything from info.html that isn't within your<body>tag and try it again.There are other potential ways around this issue - check below "Stackoverflow Related Items" at the base of this response.
From the Doc: (http://docs.jquery.com/Core/jQuery#htmlownerDocument)
"HTML string cannot contain elements that are invalid within a div, such as html, head, body, or title elements."
Stackoverflow Related Items:
- Simple jQuery ajax example not finding elements in returned HTML
- What is the best practice for parsing remote content with jQuery?
W_P : So I need to write a php script to sit inbetween the 2 html files and have the get request go there, huh....that is frusturating, i was hoping to avoid that.Jonathan Sampson : I believe so, yes. In all honesty, you could use phpQuery within your PHP Script. it will allow you jQuery style selectors making it easy to return the contents.W_P : stripping out everything but what's within the doesn't work either...i get the correct response but can't parse it...thanks anyway!Jonathan Sampson : Your document is well-formed, right? Nothing like etc in it?W_P : no, it's just html->body->ul->li. body has a few ul->li sets under it but it's all valid. I decided i am just going to use .load() into a hidden div, parse the data, and prepend the parsed data to where i want it to beJonathan Sampson : Before you do that, check out my answer - I've found a couple resources for you that might help.Richard M : I can't see anything wrong with your code. But, if you have more than one UL in the returned html then ".find('ul').html()" is only going to give you the html for the first of those elements.Jonathan Sampson : Triffid, are you sure about that? I was thinking it might return all of the LI's from any of the UL elements. -
Try including whole body within a
<div>tag, e.g.<body><div>content</div></body>.
0 comments:
Post a Comment