jayjay
jayjay

Reputation: 407

jQuery UI Dialog Caches for quick second

I have multiple images on a page, that pops up the related big image in a dialog box.

But when I click image 2, images 1 shows first before image 2 comes in, in the first .5 seconds. How can I clear image 1 out completed when I close it?

I try destroy, but that kills the entire functionality when time to click image 2.

$(function() {
    $( "#dialog" ).dialog({
         autoOpen: false,
        resizable: false,
        position: 'middle',
        draggable: false,
        minWidth: '960',
        maxheight:'500',
        overlay: true,
        modal: true,
        show: "fade",
        hide: "fade",
        position:'top',
        close: function(event, ui) {
      $("#dialog").dialog("destroy");
        }
    });
});

Upvotes: 0

Views: 2407

Answers (2)

newbie
newbie

Reputation: 14950

I use remove instead of empty..

close: function(event, ui) {
  $("#dialog").remove().dialog("destroy");
}

Upvotes: 0

Patricia
Patricia

Reputation: 7802

.dialog('destroy') only removes the dialog capabilities from that div. you need to empty it!

close: function(event, ui) {
  $("#dialog").empty().dialog("destroy");
}

edit: ahh, right, you want to keep the dialog, but empty it right? take off the .dialog('destory') then, just empty it.

close: function(event, ui) {
  $("#dialog").empty();
}

Upvotes: 3

Related Questions