CODEWITHSUNDEEP
jqueryajax
Ken
Ken

Reputation: 169

AJAX HTML data is ok, but find returns null

I'm fetching an HTML document with $.get (tried $.ajax as well):

$.get('/products/', function(data) {
    $('.content .article').remove();
    $('.content').prepend($(data).find('.article'));
});

Checked if data is ok with:

alert(data);

And It prints the html file with no problem. But when I try to print:

alert($(data).find('.article').html());

or

alert($('.article', data).html());

It always prints null.

I found a similiar problem here: Extract part of HTML document in jQuery, but the solutions didn't work for me.

EDIT: Content o generated HTML.

<!DOCTYPE html>
<html><head></head><body>

<div class="article"><h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

</body></html>

Upvotes: 0

Views: 1460

Answers (2)

Oscar Jara
Oscar Jara

Reputation: 14187

Well, it would be really good if you put the content of data but from what I got I can tell you these things...

First of all, you are missing a quote on the top example after the last .content statement.

Look here:

$('.content').prepend($(data).find('.article'));

correct it to:

$('.content').prepend($(data).find('.article'));

Then, try doing console.log($(data)); and make sure your string is converted correctly to jQuery object.

Another thing, try doing console.log($(data).find('.article')); and make sure if it returns more than just one element because doing .html() from lots of elements may return null

And, If there is more than one element and supposing you just want the first, do this:

var articles = $(data).find('.article');
var firstArticle = articles.first().html();

or if you want to loop inside all articles, do this to get each html:

$.each($(data).find('.article'), function(index, value){
   console.log($(this).html());
});

If nothing works for you then I just can tell you to try checking whats the exact value of data as string before converting it to jQuery object.

Solved

  • Your data from the callback is composed like this when getting the string from the /products/ page in the jQuery $.get:

enter image description here

  • As you can see, when converting data to $(data) and trying to find .article will fail cause the object is not only composed from just one element.

  • So your code has to be modified to this:

    $.get('/products/', function(data){
    $('.content .article').remove();
    $('.content').prepend($(data).eq(1));
});

  • Now everything will work because your code will find just the second element (the article html -- 1st element according to array index) from your object $(data) and then put it in your .content div.

Hope this helps :-) I tested and it is working.

PS. Don't forget to always print elements, as I told you starting my answer, try doing console.log($(data)); to know how it is composed!

Upvotes: 2

Seimen
Seimen

Reputation: 7250

Try this:

$(data).filter('.article');

That's what I get when I turn your data string into a jQuery object:

[div.article, div.nav]

Seems like when you convert a string which represents an whole HTML document, jQuery makes a collection of just the items inside the body.

Upvotes: 1

Related Questions