Question

Does anyone know of a method where it would be possible to insert a ASP.NET button (IE: A button with a runat="server" tag) into a jQuery UI Dialog (specifically the area where the buttons are contained)?

Obviously the point of this is so I can handle the click event serverside from these buttons. I am aware that I could cause a postback from the dialog buttons by handling the click event and triggering the __DoPostBack method

Example:

$("#MyDialogDiv").dialog({
    height: 400,
    width: 450,
    modal: true,
    buttons: {
        Ok : function () {
            __DoPostBack(eventTarget, eventArguments);
            $(this).dialog("close");
        }, Cancel: function() {
            $(this).dialog("close");
        }
    }
});

However am hoping to achieve a more elegant solution where I could still declaratively add the buttons to the dialog but they would be inserted into the dialog button area.

Unfortunately the only way I can think of is basically rewriting the entire dialog create method structure but perhaps there is a better solution?

Answer 1

Id love to hear suggestions but it seems this might be the only simple “mostly generic” method to do this. Hacky but it works…

(function ($) {
    $.fn.CustomDialog = function (options) {
        this.dialog(options)
            .parent()
            .find(".ui-dialog-buttonpane > .ui-dialog-buttonset")
            .append($(".DialogButton").button());
    };
})(jQuery);