How to Change Jquery's Dialog Button Label at Run Time

Recently I've used a 3rd party jquery library that pops up a jquery dialog with form content. However if has a default button Save and Cancel, which most of the time is ok, but sometimes you have need to localized or change the label depending on your need. For example in my case I use the popup form to reply to an email, so I need the button with a label "Send". Here's how I did it:


Here we use localizedButtons variable to hold the 2 button function, which has dialogBtnOk button. The label of this button can be overridden on any form you want by simply initializing it inside a script tag as: var dialogBtnOk = "Send";

if (typeof dialogBtnOk === 'undefined') {
            dialogBtnOk = "Save";
        }        

        localizedButtons[dialogBtnOk] = function () {
            // Manually submit the form                                                
            var form = $('form', this);
            $(form).submit();
        }

        localizedButtons['Cancel'] = function () {
            $(this).dialog('close');
        }

        // Load the form into the dialog div
        $(dialogDiv).load(this.href, function () {
            $(this).dialog({
                modal: true,
                resizable: false,
                title: dialogTitle,
                buttons: localizedButtons,
                open: function (event, ui) { },
                close: function (event, ui) {
                    $(this).dialog("destroy");
                    $(this).remove();
                }
            });

            // Enable client side validation
            $.validator.unobtrusive.parse(this);

            // Setup the ajax submit logic
            wireUpForm(this, updateTargetId, updateUrl);
        });