web-dev-qa-db-fra.com

Exécuter une fonction après le chargement de la boîte de dialogue jQuery

C'est peut-être une question simple, mais je n'arrive pas à la faire fonctionner. J'utilise une boîte de dialogue jQuery pour afficher un formulaire chargé à partir d'une autre page de mon site Web. L'utilisateur clique sur un lien qui ouvre la boîte de dialogue. Ce que j'essaie de faire, c'est d'exécuter une fonction après avoir chargé le code HTML dans la boîte de dialogue. Voici mon code pour charger le dialogue:

$(document).ready(function () {
    $(".openDialog").live("click", function (e) {
        e.preventDefault();

        $("#dialogBox").dialog({
            title: $(this).attr("data-dialog-title"),
            close: function() { $(this).remove() },
            modal: true
        })
        .load(this.href);
    });

    $(".close").live("click", function (e) {
        e.preventDefault();
        $(this).closest(".dialog").dialog("close");
    });
});

J'ai une fonction myFunction () que je veux appeler lorsque le code HTML est chargé dans la boîte de dialogue. Après avoir cherché un peu, j'ai essayé de spécifier la fonction dans .load, comme ceci:

.load(this.href, myFunction());

J'ai aussi essayé d'utiliser l'événement ouvert, comme ceci:

open: myFunction(),

Qu'est-ce que je fais mal?

jqueryjquery-uijquery-ui-dialog
12
HTX9

Solution n ° 1: 

.load(this.href, myFunction);

Solution n ° 2: 

.load(this.href, function(){
  myFunction();
});

Solution n ° 3 (préférée): 

open: myFunction,

Solution n ° 4: 

open: function(){
  myFunction();
}

Pourquoi donc?

var foo = myFunction(); // `foo` becomes your function return value
var bar  = myFunction; // `bar` becomes your function
bar();

Votre code devrait ressembler à:

$("#dialogBox").load('http://example.com').dialog({
  title: $(this).attr("data-dialog-title"),
  close: function() { $(this).remove() },
  modal: true,
  open : myFunction // this should work...
})
29
Peter

Aucune des solutions n'a fonctionné pour moi. J'imagine que c'est parce que le callback open n'est pas appelé lorsque la boîte de dialogue est ouverte. J'ai dû utiliser une setTimeout pour que cela fonctionne.

$('#dialogBox').dialog('open');

setTimeout(function(){
    // myFunction();
},100);

Cela dépend évidemment de ce qu'il y a à l'intérieur myFunction.

3
Bruno Calza

Pour jQuery UI - v1.11.4, "complet" dans l'extrait de code ci-dessous ne fonctionne plus:

show: {
    effect: 'clip',
    complete: function() {
        console.log('done');
    }
},

La solution qui fonctionne pour jQuery UI - v1.11.4. :

Comment attacher un callback à un effet jquery lors d'un dialogue?

Comme suggéré par losnir , utilisez $ (this) .parent (). Promise (). Done:

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

J'espère que cela t'aides.

2
Yang Kin

J'ai eu un problème où j'ai chargé une page externe et je voulais aussi exécuter une fonction sur la page chargée. Apparemment, utiliser open: ne fonctionnait pas dans la méthode de dialogue. 

jQuery("#pop-sav").load('/external/page', my_function_name );

jQuery("#pop-sav").dialog({
      resizable: false,
      width:'90%',
      autoReposition: true,
      center: true,
      position: 'top',
      dialogClass: 'pop-dialog pop-sort'
});

Le my_function_name doit être sans parenthèses et juste le nom de la fonction elle-même pour la faire fonctionner. Je ne sais pas exactement comment cela fonctionne, mais si vous y parvenez, faites-le-moi savoir dans les commentaires. 

0
Patoshi パトシ

Vous pouvez également utiliser focus event qui se déclenchera après l’ouverture de la boîte de dialogue et lorsqu’elle aura le focus. 

Cliquez ici pour la documentation

0
prince jose