jQuery append() data to a div by doing a .get() from a hyperlink

Question

I want to achieve something like this. Here the page automatically loads new content when I scroll down. I want to fetch the new set of data by clicking on a hyperlink at the bottom of my page.

Being a newbie to AJAX, I was checking out this question which is similar to mine, but it isn't working. All I get is an empty Object when I run the code. Here's the code in my files:

index.php

<a href="about.php">About Me</a> <br>
<a href="contact.php">Contact Me</a>
<div class="wrap"></div>

<script>
    (function(){
        var wrap = $('div.wrap');
        $('a').on('click', function(e){
            var href = $(this).attr('href');
            $.get(href, function(data){
                console.log($(data).find('div.container'));
                $(data).find("div.container").appendTo(wrap);
            });
            e.preventDefault();
        });
    })();
</script>

about.php

</div>
<div class="container">
    <h2>About Me</h2>
    <p>I suck at AJAX ! :-(</p>
</div>

contact.php

<div class="container"><h1>Contact!</h1>
  <form action="#">
  <textarea name="content" id="content" cols="30" rows="10"></textarea>
  <input type="url" name="url" id="url">
  <p><button type="submit">Save</button></p>
  </form>
</div>

Screenshot:

Screenshot of empty Object

Am I missing something? Does .get() work inside the callback function of click() event? But it works fine when I .load() it... Sorry for the big post but I'm totally at a loss here! :/ Please help me out?

Scott · Accepted Answer · 2012-09-02T14:35:30.373

1

(function(){
    var wrap = $('div.wrap');
    $('a').on('click', function(e){
        var href = $(this).attr('href');
        $.get(href, function(data){
            console.log($(data).filter('div.container'));
            wrap.append($(data).filter(".container"));
        });
        e.preventDefault();
    });
})();

edited Sep 02 '12 at 14:35

answered Sep 02 '12 at 14:01

Scott

21,211
8
65
72

It doesn't work! :( It logs the `data` to the console (returns the whole html tags for each pages) but the `.find()` doesn't seem to work on `$(data)` – maxxon15 Sep 02 '12 at 14:09
I have updated to `.filter()` and added missing line. Does that help? – Scott Sep 02 '12 at 14:17
`.get` is a simplified `.ajax` and should work here; moreover, `.ajax` only accepts a single object, no `$.ajax(href, {})` syntax. – pimvdb Sep 02 '12 at 14:29
@Scott It works! :D Thanks a ton! I love stackoverflow! But still I don't quite understand why `.find()` isn't working here?! – maxxon15 Sep 02 '12 at 14:59
@Scott Nevermind now I got it! ^_^ http://stackoverflow.com/questions/12236431/jquery-append-data-to-a-div-by-doing-a-get-from-a-hyperlink/12236564#comment16399979_12236564 – maxxon15 Sep 02 '12 at 15:12

nbrooks · Answer 2 · 2012-09-02T14:40:07.043

1

As for why $.get() isn't working, you need to get the returned data ready for use by the DOM traversal techniques:

(function(){
    var wrap = $('div.wrap');
    $('a').on('click', function(e){
        e.preventDefault();
        var href = $(this).attr('href');
        $.get(href, function(data){
            var $content = $('<div />').html(data);
            console.log( $content.find('div.container') );
            $content.find("div.container").appendTo(wrap);
        });
    });
})();

jsFiddle Demo Note that jsFiddle's testing resources required $.post instead of $.get, but the principle is the same.

Similar thing, accomplished using .load() (jsFiddle demo):

(function(){
    var wrap = $('div.wrap');
    $('a').on('click', function(e){
        e.preventDefault();
        var href = $(this).attr('href');
        $('<div />')
            .load(href +' div.container')
            .appendTo(wrap)
            .children(':first-child')
            .unwrap();
    });
})();

edited Sep 02 '12 at 14:40

answered Sep 02 '12 at 14:01

nbrooks

18,126
5
54
66

Yeah. That works, but I'm trying to _append_ the value to the `.wrap` div **index.php** each time I click on the link. I showed an example in the link. – maxxon15 Sep 02 '12 at 14:12
@maxxon15 Fair enough. You could always load it into a hidden `
` then append the contents to `.wrap` from that as an alternative. Anyway, have a look at the updated code/demo and let me know if that solves your prob.
– nbrooks Sep 02 '12 at 14:26
It does work! Thanks! :) But I kinda lost it at `var $content = $('
').html(data);` I don't understand .... First: Why the `html()` ? Isn't `data` in HTML format already? Second: Are you wrapping it with a new `
`? This is not the `.container` div right?
– maxxon15 Sep 02 '12 at 15:03
1

`.find()` searches for *descendants* of the current element, so if the current element is already what you're searching for, you won't find it. Wrapping it the new `
` allows you to abstract out from the content returned from the server, and then traverse freely. (Yes the data is already html, this is just a blank wrapper.)
– nbrooks Sep 02 '12 at 15:06
**Ooohh**... Now I get it... That's why Scott used `.filter()`! Thanks again! :D – maxxon15 Sep 02 '12 at 15:11

jQuery append() data to a div by doing a .get() from a hyperlink

2 Answers2