Delete MySQL data with php through ajax and jquery, show page without deleted data

Question

I have this link (shown below). When it is clicked it sends the id of a post to a PHP file called delete_post.php which in turn deletes the post with that id out of my MySQL database. This works great except that after the post is deleted the post is still displayed on the page until it is refreshed. How could I make it so the post is removed from my page as soon as I click the link, rather than after I click the link and after I refresh the page.

<a href="javascript:$.post('delete_post.php', { id: '$row[id]' } );" class='delete_post' title='delete post'>delete post</a>

mauris · Accepted Answer · 2011-03-11 02:10:18Z

2

Add an ID (using the $row['id']) to the div / table row (the container) that is holding your post.
After the AJAX is completed, you then simply hide the container.

To hide the container after your AJAX is complete, simply modify your $.post by adding a callback function like this:

javascript:$.post('delete_post.php', { id: '$row[id]' } , function(){ $('#row$row[id]').hide(); });

answered Mar 11, 2011 at 2:10

mauris

43.6k16 gold badges102 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

uadnal Over a year ago

If you don't need to access the element again, you should remove it from the dom entirely using .remove() $('#row$row[id]').hide(0,function() {$(this).remove()}

Stephen Walcher · Accepted Answer · 2011-03-11 02:27:13Z

0

I'm not familar with the jQuery code (I could do it in Prototype if you want an example) but, you should attach listeners to the links instead of calling the AJAX inline. That way you can use jQuery's DOM traversal functions to move up to the parent div or table row and just simply .remove() it after you get the successful response from your AJAX call.

answered Mar 11, 2011 at 2:27

Stephen Walcher

2,5751 gold badge21 silver badges22 bronze badges

Comments

vicTROLLA · Accepted Answer · 2011-03-11 02:11:53Z

-1

There is an optional third parameter to the post() function that allows you to create an anonymous function that is executed on success.

<a href="javascript:$.post('delete_post.php', { id: '$row[id]' }, function() { location.reload(); } );" class='delete_post' title='delete post'>delete post</a>

answered Mar 11, 2011 at 2:11

vicTROLLA

1,52712 silver badges16 bronze badges

2 Comments

Web_Designer Over a year ago

The whole reason of doing this with ajax was so that I did not have to reload the whole page. Thanks for your help though :)

renathy Over a year ago

Reloading page? This is not the ajax thing.

Collectives™ on Stack Overflow

Delete MySQL data with php through ajax and jquery, show page without deleted data

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related