CODEWITHSUNDEEP
javascriptjqueryajaxappend
thedev
thedev

Reputation: 2886

JQuery Append AJAX

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

Upvotes: 9

Views: 35433

Answers (6)

Kirill Fuchs
Kirill Fuchs

Reputation: 13686

From the sound of it you just want to add a div with new post information to an already existing div like the html below:

<div id="Posts">
  <!-- post -->
  <!-- post -->  
  <!-- post -->  
</div>

You can simply do:

jQuery('#Posts').append(jQuery('<div>').load(...));

Upvotes: 1

TimSonOfSteve
TimSonOfSteve

Reputation: 36

Personally I would use $.get()

$('#load-posts a').click(function() { 
    if(pageNum <= max) {
        var nextArticles = $.get(nextLink + ' article')

        nextArticles.success(function() {
            // Update page number and nextLink.
            // Update the button message. 
        };
    }
});

Upvotes: 1

Shyju
Shyju

Reputation: 218722

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);
      });           
   }
});

Upvotes: 2

thecodeparadox
thecodeparadox

Reputation: 87073

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());                 
                }
            }
        );          
    }

Upvotes: 1

adeneo
adeneo

Reputation: 318182

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.

Upvotes: 18

epascarello
epascarello

Reputation: 207501

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());
});

Upvotes: 11

Related Questions