JQuery Append AJAX

Question

I am using the following script to load some Wordpress posts. Unfortunately this replaces my content and I would like to append to the existing content.

What is your suggestion on appending using AJAX call.

$('#load-posts a').click(function() { 
    if(pageNum <= max) {
        $('#content').load(nextLink + ' article',
            function() {            
                // Update page number and nextLink.
                // Update the button message.                   
                }
            }
        );          
    }
});

Thanks

Answer 1

load() replaces the content, but it's basically just a shortcut for $.get, so use that instead.

$('#load-posts a').click(function() { 
    if(pageNum <= max) {
        $.get(nextLink + ' article', function(data) {   
           $('#content').append(data);
        });
    }
});

If filtering specific elements with load(), you will have to do that yourself.

Answer 2

load replaces the content of the parent. One way of doing it is loading content to a new div and than appending it to the element.

$("<div>").load(nextLink + ' article', function() {
    $("#content").append($(this).html());
});

Answer 3

I would use getJson method to get a JSON response where i have 3 parts. one for the Content , another for the NextLink and Third for the PateNumber. Then i will read the Json Result and use it in the relevant place.

You can return a JSON like this

{
    "Content": "<p>Some New Content</p>",
    "NextLink": "page.php?no=34",
    "PageNumber": "34"
}

and in your getJSON, you can read the items and use it

$('#load-posts a').click(function() { 
   if(pageNum <= max) {
      $.getJSON(nextLink,function(jSonResult){         
          $('#content').append(jSonResult.Content);
          $("#nextLink").html(jSonResult.NextLink);
          $("#pageNumber").html(jSonResult.PageNumber);
      });           
   }
});

Answer 4

if(pageNum <= max) {
        $('body').append($('<div id="hiddenContainer" style="display:none"></div>')); // a hidden container to store response
        $('#hiddenContainer').load(nextLink + ' article',
            function() {            
                $('#content').append($('#hiddenContainer').html());                 
                }
            }
        );          
    }