Invoking multiple instances of the same jQuery UI dialog - jquery-ui

Question

I have a jQuery UI dialog with several tabs, sometimes, I need to pop up one of those tabs as a separate dialog (atop of tabbed initial dialog), so, can I achieve this by re-using the same dialog?
(of course with a bit run-time customizations, JavaScript/DOM HTML manipulations, but with the same <div></div> template initially defined and with the same HTML FORM elements IDs)

Answer 1

This is not the optimal solution, but could be an approach of what should you do.
HTML:
<div id="dialog" title="Basic dialog">
<div class="dtabs">
<ul>
<li>First
</li>
<li>Second
</li>
<li>Third
</li>
</ul>
<div id="tab1">
<p>First!</p>
</div>
<div id="tab2">
<p>Second!</p>
</div>
<div id="tab3">
<p>Third!</p>
</div>
</div>
</div>
<input value="Tab 1 on Dialog" type="button" alt="1" />
<input value="Tab 2 on Dialog" type="button" alt="2" />
<input value="Tab 3 on Dialog" type="button" alt="3" />
Javascript:
$(function () {
// Dialog without autoOpen just to hide it from viewport
$('#dialog').dialog({
autoOpen: false
});
$('input').click(function () {
// Clone the dialog and append it to body
// Get "tab" number to know which tab should I set as active later
var d = $('#dialog').clone().appendTo('body'),
tab = $(this).attr('alt')-1;
// Assign "dialog" behaviour and remove it when I close it
d.dialog({
autoOpen: false,
close: function (e, ui) {
$(this).dialog('destroy').remove();
}
});
// Tabs inside my dialog has "tabs" behaviour by JQueryUI
d.find('.dtabs').tabs({
active: tab
});
// Open up!
d.dialog('open');
});
});
http://jsfiddle.net/franverona/k7cuH/
Let me explain you what I did:
I create my dialog in pure HTML and using JQueryUI assign it a dialog behaviour.
Every button has a property that will tell me later what tab should I open in my future dialog.
When user click on button I clone my previous dialog, append it to body and get "tab" attribute. Then I assign it a dialog behaviour without autoOpen and with a function associated to close event to remove it from DOM (to avoid multiple dialogs on my HTML body).
Before open, I assign a tabs behaviour to all the content inside my recently created dialog (look that I'm using find function) and set as an active tab the correct tab using tab property retrieved before.
Now I'm ready to open my dialog with all set up.
I repeat: this isn't an optimal solution, but should work as a prototype of later development iterations.
Happy coding!