jquery-ui-dialog - So binden Sie sich in das Ereignis zum Schließen des Dialogs ein

Ich benutze das jquery-ui-dialogPlugin

Ich suche nach einer Möglichkeit, die Seite zu aktualisieren, wenn unter bestimmten Umständen der Dialog geschlossen wird.

Gibt es eine Möglichkeit, ein nahes Ereignis aus dem Dialogfeld zu erfassen?

Ich weiß, dass ich Code ausführen kann, wenn auf die Schaltfläche zum Schließen geklickt wird, aber das gilt nicht für das Schließen des Benutzers mit Escape oder das x in der oberen rechten Ecke.

Ich habe es gefunden!

Sie können das Abschlussereignis mit dem folgenden Code abfangen:

 $('div#popup_content').on('dialogclose', function(event) {
     alert('closed');
 });

Natürlich kann ich die Warnung durch alles ersetzen, was ich tun muss.
Bearbeiten: Ab Jquery 1.7 ist bind () on () geworden.

Ich glaube, Sie können dies auch beim Erstellen des Dialogs tun (kopiert von einem Projekt, das ich durchgeführt habe):

dialog = $('#dialog').dialog({
    modal: true,
    autoOpen: false,
    width: 700,
    height: 500,
    minWidth: 700,
    minHeight: 500,
    position: ["center", 200],
    close: CloseFunction,
    overlay: {
        opacity: 0.5,
        background: "black"
    }
});

Hinweis close: CloseFunction

$("#dialog").dialog({
    autoOpen: false,
    resizable: false,
    width: 400,
    height: 140,
    modal: true, 
    buttons: {
        "SUBMIT": function() { 
        $("form").submit();
    }, 
        "CANCEL": function() { 
        $(this).dialog("close");
    } 
    },
    close: function() {
      alert('close');
    }
});

$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

Die Eigenschaft "close" des Dialogfelds gibt das Ereignis close für dasselbe an.

Sie können dies auch versuchen

$("#dialog").dialog({
            autoOpen: false,
            resizable: true,
            height: 400,
            width: 150,
            position: 'center',
            title: 'Term Sheet',
            beforeClose: function(event, ui) { 
               console.log('Event Fire');
            },
            modal: true,
            buttons: {
                "Submit": function () {
                    $(this).dialog("close");
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

Das hat bei mir funktioniert ...

$('#dialog').live("dialogclose", function(){
   //code to run on dialog close
});

Ab jQuery 1.7 ist die Methode .on () die bevorzugte Methode zum Anhängen von Ereignishandlern an ein Dokument.

Weil niemand tatsächlich eine Antwort mit using erstellt hat. on()stattdessen habe bind()ich beschlossen, eine zu erstellen.

$('div#dialog').on('dialogclose', function(event) {
     //custom logic fired after dialog is closed.  
});

Fügen Sie die Option 'Schließen' wie unter Beispiel hinzu und führen Sie die gewünschte Inline-Funktion aus

close: function(e){
    //do something
}

Wenn ich den Fenstertyp verstehe, von dem Sie sprechen, würde $ (window) .unload () (für das Dialogfenster) Ihnen nicht den Haken geben, den Sie benötigen?

(Und wenn ich es falsch verstanden habe und Sie über ein Dialogfeld sprechen, das über CSS und nicht über ein Popup-Browserfenster erstellt wurde, sind alle Möglichkeiten zum Schließen dieses Fensters Elemente, für die Sie Click-Hander registrieren können.)

Bearbeiten: Ah, ich sehe jetzt, dass Sie über jquery-ui-Dialoge sprechen, die über CSS erstellt werden. Sie können das X einbinden, das das Fenster schließt, indem Sie einen Klick-Handler für das Element mit der Klasse ui-dialog-titlebar-close registrieren .

Nützlicher ist vielleicht, wenn Sie Ihnen sagen, wie Sie das schnell herausfinden können. Öffnen Sie während der Anzeige des Dialogfelds einfach FireBug und Inspect die Elemente, die das Fenster schließen können. Sie werden sofort sehen, wie sie definiert sind, und das gibt Ihnen das, was Sie zum Registrieren der Klick-Handler benötigen.

Um Ihre Frage direkt zu beantworten, glaube ich, dass die Antwort wirklich "Nein" ist - es gibt kein nahes Ereignis, das Sie einbinden können, aber "Ja" - Sie können alle Möglichkeiten einbinden, um das Dialogfeld ziemlich einfach zu schließen und zu erhalten was du willst

Sie können den folgenden Code zum Erfassen des Abschlussereignisses für ein Element verwenden: Seite, Dialogfeld usw.

$("#dialog").live('pagehide', function(event, ui) {
      $(this).hide();
});