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

score 110 · Answer 1 · answered Apr 13 '09 at 22:43

110

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.

answered Apr 13 '09 at 22:43

Shane Fulmer

7,510
6
35
43

1

This works perfectly. The jQuery UI documents aren't very clear here. But the idea that `dialog` function is for initialization, showing, and hiding made sense of this for me. Thanks. – Steve Cooper Jun 20 '09 at 22:52
If you're loading this dialog from HTML that can dynamically change, it's very unintuitive why it doesn't work. Anybody have any good solutions that can be applied generically to these situations? – Milimetric Aug 17 '11 at 20:14
@Milimetric You can always use the $(this).remove(); function at the end of each of your dialog's buttons, this way the whole dialog will be completely remade from scratch when you call it again. Note that this function acts differently than $(this).dialog("destroy"); since it only sets the dialog back to its pre-init state, without destroying the object. – Jeff Noel Jul 26 '12 at 18:36

score 14 · Accepted Answer · edited Dec 27 '20 at 15:00

14

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' });
});

edited Dec 27 '20 at 15:00

peterh

11,875
18
85
108

answered Dec 14 '08 at 19:42

David Bonnici

6,677
12
54
72

4

Destroy will work if you use that method, but to make close() work, instantiate the dialog first, then use dialog.show() to show it, then dialog.close() to close it, and it will reopen without a problem. – RaeLehman Jan 06 '09 at 15:28
6

Almost. You're right about initilizing it first, but after that it's .dialog("open") and .dialog("close") – rdworth Jan 07 '09 at 04:27

score 12 · Answer 3 · answered Dec 14 '08 at 19:37

12

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.

answered Dec 14 '08 at 19:37

Darko

38,310
15
80
107

score 9 · Answer 4 · answered Oct 27 '09 at 23:40

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.

score 3 · Answer 5 · answered Dec 07 '12 at 11:22

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

crad · Answer 6 · 2013-10-23T16:57:42.080

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.

score 3 · Answer 7 · edited Sep 06 '11 at 11:50

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();
               }
});

score 2 · Answer 8 · answered Apr 13 '09 at 22:29

2

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

works!

answered Apr 13 '09 at 22:29

Benedikt

954
3
14
25

score 1 · Answer 9 · answered Jan 28 '10 at 14:50

1

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

answered Jan 28 '10 at 14:50

John

11
1

score 1 · Answer 10 · answered Sep 27 '10 at 13:42

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.

score 1 · Answer 11 · edited Dec 10 '11 at 06:59

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.

score 0 · Answer 12 · edited Dec 10 '11 at 06:32

0

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.

edited Dec 10 '11 at 06:32

Jonathan Leffler

730,956
141
904
1,278

answered Apr 12 '10 at 21:40

Barka

8,764
15
64
91

jQuery UI Dialog Box - does not open after being closed

12 Answers12

Linked