jQuery UI Dialog Box - Close Function

Question

Hi Guys,

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. Have a look:

$(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

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.

Answer 2

Hi Guys I managed to solve 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

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

works!

Answer 4

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 5

I believe you can only initialize the dialog one time. The example above is trying to initialize the dialog every time #terms is clicked. This will cause problems. Instead, the initialization should occur outside of the click event. Your example should probably look something like this:

$(document).ready(function() {
    // dialog init
    $('#terms').dialog({
        autoOpen: false,
        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).close(); }
    });
    // click event
    $('#showTerms').click(function(){
        $('#terms').dialog('open').css('display','inline');      
    });
    // date picker
    $('#form1 input#calendarTEST').datepicker({ dateFormat: 'MM d, yy' });
});

I'm thinking that once you clear that up, it should fix the 'open from link' issue you described.

Answer 6

Hi, I am new to this site. In the codes in previous response: buttons: { "Close": function() { $(this).dialog('close'); } }, close: function(ev, ui) { $(this).close(); }

Are the "$(this)"s refer to the same object? If they are, what the difference between .dialog("close") and .close()? What $(this).close() actually does? Thx.

Answer 7

.close() is mor general and can be used in reference to more objects. .dialog('close') can only be used with dialogs

Answer 8

the jquery documentation has a link to this article: http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ that explains this situation and how to resolve it

Answer 9

For me this approach works:

The dialog may be closed by clicking the X on the dialog or by clicking 'Bewaren'. I'm adding an (arbitrary) id because I need to be sure every bit of html added to the dom is removed afterwards.

$('').html(data.form) .data('dossier_id',dossier_id) .dialog({ title: 'Opdracht wijzigen', show: 'clip', hide: 'clip', minWidth: 520, width: 520, modal: true, buttons: { 'Bewaren': dossier_edit_form_opslaan }, close: function(event, ui){ $(this).dialog('destroy'); $('#dossier_edit_form_tmp_id').remove(); } });

Answer 10

how to close child(second) dialog box in jquery

Answer 11

I use the dialog as an dialog file browser and uploader then I rewrite the code like this

var dialog1 = $("#dialog").dialog({ 
              autoOpen: false, 
              height: 480, 
              width: 640 
}); 
$('#tikla').click(function() {  
    dialog1.load('./browser.php').dialog('open');
});   

everything seems to work great.