JQuery dialog working alternatively

Question

I have this piece of code to open up a JQuery dialog with specific controls according to 2 links. Now it works fine on the 1st attempt. But the 2nd time when I click the link to load the JQuery dialog, it opens a blank dialog. On closing it and clicking the link again it opens the right dialog. On repeated trials it throws me an error in the JQuery 1.3.2.js file.

Code given below:

 $('#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');

Am i using the wrong JQuery file? Any views on how to fix this issue?

Answer 1

EDIT: Misunderstood the problem, 2nd attempt:

Can't reproduce your problem, have tried at http://jsfiddle.net/GYxwG/3/. I did have to remove your $('#div1').parent().appendTo($("form:first")); however, as it wouldn't work at all with this in place. This statement might not do what you think it does, cause once you call the .dialog() on the div, the div is moved out from its position and wrapped in all sorts of dialog-goodness. So .parent() refers to one of the inner wrappers of the dialog. Not the entire dialog, nor the parent element in the original document.

It therefore makes little sense to be moving the closest parent to the div for the dialog, and causes "unspecified" behaviour, perhaps you're seeing some edge case of that?

Answer 2

jsfiddle working example (it's missing the jquery css/images)

So if I might suggest to scrap the code you have given it appears to be a mess, and instead do:

$(function(){
    var urls = {
        "hackernews" : "http://news.ycombinator.com", 
        "jsfiddle" : "http://jsfiddle.net"
    };

    var dialog = $("<div style='width:50%;height:50%;'>\
                   <iframe id='dialogFrame'\
                   src='#'  frameborder='0'></iframe></div>");


     dialog.dialog({
      height: 220, 
      title: "Title",
      width: 500,
      modal: true,
      autoOpen: false
    });

    $('#btn1, #btn2').click(
        function(){
            var urlIndex = $(this).attr('rel');
            if(!urlIndex) return;
            $('#dialogFrame', dialog).attr('src', urls[urlIndex]);
            dialog.dialog('open');
         }
    );
    $('#btnClose').click(
        function(){
            dialog.dialog('close');
        }
    );

});​

HTML:

<input type="button" id="btn1" rel="jsfiddle" value="dialog1" />
<input type="button" id="btn2" rel="hackernews" value="dialog2" />
<input type="button" id="btnClose" value="Close">​

So instead of switching between dialogs and changing inner HTML, we keep one dialog constantly available, and when it is to be displayed, we set the url of the iframe and show the dialog.

All urls are kept in a associative array, and the click event-handler checks the rel-attribute of the clicked button to figure which url should be displayed.

Makes sense?

You obviously need to change the URLs and attributes of HTML and dialo-properties.