Question

If a user clicks the delete user button, I display a modal window asking for confirmation of the delete. Within the modal window, if they click yes, then a function is called to delete the user (via ajax). If no, then the modal window is just closed. That is how it should work. But I don’t know how to pass the user ID to the yes button. Below is what I have so far to delete the user but it may be way off.

<div class="modal hide fade" id="DeleteUserModal">
<div class="modal-header">
    <button class="close" data-dismiss="modal">x</button>
    <h3>Delete User?</h3>
</div>
<div class="modal-body">
    <div class="row-fluid">
        <div class="span12">
            <p>Are you sure you want to permanently remove this user?</p>
        </div>
    </div>
    <div class="row-fluid">
        <div class="span12">
            <a href="javascript:deleteUser(#rsData.UserID#)" class="btn btn-danger">Yes, I'm sure</a>
            <button class="btn" type="submit" data-dismiss="modal">No way!</button>
        </div>            
    </div>
</div>
<div class="modal-footer">
    <a href="##" class="btn" data-dismiss="modal">Close</a>
</div>

I do not know how to pass the userid to this specific line in the above modal window:

<a href="javascript:deleteUser(#rsData.UserID#)" class="btn btn-danger">Yes, I'm sure</a>

While I am using jQuery, the answer can be written in JavaScript.

Answer 1

Use the data-attributes. They’ll make you happy. http://www.broken-links.com/2010/11/18/data-attributes-in-html-and-jquery/

Rather give this node:

<a href="javascript:deleteUser(#rsData.UserID#)" class="btn btn-danger">Yes, I'm sure</a>

..an id:

<a id="delete-user-link" class="btn btn-danger">Yes, I'm sure</a>

..when you want to delete a specific user (thus click on the delete button in the list), set the data-attribute for the specific user-id:

$(".delete-button").click(function(){
    $("#delete-user-link").data("user-id", $(this).data("user-id");
    // show the modal
});

this does require your delete-buttons (in the list) to have a data-attribute, like:

<a class="btn" data-user-id="123">delete</a>

and add a small jQuery method:

$("#delete-user-link").click(function(){
    var userId = $(this).data("user-id");
    // do your delete stuff here
});

That should do the trick!