Cómo eliminar completamente un diálogo al cerrar

133

Cuando falla una operación ajax, creo un nuevo div con los errores y luego lo muestro como un diálogo. Cuando se cierra el cuadro de diálogo, me gustaría destruir completamente y eliminar el div nuevamente. ¿Cómo puedo hacer esto? Mi código se ve así en este momento:

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

Cuando ejecuto esto, el cuadro de diálogo aparece correctamente, pero cuando lo cierro, el cuadro de diálogo aún está visible en el html (usando FireBug). ¿Que me estoy perdiendo aqui? Algo que he olvidado?

Actualización: Acabo de notar que mi código me da un error en la consola de Firebug.

$ (this) .destroy no es una función

¿Alguien puede ayudarme?

Actualización: si lo hago solo $(this).remove(), el elemento se elimina del html. ¿Pero está completamente eliminado del DOM? ¿O de alguna manera necesito llamar a esa función de destrucción primero también?

Svish
fuente

Respuestas:

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

Esto destruirá el diálogo y luego eliminará el div que estaba "alojando" el diálogo completamente del DOM

lomaxx
fuente
3
Tenga cuidado al usar esto con FF y con Firebug abierto. Se estrellará. code.google.com/p/fbug/issues/detail?id=6290 Pasé horas ... para averiguar qué pasaba con mi código.
Hendry H.
55
Si está utilizando un div del DOM, por lo que no se creó dinámicamente, use .empty(). Luego puede reutilizarlo, si llena el contenido nuevamente fuera de curso.
KoalaBear
2
@HendryH., Eso ya no parece ser un problema con Firefox 23.0 y Firebug 1.11.4.
cjm
2
Es destroynecesario? ¿Eliminar el elemento también destruirá el diálogo?
Druska
10

¿Por qué quieres eliminarlo?

Si es para evitar que se creen varias instancias, simplemente use el siguiente enfoque ...

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

Y cuando se produce el error, lo harías ...

$('#myDialog').html("Ooops.");
$('#myDialog').dialog('open');
Fiona - myaccessible.website
fuente
Solo pensé que sería más fácil, ya que contendrá contenido diferente dependiendo de lo que recupere de una llamada ajax. Y también el div no es estático como lo mostré en mi ejemplo, sino que lo representa el complemento github.com/nje/jquery-tmpl . Si usted tiene una buena manera de cambiar el contenido del cuadro de diálogo que estaría interesado en ver que aunque :)
Svish
Bueno, en mi ejemplo, elegí la opción extremadamente simple de simplemente volcar una cadena dentro del diálogo div: $ ('# myDialog'). Html ("Ooops."); Puede modificar esto para cambiar el contenido de cualquier subcontrol en el diálogo div también.
Fiona - myaccessible.website
Este no es un gran enfoque ya que todas las opciones de diálogo permanecerán en el #myDialog a menos que las anule específicamente. El segundo cuadro de diálogo no debe (siempre) tener los mismos botones, altura, etc. que el primero.
Michiel Cornille
8
$(dialogElement).empty();

$(dialogElement).remove();

esto lo arregla de verdad

Fantasma1
fuente
3

Esto me funcionó

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

¡Salud!

PD: tuve un problema algo similar y el enfoque anterior lo resolvió.

debutante_
fuente
2
¡Está llamando al método de cierre desde dentro de la devolución de llamada de cierre! jQuery UI es lo suficientemente inteligente como para evitar el bucle infinito que sugiere esto, pero sigue siendo redundante, y definitivamente no lo consideraría elegante.
Elezar
Al momento de escribir la respuesta, sin el $(this).dialog("close");, el diálogo simplemente no desaparecería. jQuery a veces es muy raro.
deb_
2

Una solución fea que funciona como un encanto para mí:

$("#mydialog").dialog(
    open: function(){
        $('div.ui-widget-overlay').hide();
        $("div.ui-dialog").not(':first').remove();
}
});
cesar
fuente
44
un poco raro, está funcionando en absoluto. abres el cuadro de diálogo y lo eliminas de inmediato ...
Dementic
1

Puedes hacer uso

$(dialogElement).empty();    
$(dialogElement).remove();
usuario2994033
fuente
0

Yo uso esta función en todos mis proyectos js

Lo llamas: hideAndResetModals ("# IdModalDialog")

Usted define 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');  
    });
}
Sterling Diaz
fuente