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

Question

Estoy usando el jquery-ui-dialog plugin

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

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

Sé que puedo ejecutar 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.

Answer 1

¡Lo he encontrado!

Puedes capturar el evento de cierre usando el siguiente código:

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

Obviamente, puedo reemplazar la alerta con cualquier cosa que necesite hacer.
Editar: A partir de Jquery 1.7, el enlace () se ha convertido en ()

Answer 2

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

Note close: CloseFunction

Answer 3

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

Answer 4

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

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

Answer 5

U también puede 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");
                }
            }
        });

Answer 6

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

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

Answer 7

  

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

Debido a que nadie realmente creó una respuesta usando. on () en lugar de bind () decidí crear una.

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

Answer 8

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

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

Answer 9

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

(Y si no entendí bien, y está hablando de un cuadro de diálogo hecho a través de CSS en lugar de una ventana emergente del navegador, entonces todos son las formas de cerrar esa ventana que 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 .

Quizás sea más útil que le diga cómo resolverlo rápidamente. Mientras muestra el cuadro de diálogo, simplemente abra FireBug e Inspeccionar 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 puedas enganchar, pero "sí" - puede conectar todas las formas de cerrar el cuadro de diálogo con bastante facilidad y obtener lo que desea.

Answer 10

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