Question

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

如果点击“确认”，如何才能调用ajax功能？

这里我有对话框div：

TT.Col_X

我在这里初始化对话框

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

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

 $('#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);
                }
            }

        });
    }
});

Answer 1

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

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

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

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

Answer 3

好的，我明白了。我需要（由于某种原因我还不知道）在对话框初始化中添加空单击功能。我现在能够提交表单并获得对话框。如果我单击取消，它将关闭。如果我单击确认，则ajax返回我需要的内容。

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

"start_url": "/en?utm_source=a2hs",

无法在jQuery Dialog按钮功能中放置ajax调用。返回null

3 个答案: