ansaurus

Question

jQuery use .load() to append data instead of replace

Answer 1

A:

try use $(this), something like :

<div id="result">Hello World </div>
    <script>
    $(function() {
            $(this).load('templates/test2.html', function(result) {
                $('#result').append(result);
            });
        });
    </script>

Puaka 2010-07-08 11:32:31

This would replace the contents of `document` with that page...you really don't want to do anything like this, he needs something other than `.load()` in this case.

Nick Craver 2010-07-08 11:44:40

Answer 2

+4 A:

There's no reason you can't extract the element you want using $.get().

$.get('test.html',function(data) {
    var posts = $(data).find('#posts');
       // If the #posts element is at the top level of the data,
       //    you'll need to use .filter() instead.
       // var posts = $(data).filter('#posts');
    $('#container').append(posts);
});

EDIT:

You perhaps didn't notice the code comments above, so I'm going to make it more explicit here.

If the #posts element is at the top of the hierarchy in data, in other words if it doesn't have a parent element, you'll need to use .filter() instead.

$.get('test.html',function(data) {
    var posts = $(data).filter('#posts');
    $('#container').append(posts);
});

EDIT:

Based on the comments below, you seem to need .filter() instead of .find().

The reason is that you're passing in an entire HTML structure. When you do that, jQuery places the direct children of the body tag as the array in the jQuery object.

jQuery's .filter() filters against only the nodes in that array. Not their children.

jQuery's .find() searches among the descendants of the nodes in the array.

Because of this, you're needing to use both. .filter() to get the correct one at the top (#posts) and .find() to get the correct descendant (.next).

$(data).filter('#posts').find('.next');

This narrows the set down to only the #posts element, then finds the .next element that is a descendant.

patrick dw 2010-07-08 11:32:57

You could onlineliner it even: `$('#container').append($('#posts', data));` --- Not that your example does this, but beware of calling `$(data)`/`$('#posts',data)` multiple times in this callback! That could potentially be a whole lot of unneeded processing/memory...

gnarf 2010-07-08 11:37:10

@gnarf - Actually `$("#posts", data).appendTo("#container");` would be less wasteful :)

Nick Craver 2010-07-08 11:40:59

@Nick: just costs readability :)

jAndy 2010-07-08 11:45:53

@Nick - Doesn't jQuery just flip it around into an `.append()`? http://github.com/jquery/jquery/blob/1.4.2/src/manipulation.js#L445

patrick dw 2010-07-08 11:49:03

@jAndy - That's a matter of opinion I think..."find `#posts` in data, append it to `#container`"...to me it's much *more* readable. You think "get data, find posts in it, then find container, append posts you found earlier to it" is better somehow? :)

Nick Craver 2010-07-08 11:50:39

@patrick - Yep, I was replying to gnarfs version that creates an extra jQuery object on the end there.

Nick Craver 2010-07-08 11:52:31

@Nick - Yes, but it seems that jQuery creates the same jQuery object with `appendTo()` when it flips it around. Maybe I'm misunderstanding you.

patrick dw 2010-07-08 11:54:24

@patrick - On a single element it's doing this: `insert[original]( this[0]);`, inserting the DOM element (original == "append"), not having that extra jQuery object in the chain, it's references, `.prevObject`, etc, it's tossed ASAP once it has the DOM element.

Nick Craver 2010-07-08 11:59:28

@Nick: heh, I'd like `$(data).find('#posts').appendTo('#container');` just because of the confusing order otherwise.

jAndy 2010-07-08 11:59:57

@jAndy - That version works equally well, since `$("#posts", data)` is `$(data).find("#posts")` under the covers. My point was more of "what's readable" depends on the programmer, I find all of these easy to discern. That's not to say which is best for everyone, that varies, just that the more familiar you get, other permutations/formats become more readable as well. Sit me down in front of a perl script and I'd call it unreadable ;)

Nick Craver 2010-07-08 12:04:11

@Nick - Just seems that `insert[original]( this[0]);` is equivalent to `$('#container').append($('#posts', data)[0]);` since `insert` is the selector for `.appendTo(selector)` wrapped in a jQuery object.

patrick dw 2010-07-08 12:23:24

i tried `alert($data.find("#posts").html());` and `alert($("#posts", data).html());` both returned null. but `alert(data)` gives the correct output

jiewmeng 2010-07-08 13:23:09

@jiewmeng - Did you notice my code comment about using `.filter()`? If the element you want is at the top level, meaning it doesn't have a parent element in `data`, you'll need to use `.filter()` instead of `.find()`. I'll update my answer to make it more clear.

patrick dw 2010-07-08 13:42:22

@jiewmeng - ...by the way, don't be confused by the conversation above. They are suggesting different forms of what is ultimately the same thing. It is just a discussion about practices/efficiency/readability. :o)

patrick dw 2010-07-08 13:50:28

oh yes `filter()` works. but i am wondering why. when i alert data, the output is the whole HTML structure, `<html><head/><body>...` so it should be hierarchical and i shld be using find? ok i will post a more complete dump of what is output in `alert()` in the update above

jiewmeng 2010-07-09 02:14:31

btw, `nextHref = $data.filter("#pageNav .next").attr("href"); alert(nextHref);` does not seem to select anything ...

jiewmeng 2010-07-09 02:24:54

@jiewmeng - Yes, jQuery places the direct children of the `body` tag in the array of the jQuery object. Using the code you posted, the result is an array of 8 nodes (including text nodes), and `#posts` is one of them because it is a direct child of `body`. When you use `filter()` you are only testing against the top items in that array. This is why `.filter('#posts')` works, but `.filter('#posts .next')` doesn't. It is because `.next` is a descendant of `#posts`. You need to `.filter('#posts').find('.next')` in order to filter the set down to `#posts` and find its descendants.

patrick dw 2010-07-09 11:43:20

Answer 3

A:

$.get("YadaYadaYada.php", function(dat) {
   $(dat).find("body > #posts").appendTo("#container");
});

Josh Stodola 2010-07-09 02:28:11

Whoops, I should have read the comments to the other answer...

Josh Stodola 2010-07-09 02:31:59

ansaurus

tags:

views:

answers:

jQuery use .load() to append data instead of replace

UPDATE

related questions