Clone jqueryui dialog buttons at top of dialog

Question

I have a tall dialog box with Save and Cancel buttons that perform some actions on the data in the dialog box as well as closing the dialog.

Is it possible to duplicate these buttons so they display at the top of the dialog as well as the bottom?

I've been able to do this manually with sporatic results. Can I clone the exact buttons that are created in the dialog init? I know the buttons don't have id's though ...

Thanks!

Answer 1

Yes, you can do this. The exact selector used in the jQuery script will depend on the HTML element used to display your buttons, but to clone the buttons AND their event handlers will be something like:

$('.dialogClass button').clone(true);

To add them to some container that is located at the top of the dialog:

$('.dialogClass button').clone(true).appendTo('.topContainerClass');

Check out the docs for clone.

Answer 2

The dialog widget doesn't provide this behavior out-of-the-box. You can hack the behavior yourself but it might break as you upgrade to newer jquery-ui releases. Here's how I would accomplish it:

    $('#my-dialog').dialog({
        buttons: {
            'hello world': function() { alert('hello world'); },
            'good bye': function() { alert('goodbye'); }
        },
        open: function(event, ui) {
            // for whatever reason, the dialog isn't passed into us as a paramter, discover it.
            var dialog = $(this).closest('.ui-dialog');

            // create a copy of all the buttons and mark it as a clone (for later)
            var originalButtons = $('.ui-dialog-buttonpane', dialog)
            var clonedButtons = originalButtons.clone().addClass('clone');
            $('.ui-dialog-titlebar', dialog).after(clonedButtons);

            // cloning doesn't copy over event handlers, so we need to wire up
            // the click events manually.     
            $('button', clonedButtons).click(function() {
                var button = $(this);                    
                var buttonIndex = $('button', clonedButtons).index(button);
                $('button:eq(' + buttonIndex + ')', originalButtons).click();
            });
        }
    });