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.

Im a little confused on what the part that you're getting hung up is. How to remove the TR from the div? You can just add an id tag to the tr's based on your uid, and modify the table based on the TR ID that way. If that's not the issue please let us know! Thanks — DaOgre
– DaOgre, Commented Jan 31, 2012 at 1:48
When the Delete button is clicked beside a user, I'd like for it to perform an ajax action (update the sql database and remove the table row). This is where I'm actually lost. No knowledge on how to do it to be specific. Because what I'm doing right now is sending the POST data to another page with exits the dialogbox widget. — MikeS
– MikeS, Commented Jan 31, 2012 at 1:53
if you want it to be clicked, why not put an onclick event? that fires a function. inside the function is an ajax call to your php that does the CRUD (deleting)? — ianace
– ianace, Commented Jan 31, 2012 at 2:24
@ianace That's exactly what I want it to do. Just 0% clue on how. — MikeS
– MikeS, Commented Jan 31, 2012 at 2:30

Alex · Accepted Answer · 2012-01-31 02:32:52Z

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

answered Jan 31, 2012 at 2:32

Alex

2,4202 gold badges21 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related