Question

I’m trying to allow users to delete multiple records, they click a link “delete” and a dialog shows saying are you sure? On clicking OK it should delete.

It works for the first time I do it, but for any other delete buttons I click it doesn’t work. I’m setting a hidden field to store some information then getting that information in the dialog.

I have identified the problem see comment in code, but not sure why its a problem.

This is for the delete buttons:

 $(".delete-item").click(function () {
            $(this).css('font-weight', 'bold');
            var delId = $(this).attr("id");
            $("#hidden-itemid").val(delId);
            $("#dialog-delete-sure").dialog("open");

        });

heres the dialog:

    $("#dialog-delete-sure").dialog({
        autoOpen: false,
        resizable: false,
        height: 140,
        modal: true,
        buttons: {
            Ok: function () {
                var hiddenId = $("#hidden-itemid").val();//*** This comes back undefined the second time***//
                var itemId = $("#hidden-itemid").val().split('-')[1];
                var iType = $("#hidden-itemid").val().split('-')[0];

                $.post('/User/Delete/', { id: itemId, itemType: iType }, function (json) {
                    if (json.success) {
                        $("#" + iType + "-row-" + itemId).hide('slow', function () { $("#hidden-itemid").remove(); });
                        $("#dialog-success-delete").dialog("open");
                    } else {
                        if (json.error == "unknown") {
                            $("#dialog-unknown-error").dialog("open");
                        }
                        if (json.error == "unauthenticated") {
                            $("#dialog-unauthenticated").dialog("open");
                        }
                    }
                });
                $("#hidden-itemid").css('font-weight', 'normal');
                $(this).dialog("close");

            },
            Cancel: function () {
                $(this).dialog("close");
            }
        }
    });

a typical delete button looks like this:

<a id="event-63" class="delete-item">Delete</a>

any ideas?

Answer 1

You are running

$("#hidden-itemid").remove();

on json.success so you remove the element from the DOM .. next time it does not exists and thus you get an error..