Jquery-ui – Does Jquery UI Dialog Destroy event remove the html too

jquery-ui

I have a dialog that displays a form. When they save or close the dialog I call up the jquery dialog destroy method.

However I am not clear if it removes the html div. From the description I would not think so

Remove the dialog functionality
completely. This will return the
element back to its pre-init state.

However when looking with firebug I can't see the html container so I am not sure if it gets removed or what. I am not sure if it is because I make the div for the dialog on the fly and use jquery to add it to the page.

Best Answer

It does not destroy the HTML, you can see a demo here. However it does by default hide the container (leaving a display: none on there), so you need to .show() to see it again visually in the page if that's what you're after. Here's the simple demo test code:

<button>Create Dialog</button>
<div id="dialog">Test Content</div>

and the jQuery:

$("button").click(function() {
  $("#dialog").dialog({
    buttons: { 'Destroy Me': function() { $(this).dialog('destroy').show(); } }
  });
});

Running this you can toggle can element from being a dialog and back again.

But, if you want to make sure the dialog is destroyed when you create it, simply destroy any possible copies ahead of time. For example:

    //  destroy any previous dialog of same that may exist
    $(".ui-dialog").filter(function(i) { return $(this).children("#dialog").exist(); }).remove();
    $("#dialog").dialog({ 
        /* dialog options */ 
    });

Related Solutions

Javascript – jQuery Dialog Box

I encountered the same issue (dialog would only open once, after closing, it wouldn't open again), and tried the solutions above which did not fix my problem. I went back to the docs and realized I had a fundamental misunderstanding of how the dialog works.

The $('#myDiv').dialog() command creates/instantiates the dialog, but is not necessarily the proper way to open it. The proper way to open it is to instantiate the dialog with dialog(), then use dialog('open') to display it, and dialog('close') to close/hide it. This means you'll probably want to set the autoOpen option to false.

So the process is: instantiate the dialog on document ready, then listen for the click or whatever action you want to show the dialog. Then it will work, time after time!

<script type="text/javascript"> 
        jQuery(document).ready( function(){       
            jQuery("#myButton").click( showDialog );

            //variable to reference window
            $myWindow = jQuery('#myDiv');

            //instantiate the dialog
            $myWindow.dialog({ height: 350,
                width: 400,
                modal: true,
                position: 'center',
                autoOpen:false,
                title:'Hello World',
                overlay: { opacity: 0.5, background: 'black'}
                });
            }

        );
    //function to show dialog   
    var showDialog = function() {
        //if the contents have been hidden with css, you need this
        $myWindow.show(); 
        //open the dialog
        $myWindow.dialog("open");
        }

    //function to close dialog, probably called by a button in the dialog
    var closeDialog = function() {
        $myWindow.dialog("close");
    }


</script>
</head>

<body>

<input id="myButton" name="myButton" value="Click Me" type="button" />
<div id="myDiv" style="display:none">
    <p>I am a modal dialog</p>
</div>

Html – How to remove close button on the jQuery UI dialog

I have found this worked in the end (note the third line overriding the open function which find the button and hides it):

$("#div2").dialog({
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
    }
});

To hide the close button on all dialogs you can use the following CSS too:

.ui-dialog-titlebar-close {
    visibility: hidden;
}

Best Answer

Related Solutions

Javascript – jQuery Dialog Box

Html – How to remove close button on the jQuery UI dialog

Related Topic