Question

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

Answer 1

你可以这样做，检查Jquery Dialogbox例子，绑定Repeater时，您将事件处理程序附加到它。像这样

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

您可以在“确定”按钮单击处理程序中调用__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/

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

3 个答案: