无法在 jQuery 对话框按钮功能中放置 ajax 调用。返回空答案

【问题标题】：Cannot place ajax call within jQuery Dialog button function. Returns null无法在 jQuery 对话框按钮功能中放置 ajax 调用。返回空
【发布时间】：2018-05-23 05:02:41
【问题描述】：

我需要确认用户是否真的想通过 jQuery 对话框按钮提交表单。我试图将我的 ajax 函数放在我的“确认”函数中，但它返回 NULL。

如果他们点击“确认”，我如何仅调用 ajax 函数？

这里有我的对话框 div：

echo "<div id=\"dialog_confirm\">
      <p style=\"font-size:20px; color:white;\">Are you sure you wanna do that?</p>
      <p style=\"font-size:20px; color:white;\">All records will be removed!</p>
  </div>";

在这里我初始化我的对话框

//Confirmation dialog
    $('#dialog_confirm').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        show: {
            effect: "blind",
            duration: 500
        },
        hide: {
            effect: "fade",
            duration: 500
        },
        buttons: {
            "Confirm": function () { //Tried to place my ajax function
                                     //here but it returned null
                $(this).dialog('close');
                $('#remove_domain_form')[0].reset();
            },
            "Cancel": function () {
                $(this).dialog('close');
            }
        }
    });

我的表单提交功能：

 $('#remove_domain_form').submit(function (e) {
    e.preventDefault();
    var isEmpty = false;
    $(':input:not(button)').each(function () {
        if ($(this).val() === "") {
            var error_text = $('#dialog p').text("All fields are required");
            $('#dialog').html(error_text);
            $('#dialog').dialog('option', 'title', 'Error').dialog('open');
            isEmpty = true;
        }
        else {
            $('#dialog_confirm').dialog('open');
        }
    });
    if (!isEmpty) {
        // <------ I NEED TO HAVE THE CONFIRMATION DIALOG HERE
        console.log("Not Empty");
        $.ajax({
            url: "check-domain-remove.php",
            type: "post",
            dataType: 'json',
            data: $('#remove_domain_form').serialize(),
            success: function (response) {
                if (response === "Success") {
                    //DO OTHER STUFF
                    var success_div = '<p class=\"input--success\">Domain Successfully Removed</p><br><br>';
                    $('body').append(success_div);
                }
            }

        });
    }
});

编辑：我还尝试将它放在一个触发关闭/确认事件的函数中，但仍然无济于事。如果我单击“确认”，它将返回 null。如果我点击“取消”，我会得到正确的结果！这太奇怪了，我不知道为什么会这样。

$('#dialog_confirm').bind('dialogclose', function(event, ui) {
        if($(event.target).text() != 'Cancel') {
            console.log("Clicked Confirm");
            $.ajax({
                url: "check-domain-remove.php",
                type: "post",
                dataType: 'json',
                data: $('#remove_domain_form').serialize(),
                success: function (response) {
                    if (response === "Success") {
                        //DO OTHER STUFF
                        var success_div = '<p class=\"input--success\">Domain Successfully Removed</p><br><br>';
                        $('body').append(success_div);
                    }
                }

            });
        }
    });

【问题讨论】：

所以你有一个按钮，如果他们点击它会打开一个模式，然后用户需要点击确认来提交表单？
为什么不返回false；循环中的语句以停止脚本并删除之后的 if 语句，然后使用您的 ajax 请求，这样如果它通过验证，它将只运行 ajax
@Keith - 是的，它应该在确认时提交。
#remove_domain_form 是第一个按钮还是确认按钮？
#remove_domain_form 是初始表单按钮，然后会弹出确认。

标签： jquery ajax jquery-ui-dialog

【解决方案1】：

这可能与加载 jQuery 时元素不存在有关。尝试将您的代码更改为：

$(document).on('submit', '#remove_domain_form', function (e) {...})

【讨论】：

查看我的更新。我试图将它绑定到关闭事件，它可以工作，但是使用“取消”按钮而不是“确认”按钮。 .submit() 函数不和你的代码做同样的事情吗？
嗯，这很奇怪。我写上述评论的原因是因为它在过去对我有用过很多次并且在一致的基础上。 .submit()、.click() 等确实有效，但我发现对于动态创建的元素，它们似乎不起作用。在我编写的代码中，它将侦听器附加到动态创建的元素上。

【解决方案2】：

好的，这样做：

$('#yourFirstButton').on('click', function (e) {
    e.preventDefault();
    $(':input:not(button)').each(function () {
        if ($(this).val() === "") {
            var error_text = $('#dialog p').text("All fields are required");
            $('#dialog').html(error_text);
            $('#dialog').dialog('option', 'title', 'Error').dialog('open');
            return false;
        }
        else {
            $('#dialog_confirm').dialog('open');
        }
    });        
});

$('#yourConfirmButton').on('click', function(){
    $('#remove_domain_form').submit(
        // <------ I NEED TO HAVE THE CONFIRMATION DIALOG HERE
        console.log("Not Empty");
        $.ajax({
            url: "check-domain-remove.php",
            type: "post",
            dataType: 'json',
            data: $('#remove_domain_form').serialize(),
            success: function (response) {
                if (response === "Success") {
                    //DO OTHER STUFF
                    var success_div = '<p class=\"input--success\">Domain Successfully Removed</p><br><br>';
                    $('body').append(success_div);
                }
            }    
        });
    )
});

因此验证在 return false 时中断，然后如果通过，则继续进行 ajax 调用。

【讨论】：

我试过了，它现在仍然在提交表单，然后给我确认对话框。但是，它现在不返回 null。
#remove_domain_form 是确认按钮吗？
更新了新代码以在确认按钮上提交表单
为按钮创建 id，编辑代码，并得到“无法读取未定义的属性 'apply'”
调试时，该错误出现在哪一行

【解决方案3】：

好的，我想通了。我需要（出于某种我还不知道的原因）在我的对话框初始化中添加空点击函数。我现在可以提交表单并获取对话框。如果我单击取消，它将关闭。如果我单击确认，ajax 会返回我需要的内容。

Keith，您创建 click 函数的建议几乎就是我所需要的。我只需要添加点击功能。

$('#dialog_confirm').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        show: {
            effect: "blind",
            duration: 500
        },
        hide: {
            effect: "fade",
            duration: 500
        },
        buttons: {
            'Confirm' : {
                text:'Confirm',
                id:'confirm_button',
                click:function() {
                    $(this).dialog('close');
                }
            },
            'Cancel' : {
                text:'Cancel',
                id:'cancel_button',
                click:function() {
                    $(this).dialog('close');
                }
            }
        }
    });

$('#remove_domain_form').submit(function (e) {
    e.preventDefault();
    //var isEmpty = false;
    $(':input:not(button)').each(function () {
        if ($(this).val() === "") {
            var error_text = $('#dialog p').text("All fields are required");
            $('#dialog').html(error_text);
            $('#dialog').dialog('option', 'title', 'Error').dialog('open');
            return false;
        }
        else {
            $('#dialog_confirm').dialog('open');
        }
    });

    $('#confirm_button').click(function() {
        console.log("Not Empty");
        $.ajax({
            url: "check-domain-remove.php",
            type: "post",
            dataType: 'json',
            data: $('#remove_domain_form').serialize(),
            success: function (response) {
                if (response === "Success") {
                    //DO OTHER STUFF
                    var success_div = '<p class=\"input--success\">Domain Successfully Removed</p><br><br>';
                    $('body').append(success_div);
                }
            }

        });
    });
});

【讨论】：