JQuery confirmation dialog after pressing the submit button but before POSTing with .ajax()

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

Why not move the actual ajax call from the submit handler and trigger it when pushing a button in the delete dialog?

You could store you ajax call in a separat function and pass this functions and the url as parameters to the confirmation routine.

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

This way the confirmDialog don't have to know anything about the ajax call, it will just execute the callback with the given parameter when the user clicks ok.

Answer 2

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