JQuery Dialog - Because of IE 6&7 - Need to 'destroy' instead of 'close' - how to rebuild?

Question

I have a very serious issue going on with the JQuery doalog, and I'm hoping some of the wonderful experts here know of a way to solve this, or could point me in the right direction. I have been searching similar posts here, and testing for hours, but I can't get a working solution as this problem isn't exactly the same.

My javascript skills are limited (I'm more of an XHTML & CSS gal), but I'm stuck in a bind as this site is due to launch in a few days, and I only noticed the error last night.

I am using dialog to open a dialog box containing an iframe - its a dynamically generated template from Expression Engine that loads the video perfectly. It looks beautiful, and worked perfectly, then IE 6&7 came along to ruin it.

In IE 6&7, when you use 'close' it drops the box as it should, but keeps the content running - so you can hear the audio from the video still playing in the background. It works in all other browsers. So, I decided to change 'close' to 'destroy', but that drops the item completely, and you can't open it again without refreshing the window.

Is there a way to rebuild or reset the item after destroying it?

Here is the code:

$(function(){

$('#box').dialog({
 autoOpen: false,
 width: 600,
 buttons: {

  "close": function() { 
   $(this).dialog("destroy"); 
   } 
  }
});

// video Link
$('#box-1').click(function(){
  $('#box').dialog('open');
  return false;
});

});

I would be extremely grateful for any advice or ideas. Thanks in advance

Answer 1

Try detach(). I had similar problem, I created a javascript hash table, I filled the table the objects then .append() when I needed it again:

myArray = new Array();
var thisTitle = $(this).data("videoTitle");
var titleOfDetachingElement = $("#content span:visible").attr("title");

// Before we detach the element we need to save it to the javascript array/hash table
myArray[titleOfDetachingElement] = $("#content span:visible"); //the one I want saved is the only visible one
$("#content span:visible").detach();

// Check to see if the video element is still in the DOM
// if it is just show it, if not reload it from the javascript array
if ($("#content span[title='" + thisTitle + "']").length) {
     $("#content span[title='" + thisTitle + "']").show();
}
else {
// We can just append it to the content section
// the inner articles are only used to catorigze the links on the page creation
     $("#content").append(myArray[thisTitle]);
}

You'll have to play with it a little I'm sure, but it might be a place to start.