wake-up-neo.com

So entfernen Sie einen Dialog beim Schließen

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

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

Wenn ich das ausführen, wird das Dialogfeld korrekt angezeigt, aber wenn ich es schließe, ist das Dialogfeld immer noch in der HTML-Datei sichtbar (mit FireBug). Was fehlt mir hier? Etwas was ich vergessen habe

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

$ (this) .destroy ist keine Funktion

Kann mir jemand helfen?

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

jquery-uijquery-ui-dialog
127
Svish
$(this).dialog('destroy').remove()

Dies zerstört den Dialog und entfernt dann das Div, das den Dialog vollständig gehostet hat, vollständig aus dem DOM

251
lomaxx

Warum möchten Sie es entfernen?

Wenn Sie verhindern möchten, dass mehrere Instanzen erstellt werden, gehen Sie wie folgt vor:.

$('#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');
9
Fiona - myaccessible.website
$(dialogElement).empty();

$(dialogElement).remove();

das behebt es für echt

8
Ghost1

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();
}
});
2
cesar

Sie können verwenden

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

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.

1
deb_

Ich verwende 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');  
    });
}
0
Sterling Diaz