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

as simple as this

add the following to the css around line 445 in jquery ui css

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

Answer 2

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.