.dialog() state persistence with ajax enabled site

.dialog() state persistence with ajax enabled site

Hello everybody.

I have a site under development that uses AJAX to retrieve a list of items.  This list is formatted into divs that contain basic info and then has a details button (that opens a dialog).  These results are paginated on the server (one of the parameters for the AJAX request is number of results, another is offset for SQL query). 

With this all working, I have a problem where when you click the "next" button to retrieve the next n entries from the database, the correct results are returned for the basic info.  However, when you click the details button, the details of the original results are shown.

I have tried using .dialog("destroy") to clean out the dialogs, but then I can't open any dialogs on subsequent pages. 

It seems that there's persistence once the dialog object is instantiated.  This seems to be corroborated by this article: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/.  How can I remove this persistence on future AJAX requests so that my dialogs will be working properly on all pages?

Here's some code:

  1. [...  this is all inside a for loop, looping through XML elements - variables have been assigned...]
  2. $("#hclResults").append(
  3.   '<div id="hclResult-' + a + '" class="hclResultContainer ui-corner-all">'
  4.             [... some HTML to show basic info ...]
  5.    +'<div class="hclDetailsButtonContainer"><button id="hclDetailsButton-' + a + '" class="hclDetailsButton" value="#hclDetailsDialog-' + a +'">Details</button></div>'
  6.    +'</div>'
  7.    +'<div id="hclDetailsDialog-' + a + '" class="hclDetailsDialog" title="Details"></div>'
  8. );

  10. $("#hclDetailsDialog-" + a).append( 
  11.               [... HTML showing details ...]
  12.    +'<div id="oemDetail"></div>'
  13. );
  14. if (oem) {
  15.    $("#hclDetailsDialog-" + a + " > div#oemDetail").append( 
  16.               [... HTML showing details ...]
  17.    );
  18. }

  20. $("#hclDetailsDialog-" + a).dialog({
  21.    autoOpen: false
  22. });

  24. $("#hclDetailsButton-" + a).button({
  25.    icons: {
  26.       primary: 'ui-icon-newwin'
  27.    }
  28. }).click(function(){
  29.    var dialogSelector = $(this).attr("value");
  30.    $(dialogSelector).dialog('open'); 
  31.    return false;
  32. });
  33.            
  34. a++;

PS - I know the HTML here in unseemly, but it's just a mockup.  I'm more concerned with the JS functionality.  If my redaction of the code removes too much, please let me know.