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

186

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.

Brownie
quelle

Antworten:

248

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.

Brownie
quelle
3
Tippfehler: $ ('div # popup_content'). bind ('dialogclose', Funktion (Ereignis)) {...}
CFNinja
1
Das ist hilfreich, aber $('div#popup_content')richtig? Womit soll ich das ersetzen, wenn ich bedenke, dass mein Dialog so geöffnet wirdjQuery.fn.dialog.open({})
Jake N
Ich sehe, dass der Dialog zuerst geschlossen wird und dann die Warnung angezeigt wird. Wenn es für alle die gleiche Situation ist, kann mir jemand helfen, dass die Warnung zuerst angezeigt wird und dann bei Klicken auf OK das Fenster geschlossen wird? Korrigieren Sie mich ....
Changeme
5
Dies sollte aktualisiert werden, um on () anstelle von bind () zu verwenden, was jetzt veraltet ist.
RBZ
2
Beachten Sie, dass das Overlay-Div im DOM nicht vorhanden ist, wenn noch nie zuvor ein jQuery-UI-Dialogfeld auf einer Seite geöffnet wurde. Daher können Sie stattdessen in Betracht ziehen, so etwas zu tun:$('body').on('dialogclose', '.ui-dialog', function(){...});
am
192

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

Darryl Hein
quelle
9
Diese Antwort scheint mir korrekter zu sein als die akzeptierte Antwort. Die korrekte API-Dokumentation finden Sie auch hier: api.jqueryui.com/dialog/#event-close
Chris Gillum
2
Jake N - Sie müssen tatsächlich eine Funktion schreiben, auf die der Dialog 'CloseFunction' zugreifen kann, damit dies funktioniert, zum Beispiel direkt darüber, dass Sie schreiben können var CloseFunction = function() { //Do your custom closing stuff here };
Adam Diament
Dies ist eine Option, aber zur Zeit wird der Code an verschiedenen Stellen verwendet. Die ausgewählte Antwort funktioniert, wenn Sie in verschiedenen Kontexten unterschiedliches Verhalten hinzufügen und den Code zur Dialogerstellung erneut verwenden möchten, um die Standardisierung zu erhalten.
NectarSoft
Du hast overlayzweimal. Das ist doch nicht nötig, oder?
Radbyx
1
Dies funktioniert und ist hier definitiv eine notwendige und nützliche Antwort, aber es wird auch der CloseFunction-Code ausgeführt, wenn der Dialog auf irgendeine Weise geschlossen wird, nicht nur, wenn er mit dem X oder etwas anderem geschlossen wird. Wenn Sie also bestimmten Code ausführen möchten, wenn der Dialog mit dem X oder der Schaltfläche Abbrechen geschlossen wird, aber nicht, wenn er durch etwas anderes geschlossen wird (wie in meinem Fall, wenn eine übermittelte Eingabe als korrekt validiert wird), ist dies nicht der Fall Arbeit.
Mikato
31
$("#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');
    }
});
Mo Ming C.
quelle
21
$( "#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.

Taksh
quelle
16

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");
                }
            }
        });
Umair Noor
quelle
10

Das hat bei mir funktioniert ...

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

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.  
});
Disper
quelle
6

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
}
Mehdi Roostaeian
quelle
4

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

Andy
quelle
Hey andy. Ich amüsiere den Dialog von jquery-ui, der über CSS und Javascript erstellt wird. Wenn ich mir den Code ansehe, denke ich, dass da ein Haken für mich ist, aber ich weiß nicht, wie ich dahin komme.
Brownie
2

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();
});
Alexei
quelle
1
Verwenden Sie einfach .on () - anstelle von .live () oder .bind ()
cssyphus