jQuery UI dialog close doesn't clear dialog

Question

Using jQuery UI, I have a tabs plugin and within tab 1 gets loaded a page that contains a table and in each row is a link to a dialog.

Everything works correctly, save the following:

In the dialog is an option to delete the row from which the current dialog was opened from. After confirming, and deleting the row, the tab is refreshed and the new table is shown with the relevant row deleted.

Now, the problem is that after closing the dialog where I did the deletion (either though the JavaScript function that did the deleting, or manually via the close button on the dialog), the dialog retains the data from the deleted row.

For example,

There are three rows listed;

Open dialog from row 2;

Delete;

Dialog closed from the JavaScript function, tab refreshes, now two rows;

The dialog open link in the second row (which used to be row 3) has the same dialog id as the one just opened;

Click open dialog link in row 2;

Dialog displays same as before - for old row 2, instead of current row 2;

Close dialog;

Click open dialog link in row 2;

Displays correctly - data from current row 2;

I don't know if that made any sense... Here's a picture of what happens:

So, the row below the row that gets deleted inherits the dialog id, and when clicked shows the old dialog. If closed, then re-opened, it shows the proper content in the dialog.

I'm using dialog("close") currently and have tried dialog("destroy"), but that totally kills it, and the row below doesn't open anything...

How can I fix this problem?

---

Dialog instantiation code:

<script>
<?php
$ee=1;
foreach($bugs->result() as $rr){
    echo "jQuery(\"#dialog_$ee\").dialog({autoOpen:false,width:850,height:550});\n";
    $ee++;
}
?>
</script>

Then open the dialog:

jQuery("#dialog_<?=$i?>").dialog("open");

Solution 1

There is an answer in blog post Creating dialogs on demand.

Solution 2

It turns out the dialog wasn't going anywhere. After closing it, there were now two dialogs with the same id.

In the success handler of the delete function called, I ended up resetting the dialog id and then calling dialog("destroy") on it:

onSuccess: function(transport){
    var tabs = jQuery('#tabs').tabs();
    tabs.tabs( 'url', 0,'/bugs/loadTab1');
    tabs.tabs('load', 0);
    closeDialog(dialogID);
    jQuery("#"+dialogID).attr("id",dialogID+"_old");
    jQuery("#"+dialogID+"_old").dialog("destroy");
},