CODEWITHSUNDEEP
jquery-uijquery-ui-dialog
Svish
Svish

Reputation: 158291

How to completely remove a dialog on close

When an ajax operation fails, I create a new div with the errors and then show it as a dialog. When the dialog is closed I would like to completely destroy and remove the div again. How can I do this? My code looks something like this at the moment:

$('<div>We failed</div>')
    .dialog(
    {
        title: 'Error',
        close: function(event, ui)
        {
            $(this).destroy().remove();
        }
    });

When I run this the dialog box shows up correctly, but when I close it the dialog is still visible in the html (using FireBug). What am I missing here? Something I have forgotten?

Update: Just noticed my code gives me an error in the firebug console.

$(this).destroy is not a function

Anyone able to help me out?

Update: If I do just $(this).remove() instead, the item is removed from the html. But is it completely removed from the DOM? Or do I somehow need to call that destroy function first as well?

Upvotes: 141

Views: 201324

Answers (7)

Sterling Diaz
Sterling Diaz

Reputation: 3875

I use this function in all my js projects

You call it: hideAndResetModals("#IdModalDialog")

You define if:

function hideAndResetModals(modalID)
{
    $(modalID).modal('hide');
    clearValidation(modalID); //You implement it if you need it. If not, you can remote this line
    $(modalID).on('hidden.bs.modal', function () 
    {
        $(modalID).find('form').trigger('reset');  
    });
}

Upvotes: 0

DMv2
DMv2

Reputation: 198

This is worked for me

$('<div>We failed</div>')
    .dialog(
    {
        title: 'Error',
        close: function(event, ui)
        {
            $(this).dialog("close");
            $(this).remove();
        }
    });

Cheers!

PS: I had a somewhat similar problem and the above approach solved it.

Upvotes: 5

user2994033
user2994033

Reputation: 19

You can do use

$(dialogElement).empty();    
$(dialogElement).remove();

Upvotes: 1

Ghost1
Ghost1

Reputation: 320

$(dialogElement).empty();

$(dialogElement).remove();

this fixes it for real

Upvotes: 8

Fiona - myaccessible.website
Fiona - myaccessible.website

Reputation: 14919

Why do you want to remove it?

If it is to prevent multiple instances being created, then just use the following approach...

$('#myDialog') 
    .dialog( 
    { 
        title: 'Error', 
        close: function(event, ui) 
        { 
            $(this).dialog('close');
        } 
    });

And when the error occurs, you would do...

$('#myDialog').html("Ooops.");
$('#myDialog').dialog('open');

Upvotes: 11

cesar
cesar

Reputation: 45

An ugly solution that works like a charm for me:

$("#mydialog").dialog(
    open: function(){
        $('div.ui-widget-overlay').hide();
        $("div.ui-dialog").not(':first').remove();
}
});

Upvotes: 2

lomaxx
lomaxx

Reputation: 115863

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

This will destroy the dialog and then remove the div that was "hosting" the dialog completely from the DOM

Upvotes: 275

Related Questions