Как полностью удалить диалог при закрытии

133

Когда операция ajax завершается неудачно, я создаю новый div с ошибками, а затем показываю его в виде диалога. Когда диалоговое окно закрыто, я хотел бы полностью уничтожить и снова удалить div. Как я могу это сделать? Мой код выглядит примерно так:

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

Когда я запускаю это, диалоговое окно отображается правильно, но когда я закрываю его, диалоговое окно все еще видно в html (используя FireBug). Что мне здесь не хватает? Что-то я забыл?

Обновление: только что заметил, что мой код выдает ошибку в консоли Firebug.

$ (this) .destroy не является функцией

Кто-нибудь может мне помочь?

Обновление: если я делаю только $(this).remove()вместо этого, элемент удаляется из HTML. Но полностью ли он удален из DOM? Или мне как-то нужно сначала вызвать эту функцию уничтожения?

Svish
источник

Ответы:

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

Это уничтожит диалог, а затем полностью удалит div, который «размещал» диалог из DOM

lomaxx
источник
3
используйте это с FF и с открытым Firebug. Это потерпит крах. code.google.com/p/fbug/issues/detail?id=6290 Я потратил часы ... чтобы понять, что не так с моим кодом.
Хендри Х.
5
Если вы используете div из DOM, поэтому он не создается динамически, используйте .empty(). Затем вы можете использовать его повторно, если вы снова заполнили содержимое, конечно.
KoalaBear
2
@HendryH., Это больше не похоже на проблему с Firefox 23.0 и Firebug 1.11.4.
CJM
2
Является ли destroyнеобходимым? Разве удаление элемента также не разрушит диалог?
Друска
10

Почему вы хотите удалить это?

Если это предотвращает создание нескольких экземпляров, просто используйте следующий подход ...

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

И когда ошибка происходит, вы бы сделали ...

$('#myDialog').html("Ooops.");
$('#myDialog').dialog('open');
Фиона - myaccessible.website
источник
Я просто подумал, что это будет проще, так как он будет содержать разное содержимое в зависимости от того, что я получу от вызова ajax. Кроме того, div не статичен, как я показал в моем примере, а отображается плагином github.com/nje/jquery-tmpl . Если у вас есть хороший способ обмениваться содержимым диалога, мне было бы интересно увидеть это, хотя :)
Свиш
Ну, в моем примере я выбрал чрезвычайно простой вариант - просто вывести строку в диалоге div: $ ('# myDialog'). Html ("Ooops."); Вы можете изменить это, чтобы изменить содержимое любых субэлементов управления в диалоговом окне div.
Фиона - myaccessible.website
Это не очень хороший подход, так как все dialogOptions останутся в #myDialog, если вы не переопределите их специально. Второй диалог не должен (всегда) иметь те же кнопки, высоту и т. Д., Что и первый.
Michiel Cornille
8
$(dialogElement).empty();

$(dialogElement).remove();

это исправляет это по-настоящему

Ghost1
источник
3

Это работает для меня

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

Ура!

PS: у меня была несколько похожая проблема, и вышеуказанный подход решил ее.

deb_
источник
2
Вы вызываете метод close из обратного вызова close! Пользовательский интерфейс jQuery достаточно умен, чтобы предотвратить предложенный этим бесконечный цикл, но он все еще избыточен, и я определенно не считаю его элегантным.
Елезар
Во время написания ответа, без $(this).dialog("close");, диалог просто не исчезнет. Время от времени jQuery очень странный.
deb_
2

Уродливое решение, которое работает для меня как очарование:

$("#mydialog").dialog(
    open: function(){
        $('div.ui-widget-overlay').hide();
        $("div.ui-dialog").not(':first').remove();
}
});
Сезар
источник
4
довольно странно, что это работает вообще. Вы открываете диалоговое окно и немедленно удаляете его ...
Dementic
1

Вы можете использовать

$(dialogElement).empty();    
$(dialogElement).remove();
user2994033
источник
0

Я использую эту функцию во всех моих проектах JS

Вы называете это: hideAndResetModals ("# IdModalDialog")

Вы определяете, если:

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');  
    });
}
Стерлинг Диас
источник