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

116

Когда операция 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? Или мне почему-то нужно сначала вызвать эту функцию уничтожения?

Теги:
jquery-ui-dialog

6 ответов

248
Лучший ответ
$(this).dialog('destroy').remove()

Это разрушит диалог, а затем удалит div, полностью "разместивший" диалог из DOM

Поделиться
  • 0
    Обратите внимание, что .destroy удаляет внешнюю разметку, добавленную каркасом пользовательского интерфейса (заголовок, кнопка закрытия, панель изменения размера и т. Д.). Возможно, это то, что вы подразумевали под хозяином .
  • 3
    используйте это с FF и с открытым Firebug. Это потерпит крах. code.google.com/p/fbug/issues/detail?id=6290 Я потратил часы ... чтобы понять, что не так с моим кодом.
Показать ещё 7 комментариев
9

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

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

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

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

$('#myDialog').html("Ooops.");
$('#myDialog').dialog('open');
Поделиться
  • 0
    Я просто подумал, что это будет проще, так как он будет содержать разное содержимое в зависимости от того, что я получу от вызова ajax. Кроме того, div не статичен, как я показал в моем примере, а отображается плагином github.com/nje/jquery-tmpl . Если у вас есть хороший способ поменять содержимое диалога, мне было бы интересно посмотреть на это :)
  • 0
    Ну, в моем примере я выбрал чрезвычайно простой вариант - просто вывести строку в диалоге div: $ ('# myDialog'). Html ("Ooops."); Вы можете изменить это, чтобы изменить содержимое любых элементов управления в диалоговом окне div.
Показать ещё 1 комментарий
7 
$(dialogElement).empty();

$(dialogElement).remove();

это фиксирует его для реального

Поделиться
2

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

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

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

$(dialogElement).empty();    
$(dialogElement).remove();
Поделиться
0

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

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

Ура!

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

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

Ещё вопросы

Сообщество Overcoder
Наверх
Меню