jquery dialog calls a server side method with button parameters

Question

Hello all,
I have a gridview control with delete asp:ImageButton for each row of the grid. What I would like is for a jquery dialog to pop up when a user clicks the delete button to ask if they are sure they want to delete it.
So far I have the dialog coming up just fine, Ive got buttons on that dialog and I can make the buttons call server side methods but its getting the dialog to know the ID of the row that the user has selected and then passing that to the server side code.

The button in the page row is currently just an 'a' tag with the id 'dialog_link'. The jquery on the page looks like this:

$("button").button();
    $("#DeleteButton").click(function () {
        $.ajax({
            type: "POST",
            url: "ManageUsers.aspx/DeleteUser",
            data: "{}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (msg) {

                // Replace the div's content with the page method's return.
                $("#DeleteButton").text(msg.d);
            }
        });
    });

    // Dialog           
    $('#dialog').dialog({
        autoOpen: false,
        width: 400,
        modal: true,
        bgiframe: true

    });

    // Dialog Link
    $('#dialog_link').click(function () {
        $('#dialog').dialog('open');
        return false;
    });

The dialog itself is just a set of 'div' tags. Ive thought of lots of different ways of doing this (parameter passing, session variable etc...) but cant figure out how to get any of them working. Any ideas are most welcome

As always, thanks in advance to those who contribute.

Answer 1

Hi,

I've recently done something exactly the same at work - confirmation of a delete item. I solved it by using the Data http://docs.jquery.com/Data method to store the value I wanted to pass along.

So for example my delete links had the following:

<a href="#" class="delete" id="1">Delete</a>

Then monitor all clicks on for class "delete", when this happens set the data on the dialog:

$("#dialog").data("id", $(this).attr("id"));

Which will then be accessible when you're in your dialog.

$("#dialog-confirm").dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            'Delete': function() {
                alert($(this).data('id'));
                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });

Hope this helps, shout if it's not clear.