Question

I have a very simple scenario where I want to POST the form using JQuery’s ajax() method but perform request some confirmation from the user before actually performing the post.

I have a JQuery UI dialog with localized buttons in place in case you wonder what all the code with buttons below is about.

This is my code so far:

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

The dialog actually opens up fine but clicking at any of the buttons results in nothing happening. The post doesn’t happen and the dialog does not close regardless of which button was clicked.

How can I make this work?

Answer 1

Because the default jquery UI dialog is a bit cumbersome for regular use and trouble to configure in some custom scenarios I looked around and found this Easy Confirm plugin which is based upon jquery&jquery UI default stuff. It also allows for very simple internationalization.

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