Is it possible to simulate button clicks or specify default OK & Cancel action handlers in jQuery UI Dialog?

Question

Hi.

I'm face to face with this issue, and I don't know how I can resolve it. I found some similar solutions here but none of them is what I need. Let's say, I have some code that makes a simple wrapper around one-button jQuery UI dialogs. In this case all is simple:

$parent.keypress(function(e) {
    switch ( e.keyCode ) {
    case 13:
    case 27:
        $parent.unbind("keypress");
        $plugin.dialog("destroy");
        break;
    }
});

because I have the only button here. But what if a I have two or even more buttons? I thought there was something like $parent.dialog(...) or something like $parent.trigger("__keypress__", "__button__name__") - I didn't find any similar in the jQuery UI Dialog API. Is there any workaround?

Thanks to everyone for the suggestions.

Update:
P.S. I have found a rough solution:

    var $parent = $dialog.parent();
    $parent.keypress(function(e) {
        switch ( e.keyCode ) {
        case 13:
            $parent.find(".ui-dialog-buttonpane button:contains('OK')").click();
                break;
        case 27:
            $parent.find(".ui-dialog-buttonpane button:contains('Cancel')").click();
            break;
        default:
            return;
        }
        $parent.unbind("keypress");
        $plugin.dialog("destroy");
    });

But could it be simplier? My current solution requires a lot of code change.

Answer 1

$(function() { $("#dialog").dialog("destroy");

    $("#dialog-confirm").dialog({
        resizable: false,
        height:140,
        modal: true,
        buttons: {
            'Delete all items': function() {
                //Delete some stuff
                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });
});

Answer 2

I had no a lot of time, and I've implement some work around. Don't know whether it's good, but it seems to be useful but rough.

$.fn.bindShortcuts = function(shortcuts) {
    var $this = $(this);
    var $parent = $this.parent();
    var isByMouse = false;
    $parent.bind("keypress.shortcuts", function(e) {
        var caption = shortcuts[e.keyCode];
        if ( caption ) {
            var button = $parent.find(".ui-dialog-buttonpane button:contains('" + caption + "')");
            if ( button.length && !isByMouse ) {
                button.click();
                $parent.unbind("keypress.shortcuts");
            }
        }
    });
    $parent.find(".ui-dialog-buttonpane button").click(function() {
        isByMouse = true;
        $parent.unbind("keypress.shortcuts");
    });
    return $this;
};

$.fn.bindOkCancel = function(ok, cancel) {
    return $(this).bindShortcuts({
        13: ok,
        27: cancel
    });
}

And how it could be used:

dialog = $dialog.dialog({
    buttons: {
        "Cancel": $.noop,
        "Export": $.noop
    }
}).bindOkCancel("Export", "Cancel");

:)