jquery - 使用 jQuery UI 对话框的 ASP.Net 图像按钮删除确认

Question

我正在使用中继器来显示数据行。每行都有一个删除图像按钮。我想使用 jQuery UI 添加一个确认对话框。单击删除图像按钮时，对话框正确显示。我不确定的是，当单击对话框上的 OK 按钮时，如何从 jQuery 调用 Image 按钮的事件处理程序。

Answer 1

你可以做这样的事情，检查Jquery Dialogbox示例，同时绑定你附加事件处理程序的中继器。像这样

yourbutton.Attributes.Add("onclick","Deletbox('" + yourDeleteID + "'))";

javascript函数：

var deleteId;//this the global variable to hold the value 


function Deletebox(ID)
{
  ( "#YourDialog" ).data('DeleteID',ID).dialog('open');
}

这是用于对话框初始化程序

     $( "#YourDialog" ).dialog({
                    modal: true, //this will make a modal form
                                open:function()
                                {
                                      deleteId=$(this).data('DeleteID'); 
                                },
                    buttons: { // this is the buttons which you are going to show in box
                        "Delete all items": function() {
                            CallYourdeletionMethodFromServer(deleteId)// by using $.Ajax function
                        },
                        Cancel: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                });

Answer 2

您可以在 OK 按钮单击处理程序中调用该__doPostBack函数。您需要保留最初单击以打开对话框并将其作为第一个参数传递的按钮的 ID。

Answer 3

<div class="Parent">
        <div>
            test1
        </div>
        <div>
            <input type="button" value="Delete" onclick="Deletemessage(1,this);" />
        </div>
    </div>
    <div class="Parent">
        <div>
            test2
        </div>
        <div>
            <input type="button" value="Delete" onclick="Deletemessage(1,this);" />
        </div>
    </div>


function Deletemessage(id, obj) {
            $('<div></div>').appendTo('body')
                    .html('<div><h6>Are you want to delete this part?</h6></div>')
                    .dialog({
                        modal: true, title: 'Delete message', zIndex: 10000, autoOpen: true,
                        width: 'auto', modal: true, resizable: false,
                        buttons: {
                            Ok: function () {
                                $(obj).removeAttr('onclick');

                                //                                $.ajax({
                                //                                    url: '/yourPath', type: 'Post', dataType: 'json',
                                //                                    data: { 'id': id },
                                //                                    success: function (data) {
                                $(obj).parents('.Parent').remove();

                                //Or

                                //window.location.reload();

                                //                                    }
                                //                                });

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

对于现场演示，请参阅此链接：http: //jsfiddle.net/nanoquantumtech/9NKXq/