[javascript] jQuery UI Dialog Box - does not open after being closed

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

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.

I had the same problem with jquery-ui overlay dialog box - it would work only once and then stop unless i reload the page. I found the answer in one of their examples -
Multiple overlays on a same page
flowplayer_tools_multiple_open_close
- who would have though, right?? :-) -

the important setting appeared to be

oneInstance: false

so, now i have it like this -

$(document).ready(function() {

 var overlays = null;

 overlays = jQuery("a[rel]");

 for (var n = 0; n < overlays.length; n++) {

    $(overlays[n]).overlay({
        oneInstance: false, 
        mask: '#669966',
        effect: 'apple',
        onBeforeLoad: function() {
            overlay_before_load(this);
        }
    });

  }

}

and everything works just fine

hope this helps somebody

O.

 <button onClick="abrirOpen()">Open Dialog</button>

<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
       title: "Dialogo de UI",
       autoOpen: false,
       close: function(ev, ui){
               $(this).dialog("destroy");
       }
 function abrirOpen(){
       $dialogo.dialog("open");
 }
});

//**Esto funciona para mi... (this works for me)**
</script>

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.

$('<div id="dossier_edit_form_tmp_id">').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();
               }
});

This is a super old thread but since the answer even says "It doesn't make any sense", I thought I'd add the answer...

The original post used $(this).remove(); in the close handler, this would actually remove the dialog div from the DOM. Attempting to initialize a dialog again wouldn't work because the div was removed.

Using $(this).dialog('destroy') is calling the method destroy defined in the dialog object which does not remove it from the DOM.

From the documentation:

destroy()

Removes the dialog functionality completely. This will return the element back to its >>pre-init state. This method does not accept any arguments.

That said, only destroy or remove on close if you have a good reason to.

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.

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.

The jQuery documentation has a link to this article 'Basic usage of the jQuery UI dialog' that explains this situation and how to resolve it.

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

I had the same problem with jquery-ui overlay dialog box - it would work only once and then stop unless i reload the page. I found the answer in one of their examples -
Multiple overlays on a same page
flowplayer_tools_multiple_open_close
- who would have though, right?? :-) -

the important setting appeared to be

oneInstance: false

so, now i have it like this -

$(document).ready(function() {

 var overlays = null;

 overlays = jQuery("a[rel]");

 for (var n = 0; n < overlays.length; n++) {

    $(overlays[n]).overlay({
        oneInstance: false, 
        mask: '#669966',
        effect: 'apple',
        onBeforeLoad: function() {
            overlay_before_load(this);
        }
    });

  }

}

and everything works just fine

hope this helps somebody

O.

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.

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.

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.

This is a super old thread but since the answer even says "It doesn't make any sense", I thought I'd add the answer...

The original post used $(this).remove(); in the close handler, this would actually remove the dialog div from the DOM. Attempting to initialize a dialog again wouldn't work because the div was removed.

Using $(this).dialog('destroy') is calling the method destroy defined in the dialog object which does not remove it from the DOM.

From the documentation:

destroy()

Removes the dialog functionality completely. This will return the element back to its >>pre-init state. This method does not accept any arguments.

That said, only destroy or remove on close if you have a good reason to.

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.

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.

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.

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

works!

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.

$('<div id="dossier_edit_form_tmp_id">').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();
               }
});

The jQuery documentation has a link to this article 'Basic usage of the jQuery UI dialog' that explains this situation and how to resolve it.

 <button onClick="abrirOpen()">Open Dialog</button>

<script type="text/javascript">
var $dialogo = $("<div></div>").html("Aqui tu contenido(here your content)").dialog({
       title: "Dialogo de UI",
       autoOpen: false,
       close: function(ev, ui){
               $(this).dialog("destroy");
       }
 function abrirOpen(){
       $dialogo.dialog("open");
 }
});

//**Esto funciona para mi... (this works for me)**
</script>

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.