jquery ui confirmation dialog not working

Question

I have a series of checkboxes that correspond to entries, and a delete all button that I have attached a jquery ui modal confirm. Fiddle here: http://jsfiddle.net/BxdWc/. The issue is that, it does not submit the form (is not processed by php) after hitting yes in the confirmation dialog. The php code is include at the top of the page, but I am fairly certain it has nothing to do with this, as without the modal the code processes, and deletes the checked entries properly.

JS:

$(function () {
    $("#dialog-confirm-multiple").dialog({
        autoOpen: false,
        resizable: false,
        width: 300,
        modal: true,
        show: {
            effect: "bounce",
            duration: 100
        },
        hide: "drop",
        buttons: {
            "Yes": function () {
                $("#confirm").submit();
                $(this).dialog("close");
            },
            "No": function () {
                $(this).dialog("close");
            }
        }
    });
    $("#doDelete").click(function (e) {
        e.preventDefault();
        $("#dialog-confirm-multiple").dialog('open');
        return false;
    });
});

HTML:

<form post="self.php" id="confirm">
<!-- some inputs .etc -->
<input name="doDelete" type="submit" id="doDelete" value="Delete" class="btn btn-danger">
</form>

Answer 1

It looks like your PHP is checking for which button is clicked. jQuery does not include the buttons when you submit a form via $('#confirm').submit();. The browser will only include the buttons in the submission if the button was actually clicked.

There are a couple ways to get the button name/value pair to be included in the submission.

You can use $('form').serializeArray(); and push the doDelete/Delete pair as described in this answer

Or you might be able to get away with doing something like this. Notice the click of the delete button is called a second time. The button click event checks if it was initiated via a trigger (aka the dialog). The second time around, it will not be prevented from being submitted.

$(function () {
    $("#dialog-confirm-multiple").dialog({
        autoOpen: false,
        resizable: false,
        width: 300,
        modal: true,
        show: {
            effect: "bounce",
            duration: 100
        },
        hide: "drop",
        buttons: {
            "Yes": function () {
                $(this).dialog("close");
                $("#doDelete").click();
            },
            "No": function () {
                $(this).dialog("close");
            }
        }
    });
    $("#doDelete").click(function (e,ui) {
        if(e.originalEvent) {
            e.preventDefault();
            $("#dialog-confirm-multiple").dialog('open');
            return false;
        }
    });
});

The fiddle is here

Answer 2

I modified this a little bit so that it can work when you denote the confirm button with a class rather than an id. I'm a javascript novice so beware! Feel free to improve on this.

$(function () {
    $("input.doDelete").click(function (e,ui) {
        var button = $(e.target);
        $("#dialog-confirm-multiple").dialog({
            autoOpen: false,
            resizable: false,
            width: 300,
            modal: true,
            show: {
                effect: "bounce",
                duration: 100
            },
            hide: "drop",
            buttons: {
                "Yes": function () {
                    $(this).dialog("close");
                    button.click();
                },
                "No": function () {
                    $(this).dialog("close");
                }
            }
        });
        if(e.originalEvent) {
            e.preventDefault();
            $("#dialog-confirm-multiple").dialog('open');
            return false;
        }
    });
});