OK, have a try with:
Code:
<div class="tabs">
<ul>
<li>
<a href="#tabs-1">Tab 1</a>
</li>
<li>
<a href="#tabs-2">Tab 2</a>
</li>
</ul>
<div id="tabs-1" class="content">
Tab 1 content
</div>
<div id="tabs-2" class="content">
Tab 2 content
</div>
</div>
<ul>
<li><a href="#" id="dialogButton">dialogify</a></li>
</ul>
<script type="text/javascript">
var dialogCounter = 1;
$('#dialogButton').click(function () {
var $dialog = $('<div></div>')
.html($('.tabs').clone())
.dialog({ autoOpen: false });
$dialog.bind('dialogopen', function() {
console.log(dialogCounter);
$(this).find('a').each(function(){
$(this).attr('href',$(this).attr('href')+'_'+dialogCounter);
});
$(this).find('div.content').each(function(){
$(this).attr('id',$(this).attr('id')+'_'+dialogCounter);
});
dialogCounter++;
console.log($(this));
$(this).find('.tabs').tabs().removeClass('tabs');
});
$dialog.bind('dialogclose', function() {
$(this).find('.tabs').tabs('destroy');
$(this).dialog('destroy');
});
$dialog.dialog('open');
return false;
});
</script>
Logic here: Initialise a counter to record the number of dialogs open (assuming there could be many). When the html is cloned, amend the ids of the anchors and divs to append the dialogCounter (so then they all have unique ids), and increment the dialogCounter. Remove the class of 'tabs' to stop the newly created element being cloned on a second or subsequent dialogify click.
html:I changed the id on the template to a class and added a content class to the content divs just to make things easier to manipulate.
This seems to work for me OK. It also seems ever so slightly clunky...
What else is there to do on a wet Saturday? Are you in WY too then?