Discussion :

[MadStar]

Bonjour !

J'aimerais faire apparaître plusieurs dialogs sur une même page. Chacune des dialogs sert à afficher un contenu reçu via Ajax.
Pour cela j'ai créé la fonction suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
function call(url, id)
{
    // Vérification des paramètres
    if(!url && !id) return;
 
    var node = null,
        init = false;
 
    // Récupération ou création de l'élément d'identifiant 'id'
    if($('#'+id).size())
        node = $('#'+id);
    else
    {
        node = $('<div/>').attr('id', id).hide().appendTo(document.body);
        init = true;
    }
 
    // Chargement de la page 'url' dans l'élément
    node.load(url);
 
    // Page chargée -> ouverture de la boite de dialogue
    node.ajaxComplete(
        function(event, request, settings) {
            if(init) node.dialog(); // Initialisation
            node.dialog('open'); // Ouverture
        }
    );
}

Cette fonction permet de charger le résultat d'une requête AJAX, dont l'URL doit être fournie en premier paramètre, dans l'élément HTML ayant pour identifiant le second paramètre pour enfin l'afficher comme un dialog.

Pour appeler la fonction, plusieurs images possèdent donc l'attribut suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

onclick="call('une_url', 'un_id')"

Problème : Au premier clic sur une image pas de soucis, mais lorsque que plusieurs dialogs ont été initialisées, l'ouverture d'un dialog ouvre les autres.

Si vous avez une idée sur le problème je suis preneur .
Merci.

[danielhagnoul]

Bonsoir.

"ajaxComplete" est un événement qui se déclenche chaque fois qu'une requête AJAX se termine. Il est donc normal que tous vos dialogues s'ouvrent.

Il faut restreindre sa portée à l'URL traité. Voir http://danielhagnoul.developpez.com/...evenement.html et plus particulièrement l'exemple 3 : http://danielhagnoul.developpez.com/...estEvent3.html qui traite l'événement "ajaxError" et limite la portée à l'URL en cours.

[MadStar]

Bon... J'ai pas du bien cerner le fonctionnement de jQuery !

Bien que l'évènement ajaxComplete se déclenche à la fin de chaque requête Ajax, je pensais que l'évènement ne s'appliquerait que sur l'élément "node" sélectionné en fonction de l'identifiant fourni.

Je vais refaire les choses différemment en m'aidant de votre tutoriel sur les évènements.

Merci beaucoup !

[kaen25]

le plus simple étant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
node.load(url,function() {
            if(init) node.dialog(); // Initialisation
            node.dialog('open'); // Ouverture
        });

Attention si la page retourne une erreur le calback sera malgré tout lancé.

[MadStar]

Effectivement ça fonctionne mais je vais essayer de faire ça plus proprement !

Merci.

[MadStar]

Finalement il ne fallait pas changer grand chose pour que ça fonctionne correctement.

Si j'ai bien compris, le fait de définir une fonction pour les évènements tels que ajaxComplete revient à faire un bind() entre l'évènement et la fonction. Donc à chaque fois que le bout de code en question est exécuté, la fonction telle qu'elle est définie sur le moment est liée à l'évènement.
C'est pour cela que j'avais plusieurs dialogs qui s'ouvraient. Plusieurs fonctions pour l'affichage de différents dialogs étaient liées à l'évènement ajaxComplete.

La fonction ajax() met à disposition des options afin de définir des fonctions pour les mêmes types d'évènements, sauf que de cette manière il n'y a pas de liaison permanente entre les fonctions et les évènements.
En l'utilisant à la place de load() ça marche comme il faut.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
function call(url, id)
{
    // Vérification des paramètres
    if(!url && !id) return;
 
    var node = null;
 
    // Récupération ou création de l'élément d'identifiant 'id'
    if($('#'+id).size())
        node = $('#'+id);
    else
        node = $('<div/>').attr('id', id).hide().appendTo(document.body);
 
    // Chargement de la page 'url' dans l'élément et ouverture du dialog
    $.ajax({
        type: 'POST',
        url: url,
        success: function(html) {
            node.html(html);
        },
        error: function() {
            node.html("Erreur !");
        },
        complete: function() {
            node.dialog()
            node.dialog('open');
        }
    });
}

Si j'ai dit n'importe quoi ou que mon code n'est pas propre n'hésitez pas à m'en faire part.

Merci !