JQuery dialog opens 2 dialogs after first use

Question

Im using JQuery dialog and open an iframe inside it in the following way

$('#div1').dialog("destroy");            

if (criteria1== "L") {
    $("#div1").html("<iframe id='dialogFrame1' src='../WebPages/abc.aspx' Height='100%' Width='100%' frameborder='0'></iframe>");
}
else {
    $("#div1").html("<iframe id='dialogFrame2' src='../WebPages/abc1.aspx' Height='100%' Width='100%' frameborder='0'></iframe>");
}

$('#div1').dialog(
  {

      height: 220,
      title: "Title",
      width: 500,
      modal: true,
      beforeclose: function (event, ui) {

          $("#div1").html("");
          $("#div1")[0].innerHTML = "";
      }

  });

$('#div1').parent().appendTo($("form:first"));
$('#div1').dialog('open');

The first time I call dialog("open") it works fine. However, subsequent calls (without a page refresh) show 2 dialogs, 1 a proper one with the controls loaded and another active one that is empty.

Any ideas why?

Answer 1

ADD this option

autoOpen: false

$('#div1').dialog("destroy");

criteria1="L";
if (criteria1== "L") {
  $("#div1").html("<iframe id='dialogFrame1' src='../WebPages/abc.aspx' Height='100%' Width='100%' frameborder='0'></iframe>");
}
else {
  $("#div1").html("<iframe id='dialogFrame2' src='../WebPages/abc1.aspx' Height='100%' Width='100%' frameborder='0'></iframe>");
}

$('#div1').dialog({
  autoOpen: false, 
  height: 220,
  title: "Title",
  width: 500,
  modal: true,
  beforeclose: function (event, ui) {
    $('#div1').html("");
    $('#div1')[0].innerHTML = "";
  }
});
$('#div1').dialog('open');

$('#div1').parent().appendTo($("form:first"));

Answer 2

$('#div1').parent().appendTo($("form:first"));

i think the above code replicates the content.Change that and test it.