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


133

Lorsqu'une opération ajax échoue, je crée un nouveau div avec les erreurs, puis je l'affiche sous forme de boîte de dialogue. Lorsque la boîte de dialogue est fermée, je voudrais détruire complètement et supprimer à nouveau le div. Comment puis-je faire ceci? Mon code ressemble à quelque chose comme ça pour le 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 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 fais juste à la $(this).remove()place, l'élément est supprimé du html. Mais est-il complètement supprimé du DOM? Ou dois-je en quelque sorte appeler d'abord cette fonction de destruction?

Réponses:


262
$(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


3
attention à l'utiliser avec FF et avec Firebug ouvert. Il va s'écraser. code.google.com/p/fbug/issues/detail?id=6290 J'ai passé des heures ... à comprendre ce qui ne va pas avec mon code.
Hendry H.

5
Si vous utilisez un div du DOM, donc pas créé dynamiquement, utilisez .empty(). Ensuite, vous pouvez le réutiliser, si vous remplissez à nouveau le contenu offcourse.
KoalaBear

2
@HendryH., Cela ne semble plus être un problème avec Firefox 23.0 et Firebug 1.11.4.
cjm

2
Est destroynécessaire? La suppression de l'élément ne détruira-t-elle pas également la boîte de dialogue?
Druska


10

Pourquoi voulez-vous le supprimer?

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

J'ai juste pensé que ce serait plus facile, car il contiendra un contenu différent en fonction de ce que je reçois d'un appel ajax. Et aussi le div n'est pas statique comme je l'ai montré dans mon exemple mais rendu par le plugin github.com/nje/jquery-tmpl . Si vous avez un bon moyen d'échanger le contenu de la boîte de dialogue, je serais intéressé à voir cela cependant :)
Svish

Eh bien, dans mon exemple, j'ai opté pour l'option extrêmement simple de simplement vider une chaîne avec le div de dialogue: $ ('# myDialog'). Html ("Ooops."); Vous pouvez le modifier pour changer le contenu de tous les sous-contrôles de la boîte de dialogue div.
Fiona - myaccessible.website

Ce n'est pas une bonne approche car toutes les options de dialogue resteront sur le #myDialog à moins que vous ne les remplaciez spécifiquement. La deuxième boîte de dialogue ne doit pas (toujours) avoir les mêmes boutons, hauteur, etc. que la première.
Michiel Cornille

8
$(dialogElement).empty();

$(dialogElement).remove();

cela le corrige pour de vrai


3

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 un peu similaire et l'approche ci-dessus l'a résolu.


2
Vous appelez la méthode close à partir du rappel de fermeture! jQuery UI est suffisamment intelligent pour empêcher la boucle infinie suggérée par cela, mais elle est toujours redondante et je ne la considérerais certainement pas élégante.
Elezar

Au moment de la rédaction de la réponse, sans le $(this).dialog("close");, le dialogue ne disparaîtrait tout simplement pas. jQuery est parfois très étrange.
deb_

2

Une solution moche qui fonctionne comme un charme pour moi:

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

4
un peu bizarre ça marche du tout. vous ouvrez la boîte de dialogue et la supprimez immédiatement ...
Dementic

1

Vous pouvez utiliser

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

0

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');  
    });
}
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.