Question

我想通过点击相应的删除按钮从我的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();});
               }
         });
    }
});

Answer 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');
            }
        }
    ]
});

Answer 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]。）

如何在对话框ok按钮单击上运行$ .ajax方法

2 个答案: