CODEWITHSUNDEEP
javascriptjqueryhtmlajax
user35288
user35288

Reputation:

jquery ajax parse response text

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?

Upvotes: 9

Views: 41114

Answers (5)

Isaac
Isaac

Reputation: 636

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...

Upvotes: 8

esamatti
esamatti

Reputation: 18953

I have found this being pretty clean solution:

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

Upvotes: 6

Peter Kitts
Peter Kitts

Reputation: 179

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>

Upvotes: 3

sanmai
sanmai

Reputation: 30881

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

Upvotes: 0

Sampson
Sampson

Reputation: 268344

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:

Upvotes: 10

Related Questions