jquery ui dialog close doesn't clear dialog

Question

Hi,

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 js function that did the deleting, or manually via the close button on the dialog), the dialog retains the data from the deleted row.

Ex:

There are 3 rows listed;

open dialog from row 2;

delete;

dialog closed from js function, tab refreshes, now 2 rows;

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

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 pic 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...

Anybody have any ideas?

thanks....

---

Edit:

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 dialog:

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

Answer 1

Turns out the dialog wasn't going anywhere. After closing it, there were now 2 dialogs with the same id. What I ended up doing was in the success handler of the delete function called, reset the dialog id then call 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");
    },