The jQuery .html
and .load()
is replacing the entire content.
First, move your #Pagination
outside of the ul.list-group
. You will want this to continue to remain at the bottom of the list.
Next, you will need to reconfigure your jQuery ajax to load the posts differently. You should load the posts from the next page, and append them to the list.
Untested, but something along these lines should work.
jQuery('#Pagination a').on('click', function(e) { e.preventDefault(); var link = jQuery(this).attr('href'); var loading = jQuery('Loading'); jQuery('.list-group').append(loading); $.ajax({ url: link, success: function(data) { var newPosts = data.find('#contentInner .list-group').html(); $('#contentInner .list-group').append(newPosts); }, error: function(jqXHR, textStatus, errorThrown) { console.log(textStatus); console.log(errorThrown); $('#loading').text("Error loading posts"); } }); });
You might also consider changing the way the pagination works. Is it number pagination? or just Prev/Next?
You can change the href
on your pagination links by using the data.find
in the success
function to grab the href
of the paginations on that page.
Either way, this seems like it is going to present some UX problems once you get it working and start playing with it.