jquery-ui-dialog - Comment se connecter à l'événement de fermeture de dialogue

187

J'utilise le jquery-ui-dialogplugin

Je cherche un moyen de rafraîchir la page lorsque, dans certaines circonstances, la boîte de dialogue est fermée.

Existe-t-il un moyen de capturer un événement de clôture à partir de la boîte de dialogue?

Je sais que je peux exécuter du code lorsque vous cliquez sur le bouton de fermeture, mais cela ne couvre pas la fermeture de l'utilisateur avec échappement ou le x dans le coin supérieur droit.

Lutin
la source

Réponses:

249

Je l'ai trouvé!

Vous pouvez intercepter l'événement close à l'aide du code suivant:

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

Évidemment, je peux remplacer l'alerte par tout ce que j'ai à faire.
Edit: Depuis Jquery 1.7, le bind () est devenu on ()

Lutin
la source
3
typo: $ ('div # popup_content'). bind ('dialogclose', function (event)) {...}
CFNinja
1
Ceci est utile mais est-ce $('div#popup_content')vrai? Par quoi devrais-je remplacer cela, en gardant à l'esprit que ma boîte de dialogue est ouverte comme cecijQuery.fn.dialog.open({})
Jake N
Je vois que la boîte de dialogue se ferme d'abord et ensuite l'alerte apparaît, si c'est la même situation pour tout le monde, quelqu'un peut-il m'aider pour que l'alerte apparaisse d'abord et ensuite sur OK puis la fenêtre se ferme? Correct me ....
changement du
5
Cela devrait être mis à jour pour utiliser on () au lieu de bind () qui est maintenant obsolète.
RBZ
2
Gardez à l'esprit que si une boîte de dialogue d'interface utilisateur jQuery n'a jamais été ouverte auparavant sur une page, le div de superposition n'existera pas dans le DOM. Par conséquent, vous pouvez envisager de faire quelque chose comme ceci à la place:$('body').on('dialogclose', '.ui-dialog', function(){...});
thdoan
193

Je pense que vous pouvez également le faire lors de la création de la boîte de dialogue (copiée à partir d'un projet que j'ai réalisé):

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

Remarque close: CloseFunction

Darryl Hein
la source
9
Cette réponse me semble plus correcte que la réponse acceptée. De plus, la documentation correcte de l'API peut être trouvée ici: api.jqueryui.com/dialog/#event-close
Chris Gillum
2
Jake N - Vous devez en fait écrire une fonction accessible dans la boîte de dialogue appelée 'CloseFunction' pour que cela fonctionne, par exemple juste au-dessus, vous pourriez écrire var CloseFunction = function() { //Do your custom closing stuff here };
Adam Diament
C'est une option mais au moment où le code est utilisé à différents endroits. La réponse sélectionnée fonctionne lorsque vous souhaitez ajouter un comportement différent dans différents contextes et réutiliser le code de création de boîte de dialogue pour obtenir la standardisation.
NectarSoft du
Vous avez overlaydeux fois. Ce n'est pas nécessaire, non?
radbyx
1
Cela fonctionne et est certainement une réponse nécessaire et utile ici, mais il exécute également le code CloseFunction à chaque fois que la boîte de dialogue est fermée par tous les moyens, pas seulement lorsqu'elle est fermée avec le X ou quelque chose. Donc, si vous voulez exécuter certains codes lorsque la boîte de dialogue est fermée avec le X ou le bouton Annuler, mais pas lorsqu'elle est fermée par quelque chose d'autre qui se passe (comme dans mon cas lorsqu'une entrée soumise est validée comme correcte), alors ce ne sera pas travail.
mikato le
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
la source
22
$( "#dialogueForm" ).dialog({
              autoOpen: false,
              height: "auto",
              width: "auto",
              modal: true,
                my: "center",
                at: "center",
                of: window,
              close : function(){
                  // functionality goes here
              }  
              });

La propriété "close" de dialog donne l'événement close pour le même.

Taksh
la source
16

Vous pouvez également essayer ceci

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

C'est ce qui a fonctionné pour moi...

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

Depuis jQuery 1.7, la méthode .on () est la méthode préférée pour attacher des gestionnaires d'événements à un document.

Parce que personne n'a vraiment créé de réponse en utilisant. on()au lieu de bind()moi, j'ai décidé d'en créer un.

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

ajoutez l'option 'fermer' comme sous l'exemple et faites ce que vous voulez la fonction en ligne

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

Si je comprends le type de fenêtre dont vous parlez, $ (window) .unload () (pour la fenêtre de dialogue) ne vous donnerait-il pas le hook dont vous avez besoin?

(Et si j'ai mal compris, et que vous parlez d'une boîte de dialogue créée via CSS plutôt que d'une fenêtre de navigateur pop-up, alors toutes les façons de fermer cette fenêtre sont des éléments pour lesquels vous pouvez enregistrer des gestionnaires de clics.)

Edit: Ah, je vois maintenant que vous parlez de dialogues jquery-ui, qui sont créés via CSS. Vous pouvez accrocher le X qui ferme la fenêtre en enregistrant un gestionnaire de clic pour l'élément avec la classe ui-dialog-titlebar-close .

Plus utile, peut-être, est-ce que vous vous dites comment résoudre cela rapidement. Lors de l'affichage de la boîte de dialogue, ouvrez simplement FireBug et inspectez les éléments qui peuvent fermer la fenêtre. Vous verrez instantanément comment ils sont définis et cela vous donne ce dont vous avez besoin pour enregistrer les gestionnaires de clics.

Donc, pour répondre directement à votre question, je pense que la réponse est vraiment "non" - il n'y a pas un événement proche que vous pouvez accrocher, mais "oui" - vous pouvez accrocher toutes les façons de fermer la boîte de dialogue assez facilement et obtenir ce que tu veux.

Andy
la source
Hé Andy. J'amuse le dialogue de jquery-ui qui se fait via css et javascript. En regardant le code, je pense qu'il y a un crochet pour moi mais je ne sais pas comment y arriver.
Brownie
2

Vous pouvez essayer le code suivant pour capturer l'événement de clôture pour n'importe quel élément: page, boîte de dialogue, etc.

$("#dialog").live('pagehide', function(event, ui) {
      $(this).hide();
});
Alexei
la source
1
Utilisez simplement .on () - au lieu de .live () ou .bind ()
cssyphus