jQuery and ajax to update rows in MySQL while in jQueryUI dialogbox widget

Question

Okay, before anyone blasts me into space with this question (I've read the questions with similar titles prior), here's where I'm at.

I've heavily integrated jQueryUI into my web application and one of the widgets I use is the dialogbox. User clicks a button (selector) and it pops out a list of his friends. Beside every friend is a DELETE button which goes:

<form method="post" action="togglefriend.php">
 <input type="hidden" value="<?=$uid;?>" name="uid" />
 <input type="hidden" value="<?=$fid;?>" name="fid" />
 <input type="hidden" value="action" name="delete" />
 <input type="submit" value="Delete" />
</form>

togglefriend.php does the updating after sanitation with:

mysql_query("UPDATE friends SET isapproved='0' WHERE uid='$uid' AND fid='$fid'");

This method, of course, exits the dialogbox widget and shows the user results from togglefriend.php (or the page it redirects to). I like the idea of the user not having to exit the dialogbox widget so they could delete as many friends as they want. It will have to update the MySQL database, at the same time remove the entire <tr></tr> of that specific friend from div the dialogbox is showing from.

I know a little about jQuery's ajax() and post() methods (I use post() and load() to get the contents of the dialogbox) but just couldn't think of a workaround on this one. If anyone could probably provide examples or point me to the direction where I could learn the easiest (the docs I've read are just too much for a newbie like me) - it would be greatly appreciated.

Answer 1

Something like this should work.

$.ajax({
  type: 'POST',
  url: 'togglefriend.php',
  data: 'uid=888&fid=999',
  success: function() {
      $('#friend-999').hide();  //assuming you give each <tr> a unique ID.
    });
});