JQuery UI Dialog box only works once

Question

I have a JQuery UI Dialog box that opens up another page inside it. After I click Cancel and try to click it again, it does not open. I searched online and found an answer that said I had to initialize the dialog only once, and just call open when the user clicks the button. I tried moving the initialize code to the page load section and only doing dialog("open") for the button, but I still have the same problem as before. How do you set up the dialog box so you can cancel and open it again?

Initializing code:

var scanDialog = $( "#dialog" ).dialog({
                  height:600,
                          width:800,
                  modal: true,
                          autoOpen:false,
                  buttons: {
                    "Scan": function() {
                         //scanning code 
                    },
                    Cancel: function() {
                                 scanDialog.load("url.html").dialog("close");
                    }
                  }
                });

Loading code:

scanDialog.load("url.html").dialog('open');

Answer 1

Try destroying the dialog from DOM

 scanDialog.load("url.html").dialog("destroy");

Inorder to not the loose the div id, you can append the dialog id to it's parent DOM name.

     var DialogParent = $(this).parents("div:eq(0)");
      var Diag = myParent.attr('id') + 'Diag';

      var scanDialog = $( "#" + Diag ).dialog({
                  height:600,
                          width:800,
                  modal: true,
                          autoOpen:false,
                  buttons: {
                    "Scan": function() {
                         //scanning code 
                    },
                    Cancel: function() {
scanDialog.load("url.html").dialog("destroy");// Destroy, not close
                    }
                  }
                });

Then,

 $("#" + Diag).dialog('open');

Answer 2

Perhaps not a proper answer, but I have had a similar problem with this few months ago, and it was because of "modal:true" property. I had to remove the modal property in order make the button function. I think it is a bug in jquery.

Answer 3

This seemed like an unnecessarily pesky problem. Using “autofocus” would only work once. Some fixes worked in IE, but not Chrome. So to fix, I needed a couple of steps, part of which was incorporating the “.dialog('destroy')” mentioned above. I was adding focus to the “Yes” button on the dialog popup.

First, I added an open function with a focus() call. On our system, it required the “setTimeout” wrapper:

open: function()
{
    setTimeout(function() {
        $('#yesDialog').focus();
    }, 100);
},

Add the “id”:

}, id: 'yesDialog'

And a crucial, key step was changing the dialog “close” to dialog “destroy”:

So from:

$(this).dialog('close');

To:

$(this).dialog('destroy');

Taking out our specific fluff, putting it all together looks about like this:

var prompt = 'Are you sure?';
$('<p>'+prompt+'</p>').dialog({
    autoOpen: true,
    draggable: false,
    modal: true,
    title: 'Save Data',
    dialogClass: 'no-close',
    open: function() {
        setTimeout(function() {
            $('#yesDialog').focus();
        }, 100);
    },
    buttons: [{
        text: 'Yes',
        click: function() {
            $(this).dialog('destroy');
            //...our fluff
        }, id: 'yesDialog'
    }, {
        text: 'No',
        click: function() {
            $(this).dialog('destroy');
        }
    }]
});