Jak całkowicie usunąć okno dialogowe po zamknięciu

133

Kiedy operacja Ajax nie powiedzie się, tworzę nowy div z błędami, a następnie pokazuję go jako okno dialogowe. Po zamknięciu okna chciałbym całkowicie zniszczyć i ponownie usunąć element div. W jaki sposób mogę to zrobić? Mój kod wygląda teraz mniej więcej tak:

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

Kiedy to uruchamiam, okno dialogowe wyświetla się poprawnie, ale kiedy je zamykam, okno dialogowe jest nadal widoczne w html (używając FireBug). Czego tu brakuje? Coś, o czym zapomniałem?

Aktualizacja: właśnie zauważyłem, że mój kod wyświetla błąd w konsoli firebuga.

$ (this) .destroy nie jest funkcją

Czy ktoś może mi pomóc?

Aktualizacja: jeśli to zrobię $(this).remove(), element zostanie usunięty z HTML. Ale czy jest całkowicie usunięty z DOM? Czy w jakiś sposób muszę najpierw wywołać tę funkcję niszczenia?

Svish
źródło

Odpowiedzi:

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

Spowoduje to zniszczenie okna dialogowego, a następnie całkowite usunięcie elementu div, który „hostował” okno dialogowe z modelu DOM

lomaxx
źródło
3
Uważaj, używając tego z FF i otwartym Firebug. To się rozbije. code.google.com/p/fbug/issues/detail?id=6290 Spędziłem godziny ... aby dowiedzieć się, co jest nie tak z moim kodem.
Hendry H.
5
Jeśli używasz elementu div z DOM, a więc nie utworzonego dynamicznie, użyj .empty(). Następnie możesz go ponownie użyć, jeśli ponownie wypełnisz zawartość poza kursem.
KoalaBear
2
@HendryH., To już nie wydaje się być problemem z Firefox 23.0 i Firebug 1.11.4.
cjm
2
Jest destroykonieczne? Czy usunięcie elementu nie zniszczy również okna dialogowego?
Druska
10

Dlaczego chcesz to usunąć?

Jeśli ma to zapobiec tworzeniu wielu instancji, po prostu zastosuj następujące podejście ...

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

A kiedy wystąpi błąd, zrobisz ...

$('#myDialog').html("Ooops.");
$('#myDialog').dialog('open');
Fiona - myaccessible.website
źródło
Po prostu pomyślałem, że będzie to łatwiejsze, ponieważ będzie zawierał różne treści w zależności od tego, co otrzymam z połączenia AJAX. Poza tym div nie jest statyczny, jak pokazałem w moim przykładzie, ale renderowany przez wtyczkę github.com/nje/jquery-tmpl . Jeśli masz dobry sposób na zamianę zawartości okna dialogowego, chciałbym to zobaczyć :)
Svish
Cóż, w moim przykładzie wybrałem niezwykle prostą opcję po prostu zrzucenia ciągu z dialogowym div: $ ('# myDialog'). Html ("Ups."); Możesz to zmodyfikować, aby zmienić zawartość wszelkich podrzędnych kontrolek w oknie dialogowym div.
Fiona - myaccessible.website
Nie jest to świetne podejście, ponieważ wszystkie opcje dialogowe dialogOptions pozostaną w #myDialog, chyba że je zastąpisz. Drugie okno dialogowe nie powinno (zawsze) mieć tych samych przycisków, wysokości itp. Jak pierwsze.
Michiel Cornille
8
$(dialogElement).empty();

$(dialogElement).remove();

to naprawia to naprawdę

Duch 1
źródło
3

To działa dla mnie

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

Twoje zdrowie!

PS: Miałem nieco podobny problem i powyższe podejście go rozwiązało.

deb_
źródło
2
Wywołujesz metodę close z wywołania zwrotnego close! Interfejs użytkownika jQuery jest wystarczająco inteligentny, aby zapobiec sugerowanej przez to nieskończonej pętli, ale nadal jest zbędny i zdecydowanie nie uważałbym go za elegancki.
Elezar
W momencie pisania odpowiedzi bez $(this).dialog("close");znaku dialog po prostu nie zniknąłby. jQuery jest czasami bardzo dziwne.
deb_
2

Brzydkie rozwiązanie, które dla mnie działa jak urok:

$("#mydialog").dialog(
    open: function(){
        $('div.ui-widget-overlay').hide();
        $("div.ui-dialog").not(':first').remove();
}
});
cesar
źródło
4
trochę dziwne, że w ogóle działa. otwierasz okno dialogowe i natychmiast je usuwasz ...
Dementic
1

Możesz użyć

$(dialogElement).empty();    
$(dialogElement).remove();
user2994033
źródło
0

Używam tej funkcji we wszystkich moich projektach js

Nazywasz to: hideAndResetModals ("# IdModalDialog")

Ty określasz, jeśli:

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');  
    });
}
Sterling Diaz
źródło