jQuery modal user delete option with mysql

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?

MiDri · Accepted Answer · 2012-05-15 20:45:21Z

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

edited May 15, 2012 at 20:45

answered May 15, 2012 at 20:39

MiDri

7473 silver badges13 bronze badges

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

2 Comments

JPM Over a year ago

Wow this was really helpfull. Didn't know anything about the attribute function until now. This is really an easy way to handle it :)

MiDri Over a year ago

You can use it in CSS as well. a[data-user-id] for example would style all anchors with an attribute named data-user-id set -- really helps move away from class based styling and allows you to be a LOT more organized.

Collectives™ on Stack Overflow

jQuery modal user delete option with mysql

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related