jQuery UI Dialog Box - does not open after being closed

Question

I have a problem with the jquery-ui dialog box.

The problem is that when I close the dialog box and then I click on the link that triggers it, it does not pop-up again unless I refresh the page.

How can I call the dialog box back without refreshing the actual page.

Below is my code:

$(document).ready(function() {
    $('#showTerms').click(function()
    {
        $('#terms').css('display','inline');
        $('#terms').dialog({
            resizable: false,
            modal: true,
            width: 400,
            height: 450,
            overlay: { backgroundColor: "#000", opacity: 0.5 },
            buttons:{ "Close": function() { $(this).dialog("close"); } },
            close: function(ev, ui) { $(this).remove(); },
    }); 
});

Thanks

Answer 1

You're actually supposed to use $("#terms").dialog({ autoOpen: false }); to initialize it. Then you can use $('#terms').dialog('open'); to open the dialog, and $('#terms').dialog('close'); to close it.

Answer 2

I solved it.

I used destroy instead close function (it doesn't make any sense), but it worked.

$(document).ready(function() {
$('#showTerms').click(function()
{
    $('#terms').css('display','inline');
    $('#terms').dialog({resizable: false,
        modal: true,
        width: 400,
        height: 450,
        overlay: { backgroundColor: "#000", opacity: 0.5 },
        buttons:{ "Close": function() { $(this).dialog('**destroy**'); } },
        close: function(ev, ui) { $(this).close(); },
    });         
});   
$('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

Answer 3

on the last line, don't use $(this).remove() use $(this).hide() instead.

EDIT: To clarify,on the close click event you're removing the #terms div from the DOM which is why its not coming back. You just need to hide it instead.