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

<a href="bla" data-user-id="5">Click me!</a>

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