Finding a way to revert JQuery UI dialog dialog's function - jquery-ui-dialog

Question

I am trying to find a way to revert a jQuery UI dialog's dialog() call.
What I am doing in my app first is calling dialog on a div as such:
$('#dialog').dialog({
...options
});
Then once the user presses the close button, I would like the div tag and its content to reappear again at the same place it was before calling dialog() but not in the jQuery dialog.
I've tried this :
$('#dialog').dialog('close');
$('#dialog').show();
but it doesn't work. It seems that the #dialog's content is emptied when dialog('destroy') is called.
Any ideas?
Thanks,
Jimmy

Answer 1

Perhaps what you can do is to duplicate #dialog to an new div, and dialog() that one, leaving the original untouched.

Answer 2

In fact it was a bit more difficult than a straight html() or append() since in my div I had a jQuery datatables component + a bunch of other custom events. So I first had to deeply clone its children with all the events then call fadeIn() fadeOut() in the right place. So here I go:
The HTML (the #dialog children get cloned Inside the #dialog2 div):
<div id="main">
<div id='dialog'>
<input id='input1' type="text"></input>
<input id='input2' type="text"></input>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div id='dialog2' style='display:block;'>
</div>
<button id="open">Detach Me</button>
The JavaScript:
<script type="text/javascript">
$(document).ready(function(){
$("#dialog").children().clone(true, true).appendTo($("#dialog2"));
$('#dialog2').hide();
$('#open').click(function(){
$('#dialog2').fadeOut();
$("#dialog").dialog({
width: 1000,
height:800,
close : function(){
$('#dialog2').fadeIn();
return true;
}
});
});
this.datatable = $('table').dataTable({
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).on('click', function(){
$(this).addClass('selected', true);
});
}
});
});
</script>