So entfernen Sie einen Dialog beim Schließen vollständig

133

Wenn eine Ajax-Operation fehlschlägt, erstelle ich ein neues Div mit den Fehlern und zeige es dann als Dialog. Wenn der Dialog geschlossen ist, möchte ich das div komplett zerstören und wieder entfernen. Wie kann ich das machen? Mein Code sieht im Moment ungefähr so aus:

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

Wenn ich dies ausführe, wird das Dialogfeld korrekt angezeigt, aber wenn ich es schließe, ist das Dialogfeld weiterhin im HTML-Code sichtbar (mithilfe von FireBug). Was vermisse ich hier? Etwas was ich vergessen habe?

Update: Ich habe gerade bemerkt, dass mein Code mir einen Fehler in der Firebug-Konsole gibt.

$ (this) .destroy ist keine Funktion

Kann mir jemand helfen?

Update: Wenn ich es $(this).remove()stattdessen mache , wird das Element aus dem HTML entfernt. Aber ist es vollständig aus dem DOM entfernt? Oder muss ich diese Zerstörungsfunktion auch zuerst aufrufen?

jquery-ui jquery-ui-dialog

— Svish
quelle

261

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

Dadurch wird der Dialog zerstört und das Div, das den Dialog "gehostet" hat, vollständig aus dem DOM entfernt

— Lomaxx
quelle

3

Vorsicht bei Verwendung mit FF und mit geöffnetem Firebug. Es wird abstürzen. code.google.com/p/fbug/issues/detail?id=6290 Ich habe Stunden damit verbracht, herauszufinden, was mit meinem Code nicht stimmt.

— Hendry H.

5

Wenn Sie ein Div aus dem DOM verwenden, das nicht dynamisch erstellt wurde, verwenden Sie .empty(). Dann können Sie es wiederverwenden, wenn Sie den Inhalt natürlich wieder füllen.

— KoalaBear

2

@HendryH., Das scheint mit Firefox 23.0 und Firebug 1.11.4 kein Problem mehr zu sein.

— cjm

2

Ist destroynotwendig? Wird das Entfernen des Elements nicht auch den Dialog zerstören?

— Druska

3

Siehe: stackoverflow.com/questions/9124389/…

— gaefan

10

Warum möchten Sie es entfernen?

Wenn Sie verhindern möchten, dass mehrere Instanzen erstellt werden, verwenden Sie einfach den folgenden Ansatz ...

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

Und wenn der Fehler auftritt, würden Sie tun ...

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

— Fiona - myaccessible.website
quelle

Ich dachte nur, es wäre einfacher, da es unterschiedliche Inhalte enthält, je nachdem, was ich von einem Ajax-Anruf zurück bekomme. Und auch das div ist nicht statisch, wie ich es in meinem Beispiel gezeigt habe, sondern wird vom Plugin github.com/nje/jquery-tmpl gerendert . Wenn Sie eine gute Möglichkeit haben, den Inhalt des Dialogs

— auszutauschen,

Nun, in meinem Beispiel habe ich mich für die extrem einfache Option entschieden, einfach einen String mit dem Dialog div zu sichern: $ ('# myDialog'). Html ("Ooops."); Sie können dies ändern, um auch den Inhalt von Untersteuerelementen im Dialogfeld div zu ändern.

— Fiona - myaccessible.website

Dies ist kein guter Ansatz, da alle dialogOptions im #myDialog verbleiben, sofern Sie sie nicht speziell überschreiben. Der zweite Dialog sollte (immer) nicht die gleichen Schaltflächen, die gleiche Höhe usw. haben wie der erste.

— Michiel Cornille

8

$(dialogElement).empty();

$(dialogElement).remove();

das behebt es wirklich

— Ghost1
quelle

3

Das ist für mich gearbeitet

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

Prost!

PS: Ich hatte ein etwas ähnliches Problem und der obige Ansatz hat es gelöst.

— deb_
quelle

2

Sie rufen die Methode close innerhalb des Rückrufs close auf! Die jQuery-Benutzeroberfläche ist intelligent genug, um die dadurch vorgeschlagene Endlosschleife zu verhindern, aber sie ist immer noch redundant, und ich würde sie definitiv nicht als elegant betrachten.

— Elezar

Zum Zeitpunkt des Schreibens der Antwort würde $(this).dialog("close");der Dialog ohne das einfach nicht verschwinden. jQuery ist manchmal sehr seltsam.

— deb_

2

Eine hässliche Lösung, die für mich wie ein Zauber wirkt:

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

— Cesar
quelle

4

irgendwie komisch funktioniert es überhaupt. Sie öffnen den Dialog und entfernen ihn sofort ...

— Dementic

1

Sie können verwenden

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

— user2994033
quelle

0

Ich benutze diese Funktion in allen meinen js-Projekten

Sie nennen es: hideAndResetModals ("# IdModalDialog")

Sie definieren, ob:

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
quelle