web-dev-qa-db-fra.com

Comment supprimer complètement une boîte de dialogue à la fermeture

Quand une opération ajax échoue, je crée un nouveau div avec les erreurs puis l’affiche sous forme de dialogue. Lorsque le dialogue est fermé, je voudrais détruire complètement et supprimer à nouveau la div. Comment puis-je faire ceci? Mon code ressemble à quelque chose comme ça en ce moment:

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

Lorsque je lance ceci, la boîte de dialogue apparaît correctement, mais lorsque je la ferme, la boîte de dialogue est toujours visible dans le code HTML (en utilisant FireBug). Qu'est-ce que j'oublie ici? Quelque chose que j'ai oublié?

Mise à jour: Je viens de remarquer que mon code me donne une erreur dans la console Firebug.

$ (this) .destroy n'est pas une fonction

Quelqu'un peut-il m'aider?

Mise à jour: Si je ne fais que $(this).remove() à la place, l'élément est supprimé du code HTML. Mais est-il complètement retiré du DOM? Ou dois-je avoir besoin d'appeler cette fonction de destruction en premier?

jquery-uijquery-ui-dialog
127
Svish
$(this).dialog('destroy').remove()

Cela détruira la boîte de dialogue et supprimera ensuite la div qui "hébergeait" la boîte de dialogue complètement du DOM

251
lomaxx

Pourquoi voulez-vous l'enlever?

S'il s'agit d'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');
9
Fiona - myaccessible.website
$(dialogElement).empty();

$(dialogElement).remove();

cela corrige pour de vrai

8
Ghost1

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

Vous pouvez faire utiliser

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

Cela a fonctionné pour moi

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

À votre santé!

PS: J'ai eu un problème quelque peu similaire et l'approche ci-dessus l'a résolu.

1
deb_

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