jquery-ui-dialog - Como conectar-se ao evento de fechamento da caixa de diálogo

186

Estou usando o jquery-ui-dialogplugin

Estou procurando uma maneira de atualizar a página quando, em algumas circunstâncias, quando a caixa de diálogo estiver fechada.

Existe uma maneira de capturar um evento próximo a partir da caixa de diálogo?

Eu sei que posso executar o código quando o botão Fechar é clicado, mas isso não cobre o fechamento do usuário com escape ou o x no canto superior direito.

Brownie
fonte

Respostas:

248

Eu encontrei!

Você pode capturar o evento close usando o seguinte código:

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

Obviamente, posso substituir o alerta pelo que for necessário.
Edit: A partir do Jquery 1.7, o bind () tornou-se em ()

Brownie
fonte
3
typo: $ ('div # popup_content'). bind ('dialogclose', function (event)) {...}
CFNinja
1
Isso é útil, mas está $('div#popup_content')certo? O que devo estar substituindo isso com, tendo em conta o meu diálogo é aberta como estajQuery.fn.dialog.open({})
Jake N
Vejo a caixa de diálogo fechar primeiro e, em seguida, o alerta aparece, se é a mesma situação para todos, alguém pode me ajudar para que o alerta apareça primeiro e, em seguida, ao clicar em OK, a janela se fecha? Correct me ....
changeme
5
Isso deve ser atualizado para usar on () em vez de bind () que agora está obsoleto.
RBZ
2
Lembre-se de que, se um Diálogo da UI do jQuery nunca tiver sido aberto antes em uma página, a div de sobreposição não existirá no DOM. Portanto, você pode considerar fazer algo parecido com isto:$('body').on('dialogclose', '.ui-dialog', function(){...});
thdoan
192

Eu acredito que você também pode fazer isso enquanto cria a caixa de diálogo (copiada de um projeto que eu fiz):

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
Essa resposta me parece mais correta do que a resposta aceita. Além disso, a documentação da API correta pode ser encontrada aqui: api.jqueryui.com/dialog/#event-close
Chris Gillum
2
Jake N - Você precisa realmente escrever uma função acessível ao diálogo chamada 'CloseFunction' Para que isso funcione, por exemplo acima, você pode escrever var CloseFunction = function() { //Do your custom closing stuff here };
Adam Diament
Esta é uma opção, mas no momento o código está sendo usado em lugares diferentes. A resposta selecionada funciona para quando você deseja adicionar comportamentos diferentes em contextos diferentes e reutilizar o código de criação de diálogo para obter padronização.
NectarSoft
Você tem overlayduas vezes. Isso não é necessário, certo?
Radbyx #
1
Isso funciona e é definitivamente uma resposta necessária e útil aqui, mas também executa o código CloseFunction sempre que a caixa de diálogo é fechada por qualquer meio, não apenas quando fechada com o X ou algo assim. Portanto, se você deseja executar determinado código quando a caixa de diálogo é fechada com o botão X ou Cancelar, mas não quando é fechada por alguma outra coisa acontecendo (como no meu caso, quando uma entrada enviada é validada como correta), isso não acontece. trabalhos.
mikato 14/09/16
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
              }  
              });

A propriedade "close" da caixa de diálogo fornece o evento close para o mesmo.

Taksh
fonte
16

Você também pode tentar isso

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

Isto é o que funcionou para mim...

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

A partir do jQuery 1.7, o método .on () é o método preferido para anexar manipuladores de eventos a um documento.

Porque ninguém criou uma resposta com o uso. on()em vez de bind()eu decidi criar um.

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

adicione a opção 'close' como na amostra e faça o que você deseja função inline

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

Se eu estou entendendo o tipo de janela que você está falando, não $ (window) .unload () (para a janela de diálogo) não daria o que você precisa?

(E se eu entendi errado, e você está falando sobre uma caixa de diálogo feita via CSS, em vez de uma janela pop-up do navegador, então tudo as maneiras de fechar essa janela são elementos pelos quais você pode registrar manipuladores de cliques.)

Edit: Ah, agora vejo que você está falando sobre diálogos jquery-ui, que são feitos via CSS. Você pode conectar o X que fecha a janela registrando um manipulador de cliques para o elemento na classe ui-dialog-titlebar-close .

Mais útil, talvez, é lhe dizer como descobrir isso rapidamente. Enquanto estiver exibindo a caixa de diálogo, basta abrir o FireBug e Inspecionar os elementos que podem fechar a janela. Você verá instantaneamente como eles são definidos e isso fornece o que você precisa para registrar os manipuladores de cliques.

Portanto, para responder diretamente à sua pergunta, acredito que a resposta é realmente "não" - não há um evento próximo que você possa conectar, mas "sim" - você pode conectar todas as maneiras de fechar a caixa de diálogo com bastante facilidade e obter o que você quer.

andy
fonte
Ei, Andy. Estou divertindo o diálogo do jquery-ui que é feito via css e javascript. Ao olhar para o código, acho que há um gancho para mim, mas não sei como chegar a ele.
Brownie
2

Você pode tentar o seguinte código para capturar o evento de fechamento de qualquer item: página, caixa de diálogo etc.

$("#dialog").live('pagehide', function(event, ui) {
      $(this).hide();
});
Alexei
fonte
1
Basta usar .no () - em vez de .Live () ou .bind ()
cssyphus