jquery-ui-dialog – Come agganciare la finestra di dialogo close event

Sto usando il plugin jquery-ui-dialog

Sto cercando il modo di 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 che posso eseguire il codice quando si fa clic sul pulsante di chiusura, ma questo non copre l’utente che chiude con la fuga o la x nell’angolo in alto a destra.

L’ho trovato!

Puoi prendere l’evento close usando il seguente codice:

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

Ovviamente posso sostituire l’avviso con qualsiasi cosa abbia bisogno di fare.
Modifica: A partire da Jquery 1.7, il bind () è diventato attivo ()

Credo che puoi anche farlo mentre crei il dialogo (copiato da un progetto che ho fatto):

 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

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

La proprietà “close” della finestra di dialogo fornisce l’evento close per lo stesso.

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

Questo è ciò che ha funzionato per me…

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

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

Perché nessuno in realtà ha 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. }); 

Se sto capendo il tipo di finestra di cui stai parlando, $ (window) .unload () (per la finestra di dialogo) non ti darà il hook che ti serve?

(E se ho frainteso, e stai parlando di una finestra di dialogo fatta tramite CSS piuttosto che una finestra di browser pop-up, allora tutti i modi per chiudere quella finestra sono elementi per i quali puoi registrare i click hander).

Edit: Ah, ora vedo che stai parlando di windows di dialogo jquery-ui, che sono fatte tramite CSS. Puoi agganciare la X che chiude la finestra registrando un gestore di clic per l’elemento con la class ui-dialog-titlebar-close .

Più utile, forse, è che ti dici come scoprirlo rapidamente. Durante la visualizzazione della finestra di dialogo, apri semplicemente FireBug e controlla gli elementi che possono chiudere la finestra. Vedrai immediatamente come sono definiti e che ti fornisce ciò di cui hai bisogno per registrare i gestori di clic.

Quindi, per rispondere direttamente alla tua domanda, credo che la risposta sia davvero “no” – non c’è un evento ravvicinato che puoi colbind, ma “sì” – puoi colbind tutti i modi per chiudere la finestra di dialogo abbastanza facilmente e ottenere ciò che vuoi.

aggiungi l’opzione ‘chiudi’ come sotto campione e fai ciò che vuoi in linea

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

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

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