title: reopen jquery ui dialog, empty and refresh
body: <p>This jquery ui dialog is filled with html and form values from an ajax call (works). I want to close or submit it and then reopen and reuse it just the same. I can close and reopen fine but it has the old values still there and then the new ones are added. It keeps adding the html values after each close and reopen. There are many questions about this on SO but I don't see a clear answer. I have tried close, empty, destroy but the combination isn't working the way I need it. Any ideas?</p>
  
  <pre><code>$("#StoreForm").dialog({
      autoOpen:false, 
      width:500, 
      height:900, 
      modal:true,
      buttons: { 
     OK: function() { 
     $('#StoreForm').dialog('close'); 
  $(this).dialog('hide');
  $(this).dialog('empty'); 
   }, 
   'Save': function() { 
    $(this).dialog('empty'); 
   } 
  
   }
  
   });
  
  
   //additional code to click and open the dialog
  
   $(".sel").unbind('click');
   $(".sel").on("click", function(e){
  e.preventDefault();                 
   $("#StoreForm").dialog('open');
   var valueSelected = $(this).closest('tr').children('td.item').text();                                  
  $.ajax({
  url: 'query/categories.cfc',
  dataType: 'json',
  cache: false,
  data: {method: 'getProductInfo', 
                                  queryFormat: 'column',
                              returnFormat: 'JSON',
  productID:   valueSelected
  
  },
  success: function(response, status, options){
  $("#PROD_SUPER_ID").val(response.DATA.PROD_SUPER_ID[0]);
  
  $("#color").val(response.DATA.COLOR_ATTRIB);
  
                              $("#SIZE_ATTRIB").val(response.DATA.SIZE_ATTRIB);
  
  $("#price").val(response.DATA.PRICE);
  var w = [];
  w.push("&lt;p&gt;", response.DATA.ICON[0], "&lt;/p&gt;", "&lt;p&gt;", 
        response.DATA.FULL_DESCRIPTION [0], "&lt;/p&gt;") 
                              $("#StoreForm").prepend(w.join(""));
  </code></pre>