web-dev-qa-db-fra.com

Comment attacher un rappel à un effet jquery sur une boîte de dialogue?

Mon problème est que je ne sais pas comment joindre un rappel à la boîte de dialogue jquery ui.

Le spectacle est en fait une option:

$( ".selector" ).dialog({ show: 'slide' });

Je souhaite avoir un rappel une fois l'animation de diapositive terminée. J'ai regardé les effets eux-mêmes et ils ont un rappel:

effect( effect, [options], [speed], [callback] )

Mais dans la boîte de dialogue, l'effet est configuré très différemment. J'ai aussi essayé de mettre:

$( ".selector" ).dialog({ show: 'slide', callback: function() {} });

Mais ça n'a pas marché.

Suggestions?

jqueryjquery-uidialogcallbackeffects
25
Pehmolelu

Mise à jour 2015-07-27 Pour toute personne utilisant jQuery v1.10.0 ou supérieure, veuillez consulter cette autre réponse car ma solution ne fonctionne pas travailler avec des versions plus récentes de jQuery.

Réponse originale

Déjà répondu mais puisque j'avais une réponse, je vais quand même la poster…

$('#dialog').dialog({
    show: {
        effect: 'slide',
        complete: function() {
            console.log('animation complete');
        }
    },
    open: function(event, ui) {
        console.log('open');
    }
});

Affiche open suivi de animation complete dans la Console

39
andyb

Deux ans plus tard, la solution suggérée (par @andyb) ne fonctionne plus dans les versions actuelles de jQuery UI (en particulier depuis la v1.10.0). Sa solution reposait sur la méthode de rappel complete - une fonctionnalité non documentée.

J'ai trouvé une solution à jour, en utilisant jQuery Promise object:

$("#dialog").dialog({
    show: {
        effect: "drop",
        direction: "up",
        duration: 1000
    },
    hide: {
        effect: "drop",
        direction: "down",
        duration: 1000
    },
    open: function () {
        $(this).parent().promise().done(function () {
            console.log("[#Dialog] Opened");
        });
    },
    close: function () {
        $(this).parent().promise().done(function () {
            console.log("[#Dialog] Closed");
        });
    }
});

Voici la démo JSFiddle habituelle: http://jsfiddle.net/losnir/jcmpm/

33
losnir

J'ai téléchargé le bundle de développement jquery ui et j'ai découvert que le rappel est défini avec "complete":

$( ".selector" ).dialog({ show: 'slide', complete: function() {} });

Merci pour tous ceux qui essaient d'aider à résoudre ce problème :)

3
Pehmolelu

Essayez d'utiliser open événement de dialogue:

$( ".selector" ).dialog({
   open: function(event, ui) { ... }
});
1
Igor Dymov

J'ai trouvé nécessaire d'utiliser l'événement "focus:". Je perdais le bouton correctement sélectionné à cause du spectacle :. De belles interactions.

focus: function( event, ui ) {
    $(this).siblings('.ui-dialog-buttonpane').find("button:contains('Upload')").focus();
},
0
Chris Prince