Question

我有一个非常简单的场景，我想使用JQuery的ajax（）方法发布表单，但在实际执行帖子之前请求用户做一些确认。

我有一个带有本地化按钮的JQuery UI对话框，以防您想知道下面按钮的所有代码是什么。

到目前为止，这是我的代码：

var i18n_deleteButtons = {};

i18n_deleteButtons[i18n.dialogs_continue] = function () {
    return true;
    $(this).dialog('close');
};

i18n_deleteButtons[i18n.dialogs_cancel] = function () {
    return false;
    $(this).dialog('close');
};

$('#delete-dialog').dialog({
    open: function () {
        $(this).parents('.ui-dialog-buttonpane button:eq(1)').focus();
    },
    autoOpen: false,
    width: 400,
    resizable: false,
    modal: true,
    buttons: i18n_deleteButtons
});

$("form#form_attachments").submit(function (event) {
    /* stop form from submitting normally */
    event.preventDefault();
    /* get some values from elements on the page: */
    var $form = $(this), url = $form.attr('action');

    // build array of IDs to delete (from checked rows)
    var jdata = { 'attachmentIdsToDelete': [] };
    $('input:checked').each(function () {
        jdata['attachmentIdsToDelete'].push($(this).val());
    })

    $.ajax({
        beforeSend: function (request) {
            // Return false if you don't want the form submit. 
            $('#delete-dialog').dialog('open');
        },
        url: url,
        type: "POST",
        dataType: "json",
        data: jdata,
        traditional: true,
        success: function (msg) {
            $('#msg').html(msg);
        }
    });
});

对话框实际打开正常，但点击任何按钮都不会发生任何事情。无论点击了哪个按钮，帖子都不会发生，对话框也不会关闭。

我该如何做到这一点？

Answer 1

为什么不在提交处理程序中移动实际的ajax调用并在删除对话框中按下按钮时触发它？

您可以在分离函数中存储ajax调用，并将此函数和url作为参数传递给确认例程。

 [pseudo code]

 function callAjax() {
     ...
 }
 function submitHandler() {
     confirmDialog({callback:callAjax,param:you_url});
 }
 function confirmDialog(obj) {
     $('#yes_btn').click(function() {
         // call the callback
         obj.callback(obj.param);
     });
     $('#no_btn').click(function() {
        // just close the dialog
     });
 }

这样，confirmDialog不必知道有关ajax调用的任何信息，只需在用户点击“确定”时使用给定参数执行回调。

Answer 2

因为默认的jquery UI对话框对于常规使用来说有点麻烦，而且在一些自定义场景中配置有问题，所以我环顾四周并找到了这个基于jquery＆amp; jquery UI默认内容的Easy Confirm插件。它还允许非常简单的国际化。

https://github.com/wiggin/jQuery-Easy-Confirm-Dialog-plugin

按下提交按钮之后但在使用.ajax（）进行POST之前的JQuery确认对话框

2 个答案: