Get the content of another page's div with jQuery Ajax

Question

I would like page.html to ajax-request the content of side.html and extract the content of two of its divs. But I cannot find the correct way to parse the response, despite everything I tried.

Here is side.html:

<!DOCTYPE html>
<html>
<head>
<title>Useless</title>
</head>
<body>
<div id="a">ContentA</div>
<div id="b">ContentB</div>
</body>
</html>

and here is page.html

<!DOCTYPE html>
<html>
<head>
<title>Useless</title>
<script type='text/javascript' src='jquery-1.9.0.min.js'></script>
</head>
<body>
Hello
<script type="text/javascript">
jQuery.ajax({
        url: "side.html",
        success: function(result) {
            html = jQuery(result);

            alert(html.find("div#a").attr("id"));
            alert(html.find("div#a").html());
            alert(html.find("div#a"));

        },
    });
</script>
</body>
</html>

When I access this page, I get no error, and the three alert()s yield undefined, undefined and [object Object]. What am I doing wrong? Example is live here.

NB: I am not using load() because I need to extract several divs from the same page, and I would like to load it only once. — Nown
– Nown, Commented Feb 4, 2013 at 9:27

leftclickben · Accepted Answer · 2013-02-04 10:42:18Z

16

You need to change this line:

html = jQuery(result);

To this:

html = jQuery('<div>').html(result);

And actually, even better you should declare this as a local variable:

var html = jQuery('<div>').html(result);

Explanation

When you do jQuery(result), jQuery pulls the children of the <body> element and returns a wrapper around those elements, as opposed to returning a jQuery wrapper for the <html> element, which I tend to agree would be pretty dumb.

In your case, the <body> of sidebar.html contains several elements and some text nodes. Therefore the jQuery object that is returned is a wrapper for those several elements and text nodes.

When you use .find(), it searches the descendants of the elements wrapped by the jQuery object that you call it on. In your case, the <div id="a"> is not one of these because it is actually one of the selected elements of the wrapper, and cannot be a descendant of itself.

By wrapping it in a <div> of your own, then you push those elements "down" a level. When you call .find() in my fixed code above, it looks for descendants of that <div> and therefore finds your <div id="a">.

Comment

If your <div id="a"> was not at the top level, i.e. an immediate child of the <body>, then your code would have worked. To me this is inconsistent and therefore incorrect behaviour. To solve this, jQuery should generate the container <div> for you, when it is working its <body> content extraction magic.

edited Feb 4, 2013 at 10:42

answered Feb 4, 2013 at 10:31

leftclickben

4,62426 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nown Over a year ago

Thank you very much. It works perfectly, and your further explanations were of great help to me.

leftclickben Over a year ago

No problem, actually I felt bad / a bit embarrassed about giving you completely the wrong information in my first answer :-)

Fedir RYKHTIK · Accepted Answer · 2014-06-06 14:19:00Z

0

Try this :

$.get(url,function(content) {
    var content = $(content).find('div.contentWrapper').html();
    ...
}

answered Jun 6, 2014 at 14:19

Fedir RYKHTIK

10k7 gold badges61 silver badges70 bronze badges

Collectives™ on Stack Overflow

Get the content of another page's div with jQuery Ajax

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related