jQuery modal user delete option with mysql - php

Question

Hello I've got another question. I am creating an administration system. I added registration for users and a delete function. Now I need to make a good design.
So I created a table from a MySQL DB with following infos:
ID, Username, Last Login and Delete.
This is an extraction of my php code where I print the table:
echo "<td class=\"center\">
<a href=\"#\" class=\"delete_user\">
<img src=\"images/delete.png\" />
<script type=\"text/javascript\">
var id = \"index.php?section=user_delete&id=".$getUserID[$i]."\";
</script>
</a>
</td>
As you can see I am using the ID for the delete process.
Now I want to use a jQuery modal popup to make sure that I really want to delete this person.
This is my js code:
$(".delete_user").click(function() {
$( "#dialog_delete_user" ).dialog( "open" );
});
$( '#dialog_delete_user' ).dialog({
autoOpen: false,
resizable: false,
height: 170,
modal: true,
buttons: {
'ok': function() {
alert(id);
//document.location = id;
$( this ).dialog( 'close' );
}
}
});
As you can see I need to add a variable id to identify the person and make sure that the right person gets deleted.
I thought that the javascript only executes if i click the link. This seems to be incorrect.
So how can I define/identify each person?
The displayed table is useless cause there is no way to identify each delete button with its owner. So I have to define it right there where I create the table.
Without this jQuery modal form it would be easy. But there has to be a way to get it work. Any idea?

Answer 1

Personally I would set an attribute on the link that opens the dialog something like
Click me!
then in the onclick event of the link that opens the dialog box I would have it set the dialog's hidden user field to the value of $(this).data("user-id"); If you're not doing a form and just immediately firing an ajax request it gets even easier.
var currentUserId;
$(".delete_user").click(function() {
currentUserId = $(this).data("user-id");
$( "#dialog_delete_user" ).dialog( "open" );
});
$( '#dialog_delete_user' ).dialog({
autoOpen: false,
resizable: false,
height: 170,
modal: true,
buttons: {
'ok': function() {
//document.location = "/somephpfile.php?user_id=" + currentUserId;
$( this ).dialog( 'close' );
// ajax version
$.ajax({
url : "/somephpfile.php?user_id=" + currentUserId,
// Other ajax related code.
});
}
}
});