Como remover completamente uma caixa de diálogo ao fechar


133

Quando uma operação do ajax falha, eu crio uma nova div com os erros e a mostro como uma caixa de diálogo. Quando a caixa de diálogo estiver fechada, eu gostaria de destruir e remover completamente a div novamente. Como posso fazer isso? Meu código se parece com isso no momento:

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

Quando eu executo isso, a caixa de diálogo aparece corretamente, mas quando eu a fecho, a caixa de diálogo ainda é visível no html (usando o FireBug). O que estou perdendo aqui? Algo que eu esqueci?

Atualização: Acabei de notar que meu código me apresenta um erro no console do firebug.

$ (this) .destroy não é uma função

Alguém capaz de me ajudar?

Atualização: Se eu fizer apenas isso $(this).remove(), o item será removido do html. Mas é completamente removido do DOM? Ou preciso, de alguma forma, chamar essa função de destruição também?

Respostas:


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

Isso destruirá a caixa de diálogo e removerá a div que estava "hospedando" a caixa de diálogo completamente do DOM


3
tome cuidado com isso com o FF e com o Firebug aberto. Vai falhar. code.google.com/p/fbug/issues/detail?id=6290 Passei horas ... para descobrir o que há de errado com meu código.
Hendry H.

5
Se você estiver usando uma div do DOM, não criado dinamicamente, use .empty(). Então você pode reutilizá-lo, se você preencher o conteúdo novamente fora do curso.
KoalaBear

2
@HendryH., Isso não parece mais ser um problema com o Firefox 23.0 e o Firebug 1.11.4.
Cjm

2
É destroynecessário? A remoção do elemento também não destruirá a caixa de diálogo?
Druska


10

Por que você deseja removê-lo?

Se for para impedir que várias instâncias sejam criadas, use a seguinte abordagem ...

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

E quando o erro ocorre, você faria ...

$('#myDialog').html("Ooops.");
$('#myDialog').dialog('open');

Eu apenas pensei que seria mais fácil, pois ele conterá conteúdo diferente, dependendo do que eu recebo de uma chamada ajax. E também a div não é estática, como mostrei no meu exemplo, mas renderizada pelo plug- in github.com/nje/jquery-tmpl . Se você tem uma boa maneira de trocar o conteúdo da caixa de diálogo que eu estaria interessado em ver que embora :)
Svish

Bem, no meu exemplo, fui com a opção extremamente simples de simplesmente despejar uma string na caixa de diálogo div: $ ('# myDialog'). Html ("Ooops."); Você pode modificar isso para alterar o conteúdo de qualquer subcontrole na caixa de diálogo div.
Fiona - myaccessible.website

Essa não é uma ótima abordagem, pois todas as dialogOptions permanecerão no #myDialog, a menos que você as substitua especificamente. A segunda caixa de diálogo não deve (sempre) ter os mesmos botões, altura, etc. que a primeira.
Michiel Cornille

8
$(dialogElement).empty();

$(dialogElement).remove();

isso corrige de verdade


3

Isso é trabalhado para mim

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

Felicidades!

PS: Eu tive um problema semelhante e a abordagem acima resolveu.


2
Você está chamando o método close de dentro do retorno de chamada próximo! A interface do usuário do jQuery é inteligente o suficiente para impedir o loop infinito sugerido por isso, mas ainda é redundante, e eu definitivamente não consideraria elegante.
Elezar 4/08/16

Na hora de escrever a resposta, sem a $(this).dialog("close");, a caixa de diálogo simplesmente não desaparecia. jQuery às vezes é muito estranho.
deb_

2

Uma solução feia que funciona como um encanto para mim:

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

4
meio estranho está funcionando. você abre a caixa de diálogo e a remove imediatamente ...
Dementic

1

Você pode usar

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

0

Eu uso essa função em todos os meus projetos js

Você chama: hideAndResetModals ("# IdModalDialog")

Você define se:

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');  
    });
}
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.