JQuery dialog opens 2 dialogs after first use -

I am using the JQuery dialog and open IFrame in the following way

  $ ('# Div1') dialog ("deleted") .; If (criteria1 == "L") {$ ("# div1") Html ("& lt; iframe id = 'dialogframe1' src = '.. / webpage / abc.aspx' height = '100%' width = '100%' frameborder = '0'> & lt; / iframe & Gt; "); } And {$ ("# div1"). Html ("and lt; iframe id = 'dialogframe2' src = '.. / webpage / abc1.aspx' height = '100%' width = '100%' frameborder = '0' & gt; & lt; / iframe & Gt; "); } $ ('# Div1'). Dialog ({height: 220, title: "title", width: 500, model: true, previously closed: function (event, UI) {$ ("# div1"). Html (""); $ ("# Div1 ") [0] .winnerHTML =" ";}}); .. $ ('# Div1') parent () appendTo ($ ("form: first")); $ ('# Div1') dialog ('open').  

The first time I call the dialog ("open") it works fine. However, later calls show 2 dialogs (without page refresh), one with control control and another is active which is empty.

Any ideas why?

Add this option

Auto Open: Incorrect

< Pre> $ ('# div1'). Dialog ("destroyed"); Criteria1 = "l"; If (criteria1 == "L") {$ ("# div1") Html ("& lt; iframe id = 'dialogframe1' src = '.. / webpage / abc.aspx' height = '100%' width = '100%' frameborder = '0'> & lt; / iframe & Gt; "); } And {$ ("# div1"). Html ("and lt; iframe id = 'dialogframe2' src = '.. / webpage / abc1.aspx' height = '100%' width = '100%' frameborder = '0' & gt; & lt; / iframe & Gt; "); } $ ('# Div1'). Dialog ({Auto Open: False, Height: 220, Title: "Headline", Width: 500, Model: True, First Closed: Function (Event, UI) {$ ('# div1') .html (""); $ ('# Div1') [0] .winnerHTML = "";}}); $ ('# Div1') dialog ('open'). .. $ ('# Div1') parent () appendTo ($ ("form: first"));