jquery ajax parse response text

Question

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?

score 10 · Accepted Answer · edited Jun 20 '20 at 09:12

10

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:

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 26 '09 at 17:43

Sampson

265,109
74
539
565

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. – Jun 26 '09 at 17:46
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. – Sampson Jun 26 '09 at 17:49
stripping out everything but what's within the doesn't work either...i get the correct response but can't parse it...thanks anyway! – Jun 26 '09 at 17:53
Your document is well-formed, right? Nothing like etc in it? – Sampson Jun 26 '09 at 17:56
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 be – Jun 26 '09 at 18:01
Before you do that, check out my answer - I've found a couple resources for you that might help. – Sampson Jun 26 '09 at 18:02
1

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. – Richard M Jun 26 '09 at 18:52
1

Triffid, are you sure about that? I was thinking it might return all of the LI's from any of the UL elements. – Sampson Jun 26 '09 at 19:22

Isaac · Answer 2 · 2013-02-08T15:10:56.937

8

I know this is an old post but I've been having the EXACT same frustrating problem for a couple of hours and have found a solution. For me what actually worked was to have the html content wrapped with a form tag.

So having the following html source:

<html>
 <head>
  <body>
   <form>
    <div id="content">Some Stuff</div>
   </form>
  </body>
 </head>
</html>

With this jquery snippet should work:

var callback = function (data) {
   alert($("#content", $(data)).html());
};
$.get(url, null, callback, null);

Hope this helps...

edited Feb 08 '13 at 15:10

answered May 12 '11 at 14:35

Isaac

636
7
9

Well, your syntax helped a lot. `alert($("#content", $(data)))` <- didn't know about this. You can just do `$.get(url, callback); `, but I guess you were explicit for a reason. PS: as you can see, you're missing a ')'. – nevvermind Jun 01 '11 at 09:14
I just corrected the missing ')' and a couple of spell checks, thank you so much @nush. – Isaac Jun 01 '11 at 12:40
Your code says: `alert($()).html();` Should be: `alert($().html());` – Joel Mellon Jan 24 '13 at 20:19

esamatti · Answer 3 · 2011-07-19T19:33:04.167

6

I have found this being pretty clean solution:

var elementInResponse = $("<div>").html(responseText).find(selector);

edited Jul 19 '11 at 19:33

answered Jul 19 '11 at 14:52

esamatti

18,293
11
75
82

This leaves out the head and body tag for me – Nico Aug 04 '12 at 13:35

score 3 · Answer 4 · answered Apr 15 '11 at 19:40

Wanting to do the same thing and knowing that JQuery load(..) does it, I had a look in the code. While you can't turn a complete html response directly into a JQuery object, you can append it to one so:

function(data, textStatus, xhr) {
    $(target).html(jQuery("<div>").append(data).find("#snippet"));
    // Create a dummy div to hold the results,
    // inject the contents of the document into it,
    // Locate the specified elements
}

The response from the server that goes into data is like:

<! doctype ... >
<html>
  <head>
    ...
  </head>
  <body>
    <div id="snippet">
      <p>Some content here that we are interested in</p>
    </div>
  </body>
</html>

This is a very important answer. Contrary to answers in nearly every other thread on this subject, neither `$(data)` nor `$.parseHTML(data)` will return a jQuery object such that you can chain on methods like `.find()` etc. Appending it to an open div tag is the only thing that works for me in jQuery 2.1.0 — lunelson, Mar 14 '14 at 15:40

score 0 · Answer 5 · answered Aug 13 '10 at 10:15

0

Try including whole body within a <div> tag, e.g. <body><div>content</div></body>.

answered Aug 13 '10 at 10:15

sanmai

29,083
12
64
76

jquery ajax parse response text

5 Answers5

Stackoverflow Related Items:

Linked

Related