Tutorial :How to completely remove a dialog on close



Question:

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?


Solution:1

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

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


Solution:2

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


Solution:3

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

this fixes it for real


Solution:4

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


Solution:5

You can do use

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


Solution:6

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.


Solution:7

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

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Previous
Next Post »