Clone jqueryui dialog buttons at the top of the dialog

Question

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

Can I duplicate these buttons so that they appear at the top of the dialog box as well as at the bottom?

I was able to do it manually with sporadic results. Can I clone the exact buttons created in the init dialog? I know that buttons do not have an identifier, though ...

Thanks!

Answer 1

as simple as that

add line 445 to css in jquery ui css

.ui-dialog .ui-dialog-buttonpane
{
position: absolute; top: 35px; width: 98%;
}

Answer 2

, . , jQuery script, HTML, , :

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

- , :

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

clone.

Answer 3

The dialog widget does not provide this behavior out of the box. You can crack the behavior yourself, but it can break when upgrading to new releases of jquery-ui. Here's how I did 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();
            });
        }
    });