jquery-ui-dialog - Come collegarsi all'evento di chiusura della finestra di dialogo

186

Sto usando il jquery-ui-dialogplugin

Sto cercando un modo per aggiornare la pagina quando in alcune circostanze quando la finestra di dialogo è chiusa.

C'è un modo per catturare un evento vicino dalla finestra di dialogo?

So di poter eseguire il codice quando si fa clic sul pulsante Chiudi, ma ciò non copre la chiusura dell'utente con escape o la x nell'angolo in alto a destra.

— folletto buono
fonte

248

L'ho trovato!

È possibile catturare l'evento di chiusura utilizzando il seguente codice:

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

Ovviamente posso sostituire l'avviso con tutto ciò che devo fare.
Modifica: A partire da Jquery 1.7, il bind () è diventato on ()

— folletto buono
fonte

3

errore di battitura: $ ('div # popup_content'). bind ('dialogclose', funzione (evento)) {...}

— CFNinja,

1

Questo è utile ma è $('div#popup_content')giusto? Con cosa dovrei sostituirlo, tenendo presente che il mio dialogo si apre in questo modojQuery.fn.dialog.open({})

— Jake N,

Vedo che la finestra di dialogo viene chiusa per prima e quindi viene visualizzato l'avviso, se è la stessa situazione per tutti, qualcuno può aiutarmi in modo che venga visualizzato per primo quell'avviso e quindi facendo clic su OK, quindi la finestra si chiude? Correggimi....

— changeme

5

Questo dovrebbe essere aggiornato per usare on () invece di bind () che ora è obsoleto.

— RBZ,

2

Tieni presente che se una finestra di dialogo dell'interfaccia utente jQuery non è mai stata aperta prima su una pagina, il div overlay non esisterà nel DOM. Quindi, potresti considerare di fare qualcosa del genere invece:$('body').on('dialogclose', '.ui-dialog', function(){...});

— thdoan

192

Credo che tu possa farlo anche durante la creazione della finestra di dialogo (copiata da un progetto che ho realizzato):

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"
    }
});

Nota close: CloseFunction

— Darryl Hein
fonte

9

Questa risposta mi sembra più corretta della risposta accettata. Inoltre, la documentazione API corretta è disponibile qui: api.jqueryui.com/dialog/#event-close

— Chris Gillum,

2

Jake N - Devi effettivamente scrivere una funzione accessibile dalla finestra di dialogo chiamata 'CloseFunction' perché funzioni, ad esempio appena sopra potresti scrivere var CloseFunction = function() { //Do your custom closing stuff here };

— Adam Diament

Questa è un'opzione ma al momento il codice viene utilizzato in luoghi diversi. La risposta selezionata funziona quando si desidera aggiungere comportamenti diversi in contesti diversi e riutilizzare il codice di creazione della finestra di dialogo per ottenere la standardizzazione.

— NectarSoft,

Hai overlaydue volte. Non è vero, vero?

— Radbyx,

1

Funziona ed è sicuramente una risposta necessaria e utile qui, ma esegue anche il codice CloseFunction ogni volta che la finestra di dialogo viene chiusa in qualsiasi modo, non solo quando chiusa con la X o qualcosa del genere. Quindi, se vuoi eseguire un determinato codice quando la finestra di dialogo viene chiusa con la X o il pulsante Annulla, ma non quando viene chiusa da qualcos'altro che accade (come nel mio caso quando un input inviato viene convalidato come corretto), allora questo non lo farà lavoro.

— 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
fonte

21

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

La proprietà "close" della finestra di dialogo fornisce l'evento close per lo stesso.

— Taksh
fonte

16

Puoi anche provare questo

$("#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
fonte

10

Questo è ciò che ha funzionato per me...

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

— morttan
fonte

8

A partire da jQuery 1.7, il metodo .on () è il metodo preferito per associare i gestori di eventi a un documento.

Perché nessuno ha effettivamente creato una risposta con l'utilizzo. on()invece di bind()ho deciso di crearne uno.

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

— DISPERSIONE
fonte

6

aggiungi l'opzione 'chiudi' come sotto esempio e fai quello che vuoi funzione in linea

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

— Mehdi Roostaeian
fonte

4

Se capissi il tipo di finestra di cui stai parlando, non lo farei $ (window) .unload () (per la finestra di dialogo) non ti darebbe l'hook di cui hai bisogno?

(E se ho frainteso, e stai parlando di una finestra di dialogo creata tramite CSS anziché di una finestra del browser pop-up, allora tutto i modi per chiudere quella finestra sono elementi per i quali potresti registrare i gestori dei clic.)

Modifica: Ah, vedo ora che stai parlando di dialoghi jquery-ui, che sono fatti tramite CSS. Puoi agganciare la X che chiude la finestra registrando un gestore di clic per l'elemento con la classe ui-dialog-titlebar-close .

Più utile, forse, ti sta dicendo come capirlo rapidamente. Durante la visualizzazione della finestra di dialogo, basta aprire FireBug e Inspect gli elementi che possono chiudere la finestra. Vedrai immediatamente come sono definiti e ciò ti dà ciò di cui hai bisogno per registrare i gestori dei clic.

Quindi, per rispondere direttamente alla tua domanda, credo che la risposta sia davvero "no" - non c'è un evento vicino che puoi agganciare, ma "sì" - puoi agganciare tutti i modi per chiudere abbastanza facilmente la finestra di dialogo e ottenere ciò che vuoi.

— andy
fonte

Ehi andy. Mi diverto la finestra di dialogo da jquery-ui che è fatta tramite CSS e JavaScript. Guardando il codice penso che ci sia un gancio lì dentro per me, ma non so come arrivarci.

— Brownie,

2

Puoi provare il seguente codice per catturare l'evento di chiusura per qualsiasi elemento: pagina, finestra di dialogo ecc.

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

— alexei
fonte

1

Basta usare .on () - invece di .live () o .bind ()

— cssyphus,