Comment supprimer complètement une boîte de dialogue à la fermeture
Lorsqu'une opération ajax échoue, je crée un nouveau div avec les erreurs, puis je l'affiche comme une boîte de dialogue. Lorsque la boîte de dialogue est fermée, je voudrais détruire complètement et supprimer à nouveau la div. Comment puis-je faire cela? Mon code ressemble à ceci en ce moment:
$('<div>We failed</div>')
.dialog(
{
title: 'Error',
close: function(event, ui)
{
$(this).destroy().remove();
}
});
Lorsque je l'exécute, la boîte de dialogue s'affiche correctement, mais lorsque je la ferme, la boîte de dialogue est toujours visible dans le code html (en utilisant FireBug). Ce qui me manque ici? Quelque chose que j'ai oublié?
Mise à jour: juste remarqué mon code me donne une erreur dans la console firebug.
$(ce).destroy n'est pas une fonction
Quelqu'un capable de m'aider?
Mise à jour: Si je fais juste $(this).remove() à la place, l'élément est supprimé du code html. Mais est-il complètement retiré du DOM? Ou dois-je en quelque sorte appeler cette fonction de destruction en premier?
7 réponses
$(this).dialog('destroy').remove()
Cela détruira la boîte de dialogue, puis supprimera complètement le div qui "hébergeait" la boîte de dialogue du DOM
Pourquoi voulez-vous supprimer?
Si c'est pour empêcher la création de plusieurs instances, utilisez simplement l'approche suivante...
$('#myDialog')
.dialog(
{
title: 'Error',
close: function(event, ui)
{
$(this).dialog('close');
}
});
Et quand l'erreur se produit, vous feriez...
$('#myDialog').html("Ooops.");
$('#myDialog').dialog('open');
$(dialogElement).empty();
$(dialogElement).remove();
Cela le corrige pour de vrai
Une solution laide qui fonctionne comme un charme pour moi:
$("#mydialog").dialog(
open: function(){
$('div.ui-widget-overlay').hide();
$("div.ui-dialog").not(':first').remove();
}
});
Vous pouvez utiliser
$(dialogElement).empty();
$(dialogElement).remove();
Ceci est travaillé pour moi
$('<div>We failed</div>')
.dialog(
{
title: 'Error',
close: function(event, ui)
{
$(this).dialog("close");
$(this).remove();
}
});
Cheers!
PS: j'ai eu un problème quelque peu similaire et l'approche ci-dessus l'a résolu.
J'utilise cette fonction dans tous mes projets js
Vous l'appelez: hideAndResetModals ("#IdModalDialog")
Vous définissez si:
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');
});
}