Come rimuovere completamente una finestra di dialogo alla chiusura

133

Quando un'operazione ajax fallisce, creo un nuovo div con gli errori e lo faccio vedere come una finestra di dialogo. Quando la finestra di dialogo è chiusa, vorrei distruggere completamente e rimuovere nuovamente il div. Come posso fare questo? Al momento il mio codice è simile al seguente:

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

Quando eseguo questo la finestra di dialogo viene visualizzata correttamente, ma quando la chiudo la finestra di dialogo è ancora visibile nell'html (utilizzando FireBug). Cosa mi sto perdendo qui? Qualcosa che ho dimenticato?

Aggiornamento: Ho appena notato che il mio codice mi dà un errore nella console di Firebug.

$ (questo) .destroy non è una funzione

Qualcuno in grado di aiutarmi?

Aggiornamento: se invece lo faccio $(this).remove(), l'elemento viene rimosso dall'html. Ma è completamente rimosso dal DOM? Oppure devo prima chiamare anche quella funzione di distruzione?

jquery-ui jquery-ui-dialog

— Svish
fonte

262

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

Questo distruggerà la finestra di dialogo e quindi rimuoverà completamente il div che stava "ospitando" la finestra di dialogo dal DOM

— lomaxx
fonte

3

perché è utile usarlo con FF e con Firebug aperto. Si schianterà. code.google.com/p/fbug/issues/detail?id=6290 Ho trascorso ore ... a capire cosa non va nel mio codice.

— Hendry H.

5

Se stai usando un div dal DOM, quindi non creato dinamicamente, usa .empty(). Quindi è possibile riutilizzarlo, se si riempiono nuovamente i contenuti offcourse.

— KoalaBear,

2

@HendryH., Che non sembra più essere un problema con Firefox 23.0 e Firebug 1.11.4.

— cjm

2

È destroynecessario? La rimozione dell'elemento non distruggerà anche la finestra di dialogo?

— Druska,

3

Vedi: stackoverflow.com/questions/9124389/...

— gaefan

10

Perché vuoi rimuoverlo?

Se è per impedire la creazione di più istanze, utilizzare semplicemente il seguente approccio ...

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

E quando si verifica l'errore, faresti ...

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

— Fiona - myaccessible.website
fonte

Ho solo pensato che sarebbe stato più semplice, dal momento che conterrà contenuti diversi a seconda di cosa ricevo da una chiamata Ajax. E anche il div non è statico come ho mostrato nel mio esempio ma reso dal plugin github.com/nje/jquery-tmpl . Se hai un buon modo di scambiare il contenuto della finestra di dialogo, sarei interessato a vederlo però :)

— Svish

Bene, nel mio esempio, sono andato con l'opzione estremamente semplice di scaricare una stringa solo con la finestra di dialogo div: $ ('# myDialog'). Html ("Ooops."); È possibile modificarlo per modificare anche il contenuto di eventuali sottocontrolli nella finestra di dialogo div.

— Fiona - myaccessible.website

Questo non è un ottimo approccio in quanto tutte le opzioni di dialogo rimarranno sul #myDialog a meno che non vengano sovrascritte in modo specifico. La seconda finestra di dialogo non dovrebbe (sempre) avere gli stessi pulsanti, altezza, ecc. Della prima.

— Michiel Cornille,

8

$(dialogElement).empty();

$(dialogElement).remove();

questo lo risolve davvero

— Ghost1
fonte

3

Questo ha funzionato per me

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

Saluti!

PS: ho avuto un problema in qualche modo simile e l'approccio sopra risolto.

— deb_
fonte

2

Stai chiamando il metodo close dall'interno del callback close! L'interfaccia utente di jQuery è abbastanza intelligente da impedire il loop infinito suggerito da questo, ma è ancora ridondante e sicuramente non lo considero elegante.

— Elezar,

Al momento della stesura della risposta, senza il $(this).dialog("close");, la finestra di dialogo non sarebbe semplicemente scomparsa. jQuery a volte è molto strano.

— deb_

2

Una brutta soluzione che funziona come un incantesimo per me:

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

— cesar
fonte

4

in qualche modo strano funziona. apri la finestra di dialogo e la rimuovi immediatamente ...

— Dementic

1

Puoi usarlo

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

— user2994033
fonte

0

Uso questa funzione in tutti i miei progetti js

Lo chiami: hideAndResetModals ("# IdModalDialog")

Definisci 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');  
    });
}

— Sterling Diaz
fonte