Delete an article and pull in the first one from next page

Question

I'm trying to build a blog with a pagination system (ex. 5 articles per page). Everything is fine with the pagination itself but next to each article I included a "delete" button allowing the admin to remove dynamically (jquery)the related article and its content. What I want now is to "append" (without refreshing) the first article of the next page when I delete an article, the second when I delete another article, then the third and so on. I want this to avoid to have a blank page if I keep on deleting articles without refreshing.

I'm actually using php and a mysql database to store data for paginating I'm using something similar to this link.

Answer 1

I originally answered on the duplicate, but think that might get deleted, so copying here:

jQuery makes it nice and easy. This assumes you've got a php file called ajax/delete-article.php which takes an article id to be deleted as a parameter, and the article id of the last article on the page as a parameter, and returns the HTML of the next article. It also assumes all your articles have the "article" class, and the id "article-230" where 230 is the ID number. I'm sure you can adapt it to your own HTML structure.

$('.article-delete').click(function (event) {
  $(this).closest('.article').remove(); // possibly use a more fancy-looking hide(), and remove on complete?

  var lastArticleId = $('.article').last().attr('id').replace('article-','');
  var thisArticleId = $(this).attr('id').replace('article-','');
  $.get('ajax/next-article.php?last-article=' + lastArticleId + '&article-to-delete=' + thisArticleId ,function (data) {
    $('#article-list').append(data);
  });
  event.preventDefault();
});

Note that this is just a rough example. Will require some improvements for robustness. Its also untested, so it might throw up JS errors everywhere.

Answer 2

basically when you successfully delete an article, in the SAME request (don't make another one, is not necessary) you retrieve also (if any) next article after the last in page (by id, publication date or other) and return the HTML code to append

to be clear: if we suppose you are looking to articles 16,17,18,19,20 you know that last element in page is 20. If you delete article 17 then you retrieve element 21, append in page and set this value 21 as last value in page (and so on)