如何在对话框确定按钮单击上运行 $.ajax 方法答案

【问题标题】：how to run an $.ajax method on dialog ok button click如何在对话框确定按钮单击上运行 $.ajax 方法
【发布时间】：2016-01-14 10:11:29
【问题描述】：

我想通过单击相应的删除按钮从我的 html 表中删除一行。发生的情况是，如果我使用确认框，那么一切正常，但我不想使用确认框而不是我想使用带有确定按钮的对话框，并且单击确定按钮时，它应该执行与它相同的功能使用确认框。我提供了两个代码，一个带有确认框，另一个带有对话框。帮助我对那个对话框做同样的事情。确认框的jquery代码可以正常工作-

$(document).ready(function()
{
    $('input[type=button]').click(function()
    {
        if (confirm("Are you sure you want to delete this row?"))
        {
            var ID = $(this).parent().parent().attr('id');
            var data = 'id=' + ID ;
            var parent = $(this).parent().parent();

            $.ajax(
            {
                   type: "POST",
                   url: "delete.php",
                   data: data,
                   cache: false,

                   success: function()
                   {
                    parent.fadeOut('slow', function() {$(this).remove();});
                   }
             });
        }
    });


});

带有对话框的jquery代码-

$(document).ready(function(){
$('#modal').dialog({
    autoOpen: false,
     title: 'Delete Confirm Box',
     width: 400,
      buttons : [
            {
                text: 'OK',
                click: function () {
                    $("#modal").dialog('close');
                       del_row();
                       alert("done");        
                }
            },
            {
                text: 'Cancel',
                click: function () {
                    $("#modal").dialog('close');
                }
            }
        ]
});
$('input[type=button]').click(function(){
   $('#modal').dialog('open');
    });
 });
and the part which  i want to execute on ok click of dialog box-
$('input[type=button]').click(function()
{
    if (confirm("Are you sure you want to delete this row?"))
    {
        var ID = $(this).parent().parent().attr('id');
        var data = 'id=' + ID ;
        var parent = $(this).parent().parent();

        $.ajax(
        {
               type: "POST",
               url: "delete.php",
               data: data,
               cache: false,

               success: function()
               {
                parent.fadeOut('slow', function() {$(this).remove();});
               }
         });
    }
});

【问题讨论】：

如果我理解您要执行的操作，您只需将input[type=button] 单击处理程序中的代码复制到对话框的OK 按钮单击处理程序中...？跨度>
是的，实际上..但是这样做时，“this”关键字指的是对话框，而 this 指的是输入[type=button]，因此更改发生在相应的行中。即。相应的行被删除..我尝试将该代码复制到确定按钮单击处理程序中，但它淡出整个页面
我如何包含 input[type=button ]click 的相应行..以便可以对其执行操作。

标签： jquery ajax dialog

【解决方案1】：

你需要创建ID和parent作为全局变量，并在$('input[type=button]')点击函数中设置。这样你就可以使用this。之后，在模态框的 ok 函数中，引发 ajax 调用：

var ID = 0;
var parent = null;

$('input[type=button]').click(function(){
   ID = $(this).parent().parent().attr('id');
   parent = $(this).parent().parent();
   $('#modal').dialog('open');
});

$('#modal').dialog({
    autoOpen: false,
    title: 'Delete Confirm Box',
    width: 400,
    buttons : [
        {
            text: 'OK',
            click: function () {
                $("#modal").dialog('close');

                var data = 'id=' + ID;
                $.ajax(
                {
                    type: "POST",
                    url: "delete.php",
                    data: data,
                    cache: false,
                    success: function()
                    {
                        parent.fadeOut('slow', function(){
                            $(this).remove();
                        });
                    }
                });    
            }
        },
        {
            text: 'Cancel',
            click: function () {
                $("#modal").dialog('close');
            }
        }
    ]
});

【讨论】：

【解决方案2】：

我不喜欢在我的代码中引入全局变量，所以我通过使用addClass jquery 函数找到了解决此问题的方法。只需添加一个类来标识要在代码中删除的 html 元素，以便可以从模式内部过滤/搜索它。

$('input[type=button]').click(function(){
   $(this).parent().parent().addClass("ToBeDeleted");
   $('#modal').dialog('open');
});

$('#modal').dialog({
    autoOpen: false,
    title: 'Delete Confirm Box',
    width: 400,
    buttons : [
        {
            text: 'OK',
            click: function () {
                $("#modal").dialog('close');

                var $parent = $(".ToBeDeleted");
                var ID = $parent.attr('id');
                var data = 'id=' + ID;
                $.ajax(
                {
                    type: "POST",
                    url: "delete.php",
                    data: data,
                    cache: false,
                    success: function()
                    {
                        $parent.fadeOut('slow', function(){
                            $(this).remove();
                        });
                    }
                });    
            }
        },
        {
            text: 'Cancel',
            click: function () {
                $("#modal").dialog('close');
            }
        }
    ]
});

现在，由于我们将类添加到$(this).parent().parent() 的元素被remove() 函数删除，因此我们在代码中添加的类不会留下任何痕迹。因此它不会干扰代码的重复执行（例如，如果您的代码中有多个 input[type=button]。）

【讨论】：