jquery-ui-dialog - Cómo conectarse al evento de cierre de diálogo

186

Estoy usando el jquery-ui-dialogcomplemento

Estoy buscando la manera de actualizar la página cuando, en algunas circunstancias, cuando se cierra el cuadro de diálogo.

¿Hay alguna manera de capturar un evento cercano desde el diálogo?

Sé que puedo ejecutar el código cuando se hace clic en el botón de cerrar, pero eso no cubre al usuario que cierra con escape o la x en la esquina superior derecha.

Duende
fuente

Respuestas:

248

¡Lo he encontrado!

Puede atrapar el evento cercano usando el siguiente código:

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

Obviamente puedo reemplazar la alerta con lo que sea que tenga que hacer.
Editar: a partir de Jquery 1.7, el enlace () se ha convertido en ()

Duende
fuente
3
error tipográfico: $ ('div # popup_content'). bind ('dialogclose', function (event)) {...}
CFNinja
1
Esto es útil pero es $('div#popup_content')correcto? ¿Con qué debería reemplazar esto, teniendo en cuenta que mi diálogo se abre así?jQuery.fn.dialog.open({})
Jake N
Veo que el diálogo se cierra primero y luego aparece la alerta, si es la misma situación para todos, ¿alguien puede ayudarme para que esa alerta aparezca primero y luego, al hacer clic en Aceptar, se cierre la ventana? Corrígeme ....
changeme
55
Esto debería actualizarse para usar on () en lugar de bind () que ahora está obsoleto.
RBZ
2
Tenga en cuenta que si nunca se ha abierto un diálogo de jQuery UI en una página, entonces el div de superposición no existirá en el DOM. Por lo tanto, es posible pensar en hacer algo como esto en su lugar:$('body').on('dialogclose', '.ui-dialog', function(){...});
thdoan
192

Creo que también puedes hacerlo mientras creas el diálogo (copiado de un proyecto que hice):

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
fuente
9
Esta respuesta me parece más correcta que la respuesta aceptada. Además, la documentación API correcta se puede encontrar aquí: api.jqueryui.com/dialog/#event-close
Chris Gillum
2
Jake N - Necesitas escribir realmente una función accesible al diálogo llamado 'CerrarFunción' para que esto funcione, por ejemplo, justo encima de lo que podrías escribir var CloseFunction = function() { //Do your custom closing stuff here };
Adam Diament
Esta es una opción, pero a veces el código se está utilizando en diferentes lugares. La respuesta seleccionada funciona cuando desea agregar un comportamiento diferente en diferentes contextos y reutilizar el código de creación de diálogo para obtener la estandarización.
NectarSoft
Tienes overlaydos veces Eso no es necesario, ¿verdad?
radbyx
1
Esto funciona y definitivamente es una respuesta necesaria y útil aquí, pero también ejecuta el código CloseFunction cada vez que el diálogo se cierra por cualquier medio, no solo cuando se cierra con la X o algo así. Entonces, si desea ejecutar cierto código cuando el diálogo se cierra con la X o el botón Cancelar, pero no cuando está cerrado por algo más que sucede (como en mi caso cuando una entrada enviada se valida como correcta), entonces esto no trabajo.
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
fuente
21
$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

La propiedad "cerrar" del diálogo proporciona el evento de cierre para el mismo.

Taksh
fuente
16

También puedes probar esto

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

Esto es lo que funcionó para mí ...

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

A partir de jQuery 1.7, el método .on () es el método preferido para adjuntar controladores de eventos a un documento.

Porque en realidad nadie creó una respuesta con el uso. on()en lugar de bind()decidí crear uno.

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

agregue la opción 'cerrar' como debajo de la muestra y haga lo que quiera en línea

close: function(e){
    //do something
}
Mehdi Roostaeian
fuente
4

Si entiendo el tipo de ventana de la que estás hablando, no $ (window) .unload () (para la ventana de diálogo) no te daría el gancho que necesitas?

(Y si no entendí bien, y usted está hablando de un cuadro de diálogo hecho a través de CSS en lugar de una ventana emergente del navegador, entonces todas las formas de cerrar esa ventana son elementos para los que puede registrar lectores de clics).

Editar: Ah, ahora veo que estás hablando de diálogos jquery-ui, que se realizan a través de CSS. Puede enganchar la X que cierra la ventana registrando un controlador de clic para el elemento con la clase ui-dialog-titlebar-close .

Más útil, tal vez, es decirle cómo resolverlo rápidamente. Mientras muestra el diálogo, simplemente abra FireBug e Inspeccione los elementos que pueden cerrar la ventana. Verá instantáneamente cómo se definen y eso le brinda lo que necesita para registrar los controladores de clics.

Entonces, para responder directamente a su pregunta, creo que la respuesta es realmente "no", no hay un evento cercano que pueda enganchar, pero sí, puede conectar todas las formas de cerrar el cuadro de diálogo con bastante facilidad y obtener Lo que quieras.

andy
fuente
Hola andy Me divierte el diálogo de jquery-ui que se realiza a través de css y javascript. Al mirar el código, creo que hay un gancho para mí, pero no sé cómo llegar a él.
Brownie
2

Puede probar el siguiente código para capturar el evento de cierre de cualquier elemento: página, diálogo, etc.

$("#dialog").live('pagehide', function(event, ui) {
      $(this).hide();
});
Alexei
fuente
1
Simplemente use .on () - en lugar de .live () o .bind ()
cssyphus