web-dev-qa-db-fra.com

jquery-ui-dialog - Comment se connecter à un événement de dialogue

J'utilise le plugin jquery-ui-dialog

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

Est-il possible de capturer un événement proche à partir de la boîte de dialogue?

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

javascriptjqueryjquery-uimodal-dialogjquery-ui-dialog
179
Brownie

Je l'ai trouvé!

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

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

Évidemment, je peux remplacer l'alerte par tout ce que je dois faire.
Edit: Depuis Jquery 1.7, la fonction bind () est devenue on ()

245
Brownie

Je crois que vous pouvez aussi le faire tout en créant le dialogue (copié d'un projet que j'ai fait):

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

183
Darryl Hein
$("#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');
}**
});
31
Mo Ming C
$( "#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 de fermeture pour le même.

20
Taksh

U peut aussi essayer cela

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

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

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

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

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

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

ajoutez l'option 'close' comme sous l'échantillon et faites ce que vous voulez en ligne

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

Si je comprends le type de fenêtre dont vous parlez, ne serait pas $ (fenêtre) .unload () (pour la fenêtre de dialogue) vous donne le crochet 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 contextuelle, alors tout les manières de fermer cette fenêtre sont des éléments pour lesquels vous pouvez vous inscrire.)

Modifier: 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.

Il est peut-être plus utile de vous dire comment résoudre rapidement ce problème. Tout en affichant la boîte de dialogue, ouvrez simplement FireBug et Inspecter 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 d'événement rapproché auquel vous pouvez accéder, mais "oui" - vous pouvez utiliser tous les moyens pour fermer la boîte de dialogue assez facilement et obtenir ce que tu veux.

4
andy

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